8 ms·

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

178 points by throw0101c 3y ago

aster0id 3y ago
I like the advice given in the Refactoring UI book
jiehong 3y 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 3y 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 3y 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 3y 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#Other_variations https://en.wikipedia.org/wiki/Arabic_numeral_variations#Othe... * https://en.wikipedia.org/wiki/7#Evolution_of_the_Arabic_digit https://en.wikipedia.org/wiki/7#Evolution_of_the_Arabic_digi...
- GarnetFloride 3y 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 https://brailleinstitute.org/freefont They did a lot of work making sure it was easy to read by working with actual people.
  - qhwudbebd 3y 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.
    - teo_zero 3y ago
      I'd venture to guess it's to avoid confounding it with a Ø used in Scandinavian languages.
      - TRiG_Ireland 3y ago
        Yes, that is the exact reason. One of the designers mentions it here: https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330 https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330
  - staticautomatic 3y 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”.
    - GarnetFloride 3y ago
      There is no perfect typeface. Atkinson is a very effective body typeface, but does suffer as a headline. So use something else. It's just a variant of Helvetica, Arial, and a bunch of others. I do wish founderies would provide typeface variants with the principles of hyper legibility applied. A Times New Roman Hyperlegible could be really handy even though it was designed for the newspaper so it is good at being read at small sizes to pack more content in a column. Inclusive design shouldn't be an afterthought. The principles of hyper legibility came from hard won lessons from interstate signage, transit signage, and flight deck control design. If you design it in from the beginning inclusivity is free.
- awelotta 3y 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 https://www.youtube.com/watch?v=xAzFiyqNO4w
graemep 3y 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.
- rendaw 3y 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.
  - graemep 3y 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 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 https://www.youtube.com/watch?v=r1z6-h7XACg
  - rrr_oh_man 3y ago
    Five links from the only good place on Reddit: https://old.reddit.com/r/AskHistorians/comments/3btp60/why_does_everyone_believe_katanas_are_superior_to/ https://old.reddit.com/r/AskHistorians/comments/3btp60/why_d... https://old.reddit.com/r/AskHistorians/comments/2ge3ew/why_are_people_generally_interested_in_the_katana/ https://old.reddit.com/r/AskHistorians/comments/2ge3ew/why_a... https://old.reddit.com/r/AskHistorians/comments/1qd1x2/where_does_katanas_are_better_view_comes_from/ https://old.reddit.com/r/AskHistorians/comments/1qd1x2/where... https://old.reddit.com/r/AskHistorians/comments/1vjzpa/was_the_katana_as_high_quality_as_people_say_it_is/ https://old.reddit.com/r/AskHistorians/comments/1vjzpa/was_t... https://old.reddit.com/r/AskHistorians/comments/1rr0qj/were_katanas_really_that_great/ https://old.reddit.com/r/AskHistorians/comments/1rr0qj/were_...
ysuddh9wgeen 3y ago
[flagged]
bradley13 3y 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 3y 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.
  - gjm11 3y 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.)
    - croisillon 3y ago
      but then is JHWH ok?
      - hobs 3y ago
        According to the Jews, yes.
    - yau8edq12i 3y ago
      If "FCK" or "XXXCNTSLT" appear in the middle of the code, do you think the people who would have been offended by "SHIT" will be happier?
yawpitch 3y 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.
- nubero 3y 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_other 3y 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 3y 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 3y ago
  Try `Atkinson Hyperlegible` https://brailleinstitute.org/freefont 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 3y ago
    I wish B612 mono fixed their (). Not sure what the reasoning was behind making them look like []
- kmstout 3y 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.)
rendaw 3y 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 3y 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.
  - nubero 3y 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 3y 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.
- ttepasse 3y 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 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.signographie.de/cms/upload/pdf/SIGNA9_SHARP_S_variants.pdf 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.
frabbit 3y 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-old-german-script/ https://blog.waldenfont.com/2019/06/26/the-history-of-the-ol...
keybored 3y 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 3y ago
  I once had a student who asked me after the lecture what that porn.xml in Apache Maven is for.
- eyelidlessness 3y ago
  https://en.m.wikipedia.org/wiki/Kerning 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 3y 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 3y 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.
albert_e 3y 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 3y ago
  Click the image to change it. There's a small hand icon in the lower right corner to indicate this.
  - nubero 3y ago
    There’s a hand icon on mobile, and a mouse pointer on the desktop version actually…
  - nubero 3y ago
    And a footnote explaining it. Having open eyes and being able to read helps.
    - albert_e 3y ago
      Au contraire For a blog post that talks about improving legibility by making a wise choice of fonts, this choice of non standard display of images -- requiring clicking or reading of footnotes ro figureout -- takes away from the seriousness of the message. What was gained by hiding the second image under a click -- instead of simply placing images one after the other like any other blog post? By your logic even the core message of the blog post itself could be rejected saying ..it helps if the readers knew how to read various fonts of text and stopped complaining about a non existent problem. Or why not just add a footnote under every button that sports fancy illegible text.
      - nubero 3y ago
        I expect a minimum of interest and curiosity with my audience. Also the ability to read. “Take a look at the following pictures¹” it says at the first clickable example. The choice of plural (images) gives a good hint, together with the footnote and the icon that’s sticking out from the lower right corner of the image. “Take a look and click around” it says above the next clickable example. Another hint. As for what is gained: The example with white space inside letters works much better when clickable. In separate images, the effect is lost.
baxuz 3y 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.
- nubero 3y ago
  It’s a metaphor. Keep your pants on

178 points by throw0101c 3y ago

I like the advice given in the Refactoring UI book

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 3y 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 3y 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 3y 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#Other_variations https://en.wikipedia.org/wiki/Arabic_numeral_variations#Othe... * https://en.wikipedia.org/wiki/7#Evolution_of_the_Arabic_digit https://en.wikipedia.org/wiki/7#Evolution_of_the_Arabic_digi...
GarnetFloride 3y 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 https://brailleinstitute.org/freefont They did a lot of work making sure it was easy to read by working with actual people.
- qhwudbebd 3y 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.
  - teo_zero 3y ago
    I'd venture to guess it's to avoid confounding it with a Ø used in Scandinavian languages.
    - TRiG_Ireland 3y ago
      Yes, that is the exact reason. One of the designers mentions it here: https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330 https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330
- staticautomatic 3y 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”.
  - GarnetFloride 3y ago
    There is no perfect typeface. Atkinson is a very effective body typeface, but does suffer as a headline. So use something else. It's just a variant of Helvetica, Arial, and a bunch of others. I do wish founderies would provide typeface variants with the principles of hyper legibility applied. A Times New Roman Hyperlegible could be really handy even though it was designed for the newspaper so it is good at being read at small sizes to pack more content in a column. Inclusive design shouldn't be an afterthought. The principles of hyper legibility came from hard won lessons from interstate signage, transit signage, and flight deck control design. If you design it in from the beginning inclusivity is free.
awelotta 3y 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 https://www.youtube.com/watch?v=xAzFiyqNO4w

graemep 3y 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.

rendaw 3y 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.
- graemep 3y 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 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 https://www.youtube.com/watch?v=r1z6-h7XACg
- rrr_oh_man 3y ago
  Five links from the only good place on Reddit: https://old.reddit.com/r/AskHistorians/comments/3btp60/why_does_everyone_believe_katanas_are_superior_to/ https://old.reddit.com/r/AskHistorians/comments/3btp60/why_d... https://old.reddit.com/r/AskHistorians/comments/2ge3ew/why_are_people_generally_interested_in_the_katana/ https://old.reddit.com/r/AskHistorians/comments/2ge3ew/why_a... https://old.reddit.com/r/AskHistorians/comments/1qd1x2/where_does_katanas_are_better_view_comes_from/ https://old.reddit.com/r/AskHistorians/comments/1qd1x2/where... https://old.reddit.com/r/AskHistorians/comments/1vjzpa/was_the_katana_as_high_quality_as_people_say_it_is/ https://old.reddit.com/r/AskHistorians/comments/1vjzpa/was_t... https://old.reddit.com/r/AskHistorians/comments/1rr0qj/were_katanas_really_that_great/ https://old.reddit.com/r/AskHistorians/comments/1rr0qj/were_...

ysuddh9wgeen 3y ago

[flagged]

bradley13 3y 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 3y 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.
- gjm11 3y 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.)
  - croisillon 3y ago
    but then is JHWH ok?
    - hobs 3y ago
      According to the Jews, yes.
  - yau8edq12i 3y ago
    If "FCK" or "XXXCNTSLT" appear in the middle of the code, do you think the people who would have been offended by "SHIT" will be happier?

yawpitch 3y 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.

nubero 3y 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_other 3y 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 3y 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 3y ago
Try `Atkinson Hyperlegible` https://brailleinstitute.org/freefont 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 3y ago
  I wish B612 mono fixed their (). Not sure what the reasoning was behind making them look like []
kmstout 3y 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.)

rendaw 3y 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 3y 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.
- nubero 3y 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 3y 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.
ttepasse 3y 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 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.signographie.de/cms/upload/pdf/SIGNA9_SHARP_S_variants.pdf 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.

frabbit 3y 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-old-german-script/ https://blog.waldenfont.com/2019/06/26/the-history-of-the-ol...

keybored 3y 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 3y ago
I once had a student who asked me after the lecture what that porn.xml in Apache Maven is for.
eyelidlessness 3y ago
https://en.m.wikipedia.org/wiki/Kerning 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 3y 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 3y 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.

albert_e 3y 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 3y ago
Click the image to change it. There's a small hand icon in the lower right corner to indicate this.
- nubero 3y ago
  There’s a hand icon on mobile, and a mouse pointer on the desktop version actually…
- nubero 3y ago
  And a footnote explaining it. Having open eyes and being able to read helps.
  - albert_e 3y ago
    Au contraire For a blog post that talks about improving legibility by making a wise choice of fonts, this choice of non standard display of images -- requiring clicking or reading of footnotes ro figureout -- takes away from the seriousness of the message. What was gained by hiding the second image under a click -- instead of simply placing images one after the other like any other blog post? By your logic even the core message of the blog post itself could be rejected saying ..it helps if the readers knew how to read various fonts of text and stopped complaining about a non existent problem. Or why not just add a footnote under every button that sports fancy illegible text.
    - nubero 3y ago
      I expect a minimum of interest and curiosity with my audience. Also the ability to read. “Take a look at the following pictures¹” it says at the first clickable example. The choice of plural (images) gives a good hint, together with the footnote and the icon that’s sticking out from the lower right corner of the image. “Take a look and click around” it says above the next clickable example. Another hint. As for what is gained: The example with white space inside letters works much better when clickable. In separate images, the effect is lost.

baxuz 3y 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.

nubero 3y ago
It’s a metaphor. Keep your pants on