I think we all recognize that the web today has become overcomplicated. That said, a lot of Drew's advice here is dogmatic.
> Leave the page at its default font size and avoid using custom fonts, preferring to use vague selections like “sans-serif” and “monospace”.
Why? These are all easily customizable by the user.
> Try not to use a purely visual representation of information, such as an icon: these should always be paired with text.
There are plenty of near–universally recognizable icons. Do your OS's windows say "close" in the title bar, or do they simply have an X?
> Also avoid moving information around — animations and visually complex state transitions.
Animations can be overused, but they can also serve an important purpose: displaying the transition between states.
For example, when you scroll your mouse, does the window just snap to the next page? Or does it go bit by bit so you can see where the new information comes from, and where the old information goes? Which do you think is a better experience?
> Why? These are all easily customizable by the user.
...yes, exactly? Why is that an issue?
> For example, when you scroll your mouse, does the window just snap to the next page? Or does it go bit by bit so you can see where the new information comes from, and where the old information goes? Which do you think is a better experience?
Yes, it snaps to the next scroll spot, because I disabled the "Use smooth scrolling" option, because I find it annoying.
But overall, I feel like you're arguing that it's okay to do things because in very small doses they can be useful. And that's fair, but IMO it's quite rare to actually see it done at a tasteful/sane level. Scroll hijacking is basically a meme on HN, in practice animations are almost always a net negative, icons are confusing because nobody actually sticks themselves to common known icons. Given the choice between the extremes, I'd strongly prefer minimalism, and that's relevant because people suck at actually implementing a happy medium.
>> Leave the page at its default font size and avoid using custom fonts, preferring to use vague selections like “sans-serif” and “monospace”.
> Why? These are all easily customizable by the user.
monospace and sans-serif are customizable. Helvetica isn't. Regarding font size, not that long ago there was a post here from someone who set "font-size: 1.4em" in their CSS, because they couldn't be bothered to set up HiDPI scaling on their system. Mind you this CSS rule doesn't set the font size to anything specific. It tells the browser "whatever size you wanted to use for this text, make it 1.4 times bigger". So if user set say 14px as their preferred font size, it would be 19.6 px instead. That's just asshole design.
> So if user set say 14px as their preferred font size, it would be 19.6 px instead. That's just asshole design.
I don't see that as any different from saying "use 19.6px text unless the user specifically overrides it." Maybe the designer just likes big text! If a user doesn't, they can easily make it smaller.
> I don't see that as any different from saying "use 19.6px text unless the user specifically overrides it." Maybe the designer just likes big text!
If the designer wants to make text big, they should first set somewhere a specific value for its size, not go on to "you like your text this way? fuck you, i'll make it bigger than that!". There was no "px" or "pt" size setting anywhere higher in the DOM, so that's effectively what the author was saying to the readers.
> If a user doesn't, they can easily make it smaller.
The user already set their text preferences in browser settings. It's the designer that decided that they will make every user, who made that choice at some point, miserable.
You seem to be talking at cross-purposes with everyone else in this your comment and your grandparent comment.
The point that is being made in the article and by everyone here is that the keywords “monospace” and “sans-serif” allow the user to customise what they want it to mean, whereas specific font names like “Helvetica” don’t let the user choose to use their preferred sans-serif.
I see. The only way you can “change that” is by disabling all fonts, and it wasn’t clear that you were referring to that (which is a small part of the relevant config and help).
This approach is problematic when fonts are used significantly: as part of design direction, for example, where metrics matter; or on the large number of sites that use icon fonts—and so all your icon-only buttons are now meaningless gibberish.
Strictly through built–in settings, sure. There are plenty of extensions that will let you override fonts in a more granular way [0] or even override styles altogether [1].
> Try not to use a purely visual representation of information, such as an icon: these should always be paired with text.
Curious and purely technical question: are screen readers not using the alt text of an <img ... /> tag? Does something like this not cause the "foo bar baz" text to be read out twice in a row?
<div><img src=... alt="Foo bar baz" />Foo bar baz</div>
Icons are often included using different methods that don't support the alt attribute. Icon font systems like Font Awesome use CSS like this:
.fa-trash::before { content: "\f1f8"; }
Screen readers these days have good support of the ::before and ::after pseudo-elements and most can the values of content properties but if the icon font is using the Unicode private use area, a screen reader can't read it. There's a new standard for content properties that allow for inclusion a text alternative within the value but it's not broadly supported and in browsers that don't support it, the visual content is not rendered.
Icons are also sometimes included using a background-image (maybe one that's part of a sprite sheet) so a text alternative needs to be added somewhere.
aria-label and aria-labelledby attributes can provide text alternatives but generally including the text in an adjacent element that's visually hidden is more robust.
> Leave the page at its default font size and avoid using custom fonts, preferring to use vague selections like “sans-serif” and “monospace”.
Why? These are all easily customizable by the user.
> Try not to use a purely visual representation of information, such as an icon: these should always be paired with text.
There are plenty of near–universally recognizable icons. Do your OS's windows say "close" in the title bar, or do they simply have an X?
> Also avoid moving information around — animations and visually complex state transitions.
Animations can be overused, but they can also serve an important purpose: displaying the transition between states.
For example, when you scroll your mouse, does the window just snap to the next page? Or does it go bit by bit so you can see where the new information comes from, and where the old information goes? Which do you think is a better experience?