210 comments

[ 2.7 ms ] story [ 248 ms ] thread
I've always liked ExoticSilicon's design, but not until this post did I realize their smart bit of CSS for default font size:

  font-size: min(max(1em, 1.3vw), 1.3em);
Which explains why it looks just right on my high-DPI Chromebook even though I haven't configured a big enough default font size for the browser.

This is going to be the default font-size for all of my websites now (preceded by a fallback for maximum compatibility of course).

If you want it to be even more readable you could do the following:

    font-size: clamp(1em, 1.3vw, 1.3em);
I would also consider using `rem` instead of `em` incase you want to use it anywhere other than the root element.
I would only use this kind of thing on the root element, then size all other elements relative to the root element e.g. h1 { font-size: 1.5rem; }. It's more manageable that way IMHO.

Thanks for the tip on clamp() by the way, TIL.

That's less reasable bwcause the order of arguments is mysterious.
I absolutely hate this. Viewport width has nothing to do with DPI and should not affect the font size. I didn't get a larger monitor just so that everything can waste more space with giant text.
That's the thing. These hacks alwways end up negatively impacting some edge cases. I found a site once that used JS to autosize the text... as a result you couldn't manually resize with ctrl - and ctrl+.. It's better to stick to standards
> I didn't get a larger monitor just so that everything can waste more space with giant text.

That's what the outer min() is for: it makes sure the font size caps out at 1.3em which usually translates to 16 x 1.3 = 20.8px, which is well within the recommended size range for prose anyway.

What that whole snippet does boils down to exactly what they said in the article:

> The main global stylesheet uses the browser default font size, smoothly scaled up to 130% on higher-resolution displays as the baseline for the body text of the whole document.

On a low-dpi screen, nothing changes. On a high-dpi one, if you haven't set your browser text size to something larger, this snippet saves you from tiny unreadable text. Also note that ctrl+ and ctrl- to zoom still work just fine. It's not as dramatic a change as the sibling comment said. You can try it out on their site to see for yourself.

> That's what the outer min() is for: it makes sure the font size caps out at 1.3em which usually translates to 16 x 1.3 = 20.8px, which is well within the recommended size range for prose anyway.

Recommended by people who only read twitter-length content maybe.

> On a low-dpi screen, nothing changes.

Repeat after me: viewport width has nothing to do with DPI.

This absolutely does change the font size on large low DPI screens.

If you want to scale with DPI you don't have to do anything. CSS already does that for you by default. Even "px" is scaled by DPI in CSS.

> On a high-dpi one, if you haven't set your browser text size to something larger, this snippet saves you from tiny unreadable text.

Yes, don't do that. Respect the users settings as they are set or give up any pretense that you are doing so and just set reasonable fixed font size.

> Also note that ctrl+ and ctrl- to zoom still work just fine. It's not as dramatic a change as the sibling comment said. You can try it out on their site to see for yourself.

That you can fuck things up even worse does not make this "hack" good.

That's it, I've completed the Internet. This is my new favorite page. The aesthete in me may bristle, but the pragmatist agrees. There are many ergonomic and UX concerns to consider when designing things, but I think they make their case very well and I didn't find it a problem to read at all.
the background distracts too much, but otherwise it's pretty readable.
There are various themes and it works well on mobile and doesn’t look like every single other website out there today, so I count it as a win.

It’s kind of how so many LaTeX documents look the same because nobody bothers to design anything; the inverse problem from Word where things are too easy to change.

   > It’s kind of how so many LaTeX documents look the same because nobody bothers to design anything
I see that as a feature honestly.
Oh, it certainly is, but the further you drift from "scientific report/research paper" the worse the defaults get.
> my designs draw from styles and concepts typical of 8-bit computer magazines in the late 1980s and early 1990s

I think they channel the feeling quite well

I love the indignation over being accused of 90s web design when they are actually in fact inspired by 90s print design.
Yes. Their design reminds me of WIRED magazine from the 1990's, not at all like web pages from the 1990's.
Their "80s theme" should be more widely used
Well, the current trend of gradients in text colors (usually purple to blue) is something we were told not to do in the 90s, because it would make our sites look like cheap videogames from the 80s. We would be doing it with GIFs.

However inventing something new is really difficult especially after the space of the ideas had been explored for a long time.

As for fashion, once you exhausted all the variations of the current fad you have to start again with an old one, with a twist. The result is that all those new web sites look old to me.

Exoticsilicon looks really old.

>progressive

nothing progressive about this design. just call yourself peculiar instead of giving this veneer of betterment

> just call yourself peculiar instead of giving this veneer of betterment

A leader in the clubhouse for the Accidental HN Slogan of the Year award.

The widespread adoption of this credo would improve modern life immeasurably.
> If you insist on trying to use ‘reader’ mode to view our webpages, then you are simply creating your own problems.
The only thing the design needs is a max width on the paragraphs for large screens.
I suspect they would reply with "resize your browser window".
This is shockingly common but do these people resize their window for every site they visit? Or they keep the window narrow and then sites with side navigation need to put it somewhere else?

Having a large window should be telling the site "you have this space, make the best of it". Maybe it would be nice to have a built-in CSS property for "desired reading text width" but I think most people can pick a number and it is generally good for most readers.

I'm one of those non-fullscreen browser (and most things in general, other than vim) window people.

> Having a large window should be telling the site "you have this space, make the best of it"

I 100% agree but I interpret this in reverse: if I made my browser window gigantic I expect you to use it. If I make my browser window small I expect you to responsively shrink.

The reason this doesn't happen is that it's pretty hard to build layouts that work across all these different screen sizes. That's generally why you get mobile/tablet/1600x900 desktop layouts and that's it.

---

I suspect this is another consequence of the app vs. text tension on the web. Apps are great to fullscreen: you want Spotify or Figma to take up the whole window. You don't want a single sentence to unfurl entirely horizontally. But there's no way to say, "I'm the kind of user who sets the browser window size to as much as you can use, so use it all" or "I'm the kind of user who wants you to center your text elements and take up at most 1600px of space even when my browser window is using 3800px."

Well, you could do something smart with CSS columns, but nobody does that.
Are you perhaps a Windows user accustomed to maximized windows only?
I don't resize for every window, but I'm also not bothered about having to resize it if and when it makes sense. It takes longer type in a domain name, so it's hardly a big deal.
> This is shockingly common but do these people resize their window for every site they visit?

I don't. I never use my browser full-screen, but I do size it in whatever way makes it work with whatever else I have going on on my desktop. Usually, this is a very small window.

If that makes a site unusable, and if the site isn't essential, then I just move on to a different site. I'm not going to rearrange things just to accommodate the whims of some random web designer.

> You agree not to use the content to train AI systems or machine learning systems.

https://research.exoticsilicon.com/terms

First I’ve seen that.

Seems unlikely to be enforceable as "overly expansive", as someone could surely argue our brains are just AI and/or ML but in organic form. Does that mean I'm not allowed to learn from the website?
Are you aware of what the "A" in AI and the "M" in ML stand for?
No, I work in a field without having zero idea what the most basic terminology actually means.

Are you aware what "organic" means? Have some imagination. We can call it OI and OL to make it a bit easier if you want.

Did you know that different words have different meanings?
If you called something OI and OL then you wouldn't be referring to AI and ML. They would be different things. It's clearly big brain time for you...
> Are you aware what "organic" means?

I am, but I always get an argument when I tell certain people that "all food is organic", despite the fact that's technically correct.

> as someone could surely argue our brains are just AI and/or ML but in organic form.

Our brains are artificial intelligence? Humans are machine learning?

I mean, c'mon. If humans are artificial, then what do you call real? If humans are machines, then what on earth isn't?

I could see an argument that a test tube baby might be something like a human created by artifice.
good luck with that, it's pure natural DNA and pure natural gestation and pure old-school education. only the fecondation was provoked.
>someone could surely argue

No, they could not. Even if they did, those things are just different. It won't change what AI/ML is, a bunch of bytes in memory and on a disk. Just making a bunch of reaching comparisons, won't absolve AI/ML of responsibility.

Neural networks are modeled of human brains in some ways but the majority of AI is not and humans just anthropomorphize the results. Humans don't take in terabytes of data and spend hours fitting a multidimensional regression between labels and the raw data. We build logical connections to understand things over continued exposure. Just because AI "feels" human does not mean it approaches anything actually resembling a human mind. What holds us back from understanding this in the legal system is the fact that lawyers and judges are so technically illiterate.
> Neural networks are modeled of human brains in some ways

Hum... Not really. They are modeled after our periferic nervous system. Detailed knowledge about the brain wasn't very available at computer science departments at the time they were created. Besides, they have a much "cleaner" design that would win the computer scientists esthetic preferences every time anyway.

I think this is AI generated, because of obvious mistakes like listing elements of 90's web design which includes "sans-serif" and then in the next paragraph insisting that no 90's web design elements are used, while all the headers uses a sans-serif font.
(comment deleted)
You'd probably get a reply that sans-serif fonts were invented in ancient Greece.
You misread. They said the opposite:

> Websites in the, (late), 1990s were characterised by many things, but a typical list might include:

> - Serif fonts

Tried out all of their themes on the welcome page, which seems like a nice showcase of what's available when you switch the themes: https://research.exoticsilicon.com/welcome

Here's the aspects that I personally enjoyed:

  - Tropical nights: this feels like a pleasant theme on the eyes, almost like an IDE dark mode
  - Nitrate memories: another theme that feels fairly readable, with the contrast being okay in *most* places
  - Light pastels: this one dials down the colors a little bit so they're not as distracting
That said, when most of the web looks more or less the same way, it feels like this site stands out too much and the design detracts from the experience, in my eyes. For example, opening the page linked in this post, you're confronted with colorful shadows, titles (the questions) in a serif font that's not as bold as the answers that come in a sans serif font, a static background for when you scroll the content that's an image that you can't quite read.

I'd probably just have a chuckle about the quirky design and go browse other sites that might have the information that I'm looking for, due to my eyes scanning them more quickly and easily, much like you'd look at data in a spreadsheet (sans annoying pop-ups and other dark patterns that web is plagued with). But you know what? Their website design is none of my business, it's fine for them to make their own choices and run it how they desire, even if some of the answers on this particular page are a bit on the nose.

Can't say whether we'd benefit from more or less of that, in general, though.

> That said, when most of the web looks more or less the same way, it feels like this site stands out too much and the design detracts from the experience, in my eyes.

The site's design is not to my taste -- but I seriously love that it doesn't look like almost all of the rest of the web.

Most of the web all looks the same. I applaud Exotic Silicon for pushing back against that.

I really really miss the multi-skinned website thing. Having multiple personalities for your site was such just a rip roaring cool thing. That whole idea of a site being an experience has gotten simmered away. In many cases that reduction of friction is due & appreciated, but there's something to be said for having a bit of an experience too, even if it is a kind of shallow/transactional bit.

My first webshack internship had a nice website with like 20+ very slick early web designs folks could switch between. So cool.

There's the Css Zen Garden, a set of html elements to practice your design chops on. That was so the spirit of web design, highlighted so powerfully how bodaciously rad having html structured information & css styling as separate entities was, rather than as almost all UI toolkit do having the two concerns more intermingled. Zen Garden Forever. https://www.csszengarden.com/

(comment deleted)
> Stop using the site immediately and consult a qualified ophthalmologist. Seriously, no static display on a modern and correctly adjusted VDU such as a computer monitor or phone screen should ever be inducing headaches or eyestrain in a healthy individual when properly used for reasonable time periods, and with sufficient breaks. If it is, you may have an underlying health condition which has otherwise gone un-noticed.

So they’re saying that they’re aware that their website is inaccessible to some people with certain health conditions, and they don’t intend to do anything about it.

That’s like if a grocery store with a staircase at the front door put up a sign that says, “If you have trouble climbing these stairs, consult your doctor. No person with healthy legs should have trouble climbing these stairs. You may have a health condition.”

I mean, thanks for the advice, but you’re still excluding people.

The tone of the website has a very tongue-in-cheek tone to me. Taking it seriously is like doing journalism research using The Onion.
How does a person who can’t read the text because of their health issues know that it’s tongue in cheek?
Should the vast majority of the world who do not have those health issues be deprived of its glory, because there is a minority who - very sadly and unfortunately for them - cannot look at it? Should Picasso not have bothered painting since some people are blind? Should Tolstoy not have written War and Peace because some people do not have the reading level to cope with such a complex book? Should Maria Callas not have sung so beautifully because the deaf would never be able to hear her?

If you are there for the content and not the design, then it works fine with a browser like Lynx. Thus all the content is entirely accessible.

A website can be designed so that it adapts to the user’s needs. For example, there exist CSS media features that allow websites to honor the user’s preferences for color scheme, reduced motion, and increased contrast, among others.

https://w3c.github.io/csswg-drafts/mediaqueries-5/#mf-user-p...

The website can both have a shrill design and be accessible at the same time.

Can you give me a concrete example of somebody who is unable to access the content, albeit using Lynx or with settings changes to Firefox?
(Copy-pasted from other comment:) The author of that website claims that they’ve seen multiple comments that complain about headaches and eyestrain. This is the first item in the FAQ, which suggests that it’s one of the most common complaints.
No. They are sarcastically saying that people making those complaints are doing so figuratively, not literally. Find one person who has genuinely suffered a surprise headache after looking at this site and you’ll have a stronger argument.

Accessibility doesn’t mean everything should be available to everybody at all times. That would be universal direct accessibility, which is impossible. Those without the internet or computer access cannot use a grocery website, but the grocery store is still open, and thus the groceries are still indirectly accessible. Providing an elevator as well as stairs means the 2nd floor is universally accessible, even though some cannot use the stairs.

Here, the content is provided by default with an unusual design. That design is part of their brand experience, which is why it has been posted. Some people cannot view through that experience, but they can still reasonably access the content using assistive technology. Thus the website is indirectly accessible.

Remove the design and you make the experience inaccessible to me. These are trade offs, not absolutes.

> people making those complaints are doing so figuratively, not literally

You’re assuming. It’s probably not a good idea to base one’s website’s accessibility strategy on such assumptions. Headaches and eyestrain are a real problem for many people. For example, people turn on dark mode because they have trouble looking at white backgrounds late at night or early in the morning. The same rule probably applies to bright colors.

> Remove the design and you make the experience inaccessible to me. These are trade offs, not absolutes.

I don’t think trade-offs are necessary. The website can have a shrill design and be accessible at the same time. For example, if the website was compatible with the browsers’ reader modes, then users could view the site in a simple black and white design.

This is a pretty pointless conversation.

They're going to keep the design. I'm going to be happy about that. You're not.

> Should the vast majority of the world who do not have those health issues be deprived of its glory, because there is a minority who - very sadly and unfortunately for them - cannot look at it?

FWIW, the law says yes. And the law is right, IMO: we should not deprive a minority of their rights just because the majority is fine with the status quo.

And everyone will become disabled if they don't die young. Eyesight in particular is pretty much guaranteed to decline with age.

Which law? Show me.
They may be referring to Section 508 of the Rehabilitation Act [1], which:

> ...requires federal agencies and any institution that receives federal funding to make electronic technology and information equally accessible for individuals with disabilities. This means that an organization's website must have all features just as accessible for individuals with disabilities as these features are for individuals without disabilities. For example, it must be equally easy for an individual with a disability to find information about an organization's services on their website as it is for non-disabled individuals to access this information.

This is an American law, but obviously other countries may have their own equivalents.

1. https://acs-web.com/digital-marketing-lexicon/section-508-of...

> federal agencies and any institution that receives federal funding

I don't think that website is either a US federal agency or receives any US federal funding.

> I don't think that website is either a US federal agency or receives any US federal funding.

IMHO it's hard to tell either way, because their website wasn't designed with ease-of-use in mind.

That said, here's some facts I was able to gather on their business:

> Whilst IT research remains our primary focus, we now offer executive high-end commercial IT services to organisations with unique problems to solve.

> ...we also have a large body of knowledge of older systems, many of which have now gone full-circle and fallen into disuse, technology that has been abandoned and forgotten. We occasionally do projects involving those, especially when nobody else seems to remember how they worked. Our knowledge-base includes legacy programming languages such as Fortran, data conversion from obscure file formats, and even assembly language coding on various platforms.

Based on these quotes, I don't think it's out of the realm of possibility that they have clients in government.

OK, your comment here made me gird my loins and actually put up with reading the rest of their website.

Anything is possible, I suppose, but everything I've seen on that site leads me to think it's not a company at all, but a personal hobbyist's website, or perhaps that of a hobbyist club.

Oh for sure, I definitely also get "hobbyist" vibes from this. I'm not in this thread to persuade anyone that this is a federal contractor's corporate page. My original comment was, more than anything, an attempt to answer the question "Which law?"
The Americans with Disabilities Act.

From ada.gov:

> The Americans with Disabilities Act (ADA) is a federal civil rights law that prohibits discrimination against people with disabilities in everyday activities.

And specific to web sites:

https://www.ada.gov/resources/web-guidance/

Where is the discrimination here?
> Where is the discrimination here?

Restating the post I originally responded to:

> Should the vast majority of the world who do not have those health issues be deprived of its glory, because there is a minority who - very sadly and unfortunately for them - cannot look at it?

The key words from the comment are: "cannot look at it"

For comparison, some other similar discriminatory phrases from history: "cannot swim in it", "cannot drink from it", "cannot ride on it", "cannot enter it", "cannot buy it"

So because they cannot look at the design, that's discrimination, even if they _are_ able to access the content itself? Why don't you take legal action against them?
> even if they _are_ able to access the content itself?

Just as a non-wheelchair accessible store is an example of discrimination, even if someone in a wheelchair could conceivably gain access to it by dragging themselves up the steps with their arms.

> Why don't you take legal action against them?

Because I'd honestly rather they do the right thing for the right reasons. Lawsuits should be a means of last resort.

And honestly, I'm not rich enough to fund a legal campaign. I'll leave that to someone with more money than I.

If the user can use reasonable measures (such as different settings, or an alternative browser) to access the content, that's not at all the same as asking a wheelchair user to drag themselves up the stairs.

There is absolutely no legal requirement to either spend a fortune on designers, or reduce your website to some boring text-only mush, in the name of "accessibility". The website in question is accessible via a screen-reader, but even if it wasn't, they are not in a market where broad accessibility would be considered a legal requirement. If that were the case, half the websites on the internet would be taken offline.

If you did take this to court, you would lose.

Do you actually know someone who can't read the text, or are you concern trolling?

Since you quoted and responded to it, it seems you are in agreement with the site authors. There are 10 themes. do all of them make any one person's eyes bleed?

> Do you actually know someone who can't read the text, or are you concern trolling?

The author of that website claims that they’ve seen multiple comments that complain about headaches and eyestrain. This is the first item in the FAQ, which suggests that it’s one of the most common complaints.

> There are 10 themes. do all of them make any one person's eyes bleed?

The theme selector is at the bottom of the page. It’s unlikely that a person who gets a headache/eyestrain from the design will find it in time.

So the answer is no, you don't know anyone who can't read the text.

People post all kind of things online, especially hyperbole. As one of the other FAQ questions notes a lot of people also complain about their eyes bleeding, but this has never actually happened.

When users complain about headaches and eyestrain, it’s probably better to take them seriously.
I once worked at a place where we shifted some content from a two column layout to three columns. We had users telling us it was literally giving them headaches and making them feel ill. This despite the fact that it now looked basically like the rest of our content. You absolutely cannot take all user complaints seriously.
Please rewrite your comments. I'm finding them quite offending.
Almost everything posted online is hyperbole
This is not a grocery store. It’s a niche enthusiast website.

It’s supposed to be fun. Many fun things “exclude” people. Sports for instance. Music. Painting. There might be accessible versions. There are also inaccessible ones that trade off artistic expression over other factors. The internet is a big place. There’s room for all of it.

I disagree. There’s no room for inaccessible websites. You don’t have to trade off anything. You can have both artistic expression and accessibility at the same time. For example, the website can make sure that it’s compatible with the browsers’ reader views. Then users can switch to reader view to read the text in simple black and white.
It is accessible - it matches standards and is available in text-only browsers.
I disagree. A website that induces eyestrain and headaches in some people is not fully accessible, unless the user has an easy way to switch to a simpler design. Browsers have reader modes, but the website in question is not compatible with them.
As someone who suffers from strong eyestrain issues, I strongly disagree.

There are an infinite number of possible disabilities. Most disabled people already have tools to accommodate.

If you can't see little things, you can zoom. If you have issue with poor contrasts, you can configure your display and/or your browser and/or your OS. If you can't see anything, you can use screen readers. If you have issues with low contrasts, you configure your computer or your browser to override contrasts.

Being "accessible" doesn't mean that your website have to think about every possible disability and that you have to provide a solution. It means that you use decent defaults styles but above all, it means that your website continues to function when it's degraded by the user agent.

Someone with eyestrain issues will not hate you because you made a bad color choice for his disability. But he will probably hate you if him changing the colors or the zooming ratio renders your website unusable.

edit : Also I have strong issues with contrasts due to amblyopia + astigmatism and this page was a pleasure to read. Black on light gray with slight font shadow is exactly what my eyes need.

How can a user with eyestrain issues change the colors of a website?
It depends on your own issue but :

- https://addons.mozilla.org/fr/firefox/addon/font-contrast-fi...

- https://addons.mozilla.org/fr/firefox/addon/darkreader

Or anything that can change or override the default browser style-sheet. Be it yourself if you are technical savvy enough or a tool.

It can also just be your monitor settings if it suits you.

I’m not sure that such browser extensions resolve websites from accommodating users with eyestrain/headaches. At the very least, a website with a shrill design should be compatible with the browsers’ reader modes, and the website in question isn’t.
The question is, can it be considered accessible under legal standards (i.e. US ADA or the EU EEA, which is slated to come into final effect in 2025)?

In general, courts tend to follow not just the letter of the law but also the intent, so it's better to go on the safer side.

My online gripe is I can't use reader view.
Comes across as awfully defensive... Is this a satire website? I can't tell.
They are earnest trolls. They appear to be freelance contracting consultants, for people who need temporary work to solve a software problem. They don't care about being approachable or having a readable website. They do care about looking like smart edgy programmers, presumably because they only want to be hired by people who like smart edgy programmers. But I couldn't find how to hire them, so the whole thing may just be a goof for one person's personal hobby tech blog.
Bookmarked for inspiration. This was seriously refreshing even if I hope most corporate websites won't copy it.

Not everything needs to be hard and not everything needs to be dull.

I really like the site and the qa thread. A criticism: The site/theme info footer is off center to the right on Samsung Galaxy browsers (ff, chrome, etc), hiding half the footer text.
The 80s theme is my favourite, IMHO the easiest to read (and looks like my terminal)
It is the year 2031 and every website that didn’t adhere to modern design “sensibilities” has been hunted down and summarily executed…

…well, almost every. Exotic Silicon is still at large, last seen in the vicinity of the 46 block.

I like how the bird levitates towards banner in homepage