6 ms·

Typography for User Interfaces

157 points by samsolomon 10y ago

kazinator 10y ago
I noticed this page's text is rendered with nice fi and ffi ligatures. Yet, they are individual characters. How do you coax that out of a browser? I see the CSS references a bunch of .woff files.
- acdanger 10y ago
  There are CSS rules that control a typeface‘s ligatures for OTF fonts. https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian...
  - samsolomon 10y ago
    Also note that these additional ligatures are not always included in web fonts.
- kalleboo 10y ago
  These are the CSS rules on his paragraph tags font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums; font-feature-settings: "liga", "clig", "onum"
oofabz 10y ago
It's funny how the article praises large x-height and low-contrast strokes, yet it is written in Garamond, a font with small x-height and high-contrast strokes. Personally I like small x-height and high-contrast strokes, so I find the article very readable. But I think fonts with these features require higher-DPI displays. Consider Computer Modern, which is beautiful on paper but unreadable at low resolution. I wonder if the studies mentioned in the article took this into account. Were they testing readability on low-res screens, paper, or what? Would you get different results if you changed the medium?
- jacobolus 10y ago
  The article is talking typefaces for UIs, not for body copy. A telephone book, a phone screen menu, a novel, and a traffic sign all have dramatically different constraints on legibility.
  - lbebber 10y ago
    The article even talks about the difference between isolated words and longer sentences: https://viljamis.com/2016/typography-for-user-interfaces/#how-we-read https://viljamis.com/2016/typography-for-user-interfaces/#ho...
  - rickycook 10y ago
    true, but the difference between a 1080p and retina displays are quite stark. as is the difference between LCD and eInk. that might change things?
    - valine 10y ago
      Just a technicality, but a 1080p display can be considered 'retina' if the display is small enough or typically viewed from a far distance. The display on the iPhone 6 Plus is 1080p. It qualifies as a 'Retina display' because of its high pixel density and the typical viewing distance of 1 foot.
    - erelde 10y ago
      Retina is, at best, a standard of pixel density, in general it's just marketing.
      - yoz-y 10y ago
        Standard on phones yes, but the PC market has not yet caught up. A 1920x1080px monitor is still the baseline.
        franciscop 10y ago
Animats 10y ago
From the article: "we’ve had graphical user interfaces for mere four centuries." What's the graphical user interface from around 1600? Or did he mean "four decades"? The oldest GUI of which I am aware is General Railway Signal's NX system, first installed in 1937.[1] These used engraved letters in white on black, with a sans-serif font with fixed line width. There were earlier control boards, but this was the first system which had active systems to assist the operator in routing trains. In previous systems, operators set signals and threw switches. With NX, operators selected a path for an entering train, and lights lit up at all the places it could exit. Pressing an exit light set all the necessary switches and signals. All this was interlocked against conflicts for safety. [1] http://www.rrsignalpix.com/grsnx.html http://www.rrsignalpix.com/grsnx.html
- cjcenizal 10y ago
  I'm honestly not sure what the author's referring to, but if you consider things like a table of contents, page numbers, indices, footnotes, and reference sections to be part of a book's GUI, then we've had GUIs almost as long as we've had books. Though I admit it's a bit of a stretch. :)
  - LoSboccacc 10y ago
    they had an helpdesk for that https://www.youtube.com/watch?v=pQHX-SjgQvQ https://www.youtube.com/watch?v=pQHX-SjgQvQ
- LoSboccacc 10y ago
  I think it's a little more blurrier than that, if you call user interface any interactive panel with some text on it, it goes waaaaaay back.
- franciscop 10y ago
  Following the next sentence, "One of the key turning points was in 1973, when Xerox introduced Alto, [...]" I think it's safe to assume the author meant decades, not centuries.
PostThisTooFast 10y ago
Also: Don't capitalize every word of control labels. That's amateur-hour. They're not titles or proper nouns, and capitalizing them leaves you no option when you DO refer to a title or proper noun.

157 points by samsolomon 10y ago

I noticed this page's text is rendered with nice fi and ffi ligatures. Yet, they are individual characters. How do you coax that out of a browser? I see the CSS references a bunch of .woff files.

acdanger 10y ago
There are CSS rules that control a typeface‘s ligatures for OTF fonts. https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian...
- samsolomon 10y ago
  Also note that these additional ligatures are not always included in web fonts.
kalleboo 10y ago
These are the CSS rules on his paragraph tags font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums; font-feature-settings: "liga", "clig", "onum"

oofabz 10y ago

It's funny how the article praises large x-height and low-contrast strokes, yet it is written in Garamond, a font with small x-height and high-contrast strokes. Personally I like small x-height and high-contrast strokes, so I find the article very readable. But I think fonts with these features require higher-DPI displays. Consider Computer Modern, which is beautiful on paper but unreadable at low resolution. I wonder if the studies mentioned in the article took this into account. Were they testing readability on low-res screens, paper, or what? Would you get different results if you changed the medium?

jacobolus 10y ago
The article is talking typefaces for UIs, not for body copy. A telephone book, a phone screen menu, a novel, and a traffic sign all have dramatically different constraints on legibility.
- lbebber 10y ago
  The article even talks about the difference between isolated words and longer sentences: https://viljamis.com/2016/typography-for-user-interfaces/#how-we-read https://viljamis.com/2016/typography-for-user-interfaces/#ho...
- rickycook 10y ago
  true, but the difference between a 1080p and retina displays are quite stark. as is the difference between LCD and eInk. that might change things?
  - valine 10y ago
    Just a technicality, but a 1080p display can be considered 'retina' if the display is small enough or typically viewed from a far distance. The display on the iPhone 6 Plus is 1080p. It qualifies as a 'Retina display' because of its high pixel density and the typical viewing distance of 1 foot.
  - erelde 10y ago
    Retina is, at best, a standard of pixel density, in general it's just marketing.
    - yoz-y 10y ago
      Standard on phones yes, but the PC market has not yet caught up. A 1920x1080px monitor is still the baseline.
      - franciscop 10y ago

Animats 10y ago

From the article: "we’ve had graphical user interfaces for mere four centuries." What's the graphical user interface from around 1600? Or did he mean "four decades"? The oldest GUI of which I am aware is General Railway Signal's NX system, first installed in 1937.[1] These used engraved letters in white on black, with a sans-serif font with fixed line width. There were earlier control boards, but this was the first system which had active systems to assist the operator in routing trains. In previous systems, operators set signals and threw switches. With NX, operators selected a path for an entering train, and lights lit up at all the places it could exit. Pressing an exit light set all the necessary switches and signals. All this was interlocked against conflicts for safety. [1] http://www.rrsignalpix.com/grsnx.html http://www.rrsignalpix.com/grsnx.html

cjcenizal 10y ago
I'm honestly not sure what the author's referring to, but if you consider things like a table of contents, page numbers, indices, footnotes, and reference sections to be part of a book's GUI, then we've had GUIs almost as long as we've had books. Though I admit it's a bit of a stretch. :)
- LoSboccacc 10y ago
  they had an helpdesk for that https://www.youtube.com/watch?v=pQHX-SjgQvQ https://www.youtube.com/watch?v=pQHX-SjgQvQ
LoSboccacc 10y ago
I think it's a little more blurrier than that, if you call user interface any interactive panel with some text on it, it goes waaaaaay back.
franciscop 10y ago
Following the next sentence, "One of the key turning points was in 1973, when Xerox introduced Alto, [...]" I think it's safe to assume the author meant decades, not centuries.

PostThisTooFast 10y ago

Also: Don't capitalize every word of control labels. That's amateur-hour. They're not titles or proper nouns, and capitalizing them leaves you no option when you DO refer to a title or proper noun.