7 ms·

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 fon

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?

abjKT26nO8 6y ago
>> 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.
- jakelazaroff 6y ago
  > monospace and sans-serif are customizable. Helvetica isn't. Sure it is: https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use https://support.mozilla.org/en-US/kb/change-fonts-and-colors... > 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.
  - abjKT26nO8 6y ago
    > 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.
  - chrismorgan 6y ago
    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.
    - jakelazaroff 6y ago
      No, I'm directly rebutting the argument. Even if the page specifies the specific font "Helvetica", the user can change that.
      - chrismorgan 6y ago
        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.
        jakelazaroff 6y ago
phoe-krk 6y ago
> 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>
- ratww 6y ago
  They do! If you need to label an image for both screen-readers and screen you can use the aria-labelledby attribute. [1] [2] <img src="sunflowers.jpg" aria-labelledby="my_txt"> <span id="my_txt">Foo bar baz</span> However some UX copywriters prefer to have extra information in the alt attribute. [1] https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non-text_content https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_prov... [2] https://fae.disability.illinois.edu/rulesets/IMAGE_1/ https://fae.disability.illinois.edu/rulesets/IMAGE_1/
- extra88 6y ago
  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.
ChrisMarshallNY 6y ago
The deal with using icon-only approaches is to make sure that we use standardized icons, like ISO icons: https://www.iso.org/obp/ui/#iso:pub:PUB400001:en https://www.iso.org/obp/ui/#iso:pub:PUB400001:en I have made the mistake of "improving" standard icons (I was, at one time, an artist, and I believed that this gave me "creative license"). It did not end well. I write about using "clichés" here: https://medium.com/chrismarshallny/the-road-most-traveled-by-9a66249bbfd6 https://medium.com/chrismarshallny/the-road-most-traveled-by...
- bo1024 6y ago
  > make sure that we use standardized icons, like ISO icons: https://www.iso.org/obp/ui/#iso:pub:PUB400001:en https://www.iso.org/obp/ui/#iso:pub:PUB400001:en Ha, the page is completely inaccessible to me: > You have to enable javascript in your browser to use an application built with Vaadin.
  - ChrisMarshallNY 6y ago
    Figures. ISO isn't an accessibility advocacy organization, but they should be accessible.
yjftsjthsd-h 6y ago
> 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.

abjKT26nO8 6y ago

>> 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.

jakelazaroff 6y ago
> monospace and sans-serif are customizable. Helvetica isn't. Sure it is: https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use https://support.mozilla.org/en-US/kb/change-fonts-and-colors... > 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.
- abjKT26nO8 6y ago
  > 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.
- chrismorgan 6y ago
  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.
  - jakelazaroff 6y ago
    No, I'm directly rebutting the argument. Even if the page specifies the specific font "Helvetica", the user can change that.
    - chrismorgan 6y ago
      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.
      - jakelazaroff 6y ago

phoe-krk 6y ago

> 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>

ratww 6y ago
They do! If you need to label an image for both screen-readers and screen you can use the aria-labelledby attribute. [1] [2] <img src="sunflowers.jpg" aria-labelledby="my_txt"> <span id="my_txt">Foo bar baz</span> However some UX copywriters prefer to have extra information in the alt attribute. [1] https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non-text_content https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_prov... [2] https://fae.disability.illinois.edu/rulesets/IMAGE_1/ https://fae.disability.illinois.edu/rulesets/IMAGE_1/
extra88 6y ago
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.

ChrisMarshallNY 6y ago

The deal with using icon-only approaches is to make sure that we use standardized icons, like ISO icons: https://www.iso.org/obp/ui/#iso:pub:PUB400001:en https://www.iso.org/obp/ui/#iso:pub:PUB400001:en I have made the mistake of "improving" standard icons (I was, at one time, an artist, and I believed that this gave me "creative license"). It did not end well. I write about using "clichés" here: https://medium.com/chrismarshallny/the-road-most-traveled-by-9a66249bbfd6 https://medium.com/chrismarshallny/the-road-most-traveled-by...

bo1024 6y ago
> make sure that we use standardized icons, like ISO icons: https://www.iso.org/obp/ui/#iso:pub:PUB400001:en https://www.iso.org/obp/ui/#iso:pub:PUB400001:en Ha, the page is completely inaccessible to me: > You have to enable javascript in your browser to use an application built with Vaadin.
- ChrisMarshallNY 6y ago
  Figures. ISO isn't an accessibility advocacy organization, but they should be accessible.

yjftsjthsd-h 6y ago

> 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.