Typography for User Interfaces | Hacker News Reader

Typography for User Interfaces

viljamis.com

157 pointssamsolomon25 comments

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

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

they had an helpdesk for that https://www.youtube.com/watch?v=pQHX-SjgQvQ

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.

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.

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?

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.

The article even talks about the difference between isolated words and longer sentences: https://viljamis.com/2016/typography-for-user-interfaces/#ho...

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?

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.

Retina is, at best, a standard of pixel density, in general it's just marketing.

Standard on phones yes, but the PC market has not yet caught up. A 1920x1080px monitor is still the baseline.

Because of battery life

GP was referring to Desktop screens, not laptops, I believe. Those are AC powered.

Indeed. The thing I find surprising about laptops that one has basically choice between a HiDPI screen, or a 1366x768 "Everything is blurry" screens.

> Computer Modern, is [...] unreadable at low resolution

I agree it's much worse at low resolution, but it is readable. How low do you have in mind?

Here it is at 10pt and you know it actually looks decent. Maybe bad font hinting in PDF viewers has biased me against Computer Modern.

https://frammish.org/cmu_serif-10pt.png

Well it's talking about UI text not content copy.

Computer Modern on modern displays looks very good (even plain ones, not just retina and such). It's totally possible to use these fonts for websites, for example.

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.

There are CSS rules that control a typeface‘s ligatures for OTF fonts. https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian...

Also note that these additional ligatures are not always included in web fonts.

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"

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.

Reply on news.ycombinator.com