[HN Gopher] The Basics of Legibility: A Short Guide for Non-Typo...
___________________________________________________________________
The Basics of Legibility: A Short Guide for Non-Typographers
Author : throw0101c
Score : 140 points
Date : 2024-04-19 11:25 UTC (1 days ago)
(HTM) web link (www.nubero.ch)
(TXT) w3m dump (www.nubero.ch)
| jiehong wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| > [...] _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...
| GarnetFloride wrote:
| 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 wrote:
| 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 wrote:
| I'd venture to guess it's to avoid confounding it with a O
| used in Scandinavian languages.
| TRiG_Ireland wrote:
| Yes, that is the exact reason. One of the designers
| mentions it here:
|
| https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330
| staticautomatic wrote:
| 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".
| graemep wrote:
| 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 wrote:
| 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 wrote:
| 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_man wrote:
| 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_.
| ..
| adrian_b wrote:
| While most that is said there is correct, some comments
| exaggerate in the opposite sense, by downplaying the real
| higher quality of the Japanese swords in comparison with
| the contemporaneous swords of the 19th century (when most
| Westerners became aware of them).
|
| Unlike what some say there, the fascination of Westerners
| for Japanese swords has not started after WWII. Already
| during the 19th century, the first Europeans and Americans
| who could visit Japan were all extremely impressed with the
| Japanese swords, as demonstrated in test cuts but also by
| cutting parts of human bodies in some incidents.
|
| Even if in the more distant past there have been many
| places where swords of very high quality had been made,
| e.g. the Toledo swords or the Damascus swords, by the time
| of the 19th century such techniques had been forgotten for
| a long time and the remaining production of swords was
| oriented to the mass production of cheap but low quality
| swords. Such swords were more resistant to mishandling than
| the Japanese swords, but they could not compete in hardness
| and sharpness.
|
| The same travellers who were impressed in Japan by the
| Japanese swords were not impressed at all by the swords
| encountered in the other countries of the region, e.g. by
| the Chinese swords.
|
| At least by the time of the 19th century, in no other place
| were there smiths willing to spend so much time with the
| sharpening and polishing of extra hard steel.
|
| Even today, when everybody knows modern metallurgy, using
| Japanese kitchen knives is a very different experience from
| using European kitchen knives (at least for me, one much
| more pleasant), due to the Japanese preference for maximum
| hardness and sharpness, despite the fact that such blades
| require much more care during use and maintenance.
| rrr_oh_man wrote:
| _> At least by the time of the 19th century, in no other
| place were there smiths willing to spend so much time
| with the sharpening and polishing of extra hard steel._
|
| Because the rest of the world used rifles as a
| battlefield weapon, maybe.
| BalinKing wrote:
| Didn't firearms play a major role in the establishment of
| the Tokugawa shogunate, as early as the beginning of the
| 1600s? I'm pretty sure that Japanese battles being sword-
| only is just a pop culture trope.
| hammock wrote:
| How does that compare now to Japanese knives vs German knives?
| karaterobot wrote:
| 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 wrote:
| Would that make this the Japanese Sword Fallacy Fallacy?
| bradley13 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| but then is JHWH ok?
| hobs wrote:
| According to the Jews, yes.
| yau8edq12i wrote:
| 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?
| jppittma wrote:
| A is a vowel
| yau8edq12i wrote:
| Right. You got my point though.
| gjm11 wrote:
| Yes.
| bartvk wrote:
| Talking about taboo words, this makes me think about the
| words you can spell with hex numbers. When I did a bit of
| embedded programming and electronics control, we used these
| to visually mark up the raw data. I remember DEADBEEF and
| B00B, and there were others I forgot.
| lionkor wrote:
| CAFEBABE is famously the java class file magic number
|
| ofc i know this because im writing a jvm for my thesis :/
| cqqxo4zV46cp wrote:
| 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 wrote:
| 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 wrote:
| 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.
| the_other wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| I wish B612 mono fixed their (). Not sure what the reasoning
| was behind making them look like []
| kmstout wrote:
| > [...] 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 wrote:
| > 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 wrote:
| 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.
| Chymor wrote:
| 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 wrote:
| > Is SF particularly bad for German?
|
| Anecdote: For some time San Francisco had the wrong glyph for
| the German character Capital Sharp S - the ,,Ss".
|
| 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 ss - 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 ss as SS in uppercase in low
| fidelity environments and sometimes also for line breaks. For
| some reason English speakers sometimes interpret ,,ss" 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 u - 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 ,,Masse"? That's particular significant for
| personal names which should be written exact, even in
| uppercase. There are reasons why typography introduced an
| ,,Ss", 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 wrote:
| 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 ss 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 Ss 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
| Ss and e.g. the popular FF DIN (which San Francisco seems to
| be based on) is turning Ss into double-S.
| ttepasse wrote:
| > And given that Ss only made it into German orthography in
| 2017
|
| As a character it was proposed first in 2004 and encoded in
| 2007.
|
| > I bet there are loads of fonts that still don't support
| the character and having double-S is better than nothing.
|
| Oh yes, of course. But those then don't display ,,SS"
| instead of ,,Ss" but either a missing glyph or a glyph from
| a fallback font.
|
| > 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
|
| That's a nice hack! Congratulations.
|
| (gutshauser-ostpreussen.de or rather xn--gutshuser-
| ostpreuen-1tb6g.de is still free, if you'll want a new
| challenge. But I advise against using an IDNA domain with
| an ,,ss" for e-mail. Evergreen browser are now updated for
| the IDNA2008 algorithm, which supports the ,,ss", but for a
| long time first IDNA2003 didn't support ,,ss" in
| internationalised domains, then browser didn't update to
| IDNA2008 until late in 201x. And other internet software
| like mail clients are even more behind. Sadly.)
|
| There is an old proposal for the CSS WG floating around to
| enable custom alterations for text-transform or even custom
| transformations, since it is useful in other languages.
| That then would be a non-hacky way:
|
| https://wiki.csswg.org/ideas/at-text-
| transform?rev=145951992...
|
| https://specs.rivoal.net/css-custom-tt/
|
| I first asked the CSS WG back in 2011 and they already knew
| about the problem. That proposal sadly still doesn't seem
| to go anywhere.
| frabbit wrote:
| _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 wrote:
| What I most often struggle with in general is distinguishing "rn"
| (r n) and "m" (just m). Not a lot but it happens.
| rwoerz wrote:
| I once had a student who asked me after the lecture what that
| porn.xml in Apache Maven is for.
| eyelidlessness wrote:
| 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 wrote:
| 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.
___________________________________________________________________
(page generated 2024-04-20 23:01 UTC)