The Basics of Legibility: A Short Guide for Non-Typographers

https://www.nubero.ch/blog/011/

by throw0101c • 2 years ago

178 70 2 years ago

jiehong• 2 years ago

Intend and purpose? I mean, it sounds so very subjective with no link to research that it matters that much assuming it’s good enough in the first place.

Sure, DIN or the typefaces used at the airport to guide pilots are extremely legible, and less ambiguous in their context. But the difference between Fraktur and SF Pro is much bigger than between SF Pro and DIN for example. Plus, being on hundreds of millions of devices made it common so people got used to it.

Reminds me of the difference between Kai and Song font types in Chinese.

Is there any research with a graph of legibility over fonts? Any idea where the point of diminishing return is for different activities?

I do like a good programming font, but if I’m honest with myself, as long as the foundation is right, most differences are to accommodate one’s taste. I’ve yet to found a case where there was a bug because my font threw me off, or something.

Side note: I recall the first time I read digits written in the English style, and got tripped because the 7 looks like a 1 in my culture, because we all add a little horizontal bar in the middle. You can used to it, but on hand written notes, nobody would write an English 7, yet virtually all computer fonts only offer one version of it (Berkeley Mono offers both, in a mono space font!)

detourdog• 2 years ago

I would come across the studies of typefaces under the topic of human factors. A whole human factors industry exists with publications. A sliver of these studies regard typefaces and the legibility provided.

There is plenty of data available on type face legibility.

crispyambulance• 2 years ago

Fonts are also aesthetic expressions. This is intrinsically subjective and there's nothing wrong with that, nor should the practice of typography be dismissed because it lacks "research" into the utilitarian differences of fonts.

It's not for everybody to fret about serif vs non-serif, and that's OK, you don't have to if you don't want to. But if you want to do mass communication that stuff starts to become important.

throw0101c• 2 years ago

[…] and got tripped because the 7 looks like a 1 in my culture, because we all add a little horizontal bar in the middle.

A "crossed seven" if anyone is curious:

* https://en.wikipedia.org/wiki/Arabic_numeral_variations#Othe...

* https://en.wikipedia.org/wiki/7#Evolution_of_the_Arabic_digi...

GarnetFloride2• 2 years ago

The Braille Institute has a a big interest in helping people with low vision and a few years ago commissioned a highly legible font Atkinson Hyperlegible https://brailleinstitute.org/freefont They did a lot of work making sure it was easy to read by working with actual people.

qhwudbebd• 2 years ago

The page itself is typeset in the font: a nice way to see it in action. The only really jarring idiosyncrasy for me is the backwards slash on the zero, instead of a forward slash. I wonder if there's a specific legibility argument for that, or whether one could just reflect the 0 to fix it without losing anything.

staticautomatic• 2 years ago

I’ve used it professionally on some occasions and tend to reach for it when a) its purported value outweighs its crude utilitarian aesthetic, or b) I want to loudly signal my awareness of “inclusive design”.

awelotta• 2 years ago

I found Sofie Beier's ATypi presentations to be in depth as well as humble about the lack of hard science in typography, but haven't looked too much into actual papers. https://www.youtube.com/watch?v=xAzFiyqNO4w

graemep2• 2 years ago

Interesting article and it fits in well with other things I have read about Apple prioritising aesthetics over usability such as articles by Don Norman and Bruce Tognazzini that have been discussed on HN before.

This annoyed me though:

there is a problem that I call the “Japanese Sword Fallacy”: The Japanese made the best swords in the world, far better ones than anyone else. They were lighter, yet sturdier than their western counterparts, sharp like a razor and so forth.

That is not actually true. They had more amazing sword marking techniques, but these were only needed at all to compensate for the lower quality of their steel. Everyone else (at least Europe, Middle East, South Asia - probably other places too) had at least equally good swords, but because their steel was better the swords were easier to make.

rendaw2• 2 years ago

Do you have more stuff I could read about the swords? I've heard stuff like "Japanese swords are the best" any number of times too and had a hard time believing it, and historically I'm not sure there'd be any markets where they were competing, but I couldn't find any real information when I searched.

graemep2• 2 years ago

I learned a lot from these Youtube videos. One is HEMA teacher and sword dealer and discusses pros and cons as a weapon:

https://www.youtube.com/watch?v=W8a7gpoSPbY

the other has details about how it was made and a link to a paper about the steel:

https://www.youtube.com/watch?v=r1z6-h7XACg

rrr_oh_man2• 2 years ago

Five links from the only good place on Reddit:

https://old.reddit.com/r/AskHistorians/comments/3btp60/why_d...

https://old.reddit.com/r/AskHistorians/comments/2ge3ew/why_a...

https://old.reddit.com/r/AskHistorians/comments/1qd1x2/where...

https://old.reddit.com/r/AskHistorians/comments/1vjzpa/was_t...

https://old.reddit.com/r/AskHistorians/comments/1rr0qj/were_...

00N8• 2 years ago

This YouTube channel has a lot of good info about different historical swords https://www.youtube.com/@scholagladiatoria - pretty sure he covers the difference in metallurgy between Japanese & European swords

The main thing I've heard is that in Europe all the best swords used spring steel, which is hard enough to cut really well while also being able to flex without getting chipped, broken or bent. Japanese smiths couldn't make spring steel for various reasons, so as a workaround they used differential hardening, etc. to make the cutting edge super hard, while the back & sides ended up more ductile. It works pretty well, but the cutting face is still a little bit brittle & the sword as a whole ends up heavier & vulnerable to getting bent b/c it doesn't snap back into shape like spring steel would

hammock• 2 years ago

How does that compare now to Japanese knives vs German knives?

karaterobot• 2 years ago

They were the best swords in the world for elegantly slicing bundles of straw, or cadavers. Hands down. Probably most types of fruit and vegetables, too. Also very beautiful, if that's a performance characteristic you care about.

loudgas• 2 years ago

Would that make this the Japanese Sword Fallacy Fallacy?

nubero9• 2 years ago

I actually know about the quality issues with the Japanese iron ore and impurities. It’s just a metaphor. Do you also approach people who say “killing two birds with one stone” and tell them how that is physically almost impossible?

bradley13• 2 years ago

I recently had to enter a promotional code from a company that obviously spent a lot of money on design. The code contained letters and numbers, and was quite long.

You've probably already guessed: the lovely font used for the code made O and 0 indistinguishable, as well as I, l, and 1.

UX designers forget that functionality is more important than beauty. If you can achieve both, that's great. But without functionality, a beautiful UI is useless.

gravescale• 2 years ago

It's not even hard to exclude possibly ambiguous characters from codes in the first place. Then the designers can use whatever they want.

It's the reason grid layout ICs don't have rows I, O, Q, S, X or Z.

gjm112• 2 years ago

It's not a bad idea to exclude all vowels -- which gets rid of the ambiguous I and O -- for a different reason: some people are going to be unhappy if something like SHIT appears in the middle of their randomly-generated promo code. (This isn't just about "taboo" words; some people might be upset at TRUMP or BIDEN or GOD or JEW, for instance.)

cqqxo4zV46cp• 2 years ago

I’m not sure what your point is here. Excluding visually ambiguous characters from randomised strings that are going to be manually entered is very common, very trivial, and does not compromise “beauty”.

It sounds like were you working on this project you would’ve unnecessarily compromised. And given that you’re seeking to make some generalised point about “UX designers”, it honestly sounds like you both undervalue UX design (since you’re looking for the first opportunity to dismiss design in an instance where the real issue is that ambiguous characters are being used in the first place), and don’t understand the bounds of UX design as a skill set (because any good, and note that I’m not saying “very good”, UX designer, will consider exactly what you said).

Sorry that you used a crappy website but I don’t think it’s justification to generalise a profession.

And, for the record, I’ve never been as much as a front end developer, let alone a designer. My speciality is certainly much more under the hood than that. I’m just…aware that those people do good, important work.

mionhe• 2 years ago

Typography is a bit of a thankless profession. If you do a good job, nobody notices because your job is to make type unnoticeable. It's only when someone messes up that you suddenly notice the type and start thinking about it. Unfortunately that means you're more likely to think that typographers don't know what they're doing (whatever the application); it's the only type you really looked at.

yawpitch• 2 years ago

Interesting and well-written article, and I appreciate the distinction between legibility in the context of _UI_ vs that of _text_.

That said, while the typographic pedant in me enjoyed this, the semantic pedant very much also in me very nearly screamed at not one, but two, uses of “extend” where “extent” should be.

nubero9• 2 years ago

Corrected that, thank you. Also nice to see, that you picked up on the single use vs. multiple use distinction (words vs. text).

the_other2• 2 years ago

My eyesight isn’t great, so legibility is very important to me. However, screen real-estate is also important (more-so because I zoom my screen most of the time). FF seemed to be much wider. In this case, I’ll take SF Pro over FF in order to save some space.

Another factor comes to mind: UIs are places you spend a fair amount of time, and repetitively. Whilst there are “new” UI elements in an OS from time to time, you in fact see the same ones over and over, much more often. Users of OSs also tend to have time on their side when interacting with the UI, when compared with drivers reading road signs. My take is that you don’t need to optimise for legibility as strongly when designing for an OS UI as you do when designing for road signs.

azherebtsov• 2 years ago

Your point is very valid. It made me wonder, maybe UI font should be made without personality and without elements that grab attention? The UI elements are less important than the content that is displayed. Therefore UI should not distract user and grab more attention comparing to the content. Even if that attention is unconscious.

nabla9• 2 years ago

Try `Atkinson Hyperlegible` https://brailleinstitute.org/freefont

It was developed by the Braille Institute of America in 2019 for visually impaired. I think it's good font overall.

For monospace you need something else. Aribus designed a great font called B612 mono except that O0 are too easy to mix.

kanbankaren• 2 years ago

I wish B612 mono fixed their (). Not sure what the reasoning was behind making them look like []

kmstout• 2 years ago

[...] screen real-estate is also important [...]

This is why I've been spending a lot of time (ab)using Emacs's browser, eww, in conjunction with follow mode: The two together allow me to view most things in an efficient columnar display, letting me take better advantage of the width of my screen. (It's hard to rotate a laptop's monitor.)

nubero9• 2 years ago

I really don’t understand in which context you want to save space. We are not talking about printed book pages after all but screens. You can always scroll. As for the tracking of FF Unit: That’s by design. The letters themselves are actually a bit compressed compared with similar typefaces but the tracking is a bit wider. That makes it more legible as the individual letters are in less danger to “fuse” together.

the_other2• 2 years ago

I really don’t understand in which context you want to save space. We are not talking about printed book pages after all but screens. You can always scroll.

When you zoom in, you lose context of the surrounding data and controls. So I want to save negative space, and hope to have controls or links closer to the content they operate on. You can't always scroll, especially with an OS where the elements are in fixed places (until you move the window, which you have to find by pan+scan).

I accept I'm an edge case.

rendaw2• 2 years ago

Apple’s typeface lacks two things that any typeface (to a different extend) needs: Personality and purpose.

The 1. in San Francisco seems to have plenty of personality to me, and while there's not a lot of examples on the page and I think I'd need to see more, it doesn't seem like FF has particularly more personality.

From the rest of the article it seems like purpose = legibility in the context of UI. I wouldn't disagree that it's hard to distinguish I and L, but using German location signboards as an example seems wrong - iOS is not dealing with German locations for the most part. Is SF particularly bad for German?

For an article that aims to lay down conclusive arguments for why one font face is better, with the authority of someone who has studied fonts in school for four years, I'm not quite convinced...

ndr42• 2 years ago

I use all kind of german localized apple operating systems for extended periods of time daily and never ever had any problem with legibility of the interface.

I would like to see a real example (not a constructed one like "Illiad" in the article) where the legibility is restricted.

nubero9• 2 years ago

When creating or testing typefaces, you always go with things like “1. Illiad” to compare one with another. If during this test, one is clearly the winner – like Unit (or something like Unit) is over SF Pro, then you don’t need real world tests. If your soup is way too salty in the kitchen, it will be the same in the dining hall. It’s really not rocket science.

Chymor• 2 years ago

The typeface is also used in Apple Maps, so it’s not such a bad example, even if that point wasn’t clearly made. iOS is also localized to a large number of languages, including German, so working well with other languages is also an important feature.

But I agree that it would be nice with an example from the UI where it’s actually a problem.

ttepasse2• 2 years ago

Is SF particularly bad for German?

Anecdote: For some time San Francisco had the wrong glyph for the German character Capital Sharp S - the „ẞ“.

SF rendered the glyph as a ligature of two combined S letters, you can see this in this screenshot of a Wikipedia page compared to SF in Safari’s UI:

https://imgur.com/6wxr4Rw

Pretty much every other font which included a Capital Sharp S uses a shape which is more similar to the lowercase ß – and there were over time a lot of variation proposed:

https://web.archive.org/web/20141024232352/http://www.signog...

For non German speakers: There exists an orthographic rule in German to render the lowercase ß as SS in uppercase in low fidelity environments and sometimes also for line breaks. For some reason English speakers sometimes interpret „ß“ and „ss“ as interchangeable, which is somewhat wrong. But I can see how an English speaking monolinguist tries to optimise things.

Most of the time that orthographic rule works. But it is after all a low fidelity variant, similar how the ü → ue pattern loses some information. To always use an SS ligature robs the reader of discrimination: Is „MASSE“ an uppercase variant of „Masse“ or of „Maße“? That’s particular significant for personal names which should be written exact, even in uppercase. There are reasons why typography introduced an „ẞ“, it then got encoded into Unicode - it fills a small need.

Apple had this wrong glyph in San Francisco from Mac OS El Capitan up until Mojave and elsewhere, including its web sites. It was rather absurd to report this bug to Apple: Radar/Feedback dialogue wasn’t really equipped to report a font bug and secondly both the Feedback reporter and Apple’s developer website used San Francisco at its font, making illustrating the report with glyphs rather annoying. And of course, as usual with bug reports to Apple: You’ll never get feedback.

leipert• 2 years ago

Oh! I might know a little bit about this because I stumbled over something similar.

So you can transform text with CSS to be upper case (text-transform: uppercase). It turns ß to a double-S glyph as well in all browsers! Firefox now has a feature flag for it (layout.css.text-transform.uppercase-eszett.enabled). Why: Because unicode still defines it though in casing guidelines:

# The German es-zed is special--the normal mapping is to SS.
# Note: the titlecase should never occur in practice. It is equal to > titlecase(uppercase(<es-zed>))
https://unicode.org/Public/UNIDATA/SpecialCasing.txt

And given that ẞ only made it into German orthography in 2017 and San Francisco is release in 2014 and Mojave only 2018, I don't think it is that big of a mess-up. That they only supported it after. I bet there are loads of fonts that still don't support the character and having double-S is better than nothing.

Edit: Kind of proud how I am using css-transforms and a few more CSS hacks to get it working on my mom's website in the title: https://gutshaeuser-ostpreussen.de/gutshaus/details/gross-bl...

Edit to the Edit: Even the DIN 1451 doesn't support uppercase ẞ and e.g. the popular FF DIN (which San Francisco seems to be based on) is turning ẞ into double-S.

nubero9• 2 years ago

The german signboard was a good real-world example that I happened to see for myself, that’s why I included it. It is a perfectly fine example of the sort of phenomenon I was talking about. The fact that this particular example was a signboard doesn’t alter the fact, that the same applies for buttons on user interfaces for example. On the Macintosh Prototype, there was apparently a “Do It” button that some test users read as “Dolt” (idiot), so it was changed to “OK”. I also didn’t “study fonts in school”, I’m a typographer. And if my arguments are not enough to convince you, you can look at what others said: https://x.com/espiekermann/status/1775993252736372738

frabbit• 2 years ago

Fraktur typefaces were phased out (starting with an edict by the Nazis, of all things)

The popular association between Fraktur (and similar blackletter scripts) and rightwing-associated bands is ironic given the NAZI attempt to outlaw them as of Jewish origin: https://blog.waldenfont.com/2019/06/26/the-history-of-the-ol...

keybored• 2 years ago

What I most often struggle with in general is distinguishing “rn” (r n) and “m” (just m). Not a lot but it happens.

rwoerz• 2 years ago

I once had a student who asked me after the lecture what that porn.xml in Apache Maven is for.

eyelidlessness• 2 years ago

https://en.m.wikipedia.org/wiki/Kerning

The term "keming" is sometimes used informally to refer to poor kerning (the letters r and n placed too close together being easily mistaken for the letter m).

dheera• 2 years ago

Your FF Unit font looks like it has some kerning issues. Something doesn't feel right about it. It also gives me terminal-font-but-not-really vibrations, which isn't good for a product intended to be sold to non-tech people.

SF Pro has usability issues, but FF Unit has aesthetic issues.

riwsky• 2 years ago

The difficulty I had figuring out what “spaghetti” image he was talking about—before realizing that I could tap on the images to show different images—seriously diminishes my trust in the author on matters of user interface design.

aster0id• 2 years ago

I like the advice given in the Refactoring UI book

albert_e2• 2 years ago

It’s not so easy to tell, however, with the word “Spaghetti” in the second picture.

Is the picture referenced here missing from the blog post?

Izkata• 2 years ago

Click the image to change it. There's a small hand icon in the lower right corner to indicate this.

nubero9• 2 years ago

And a footnote explaining it. Having open eyes and being able to read helps.

nubero9• 2 years ago

There’s a hand icon on mobile, and a mouse pointer on the desktop version actually…

baxuz• 2 years ago

You see, there is a problem that I call the “Japanese Sword Fallacy”: The Japanese made the best swords in the world, far better ones than anyone else. They were lighter, yet sturdier than their western counterparts, sharp like a razor and so forth.

Stopped reading at this point. As the hook of the article is based on a falsehood deeply entrenched in pop culture, I can safely assume the rest is written with the same amount of care.

nubero9• 2 years ago

It’s a metaphor. Keep your pants on

The Basics of Legibility: A Short Guide for Non-Typographers

Related Stories