hckrnws

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.

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.

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

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?

Yes.

A is a vowel

Right. You got my point though.

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.

CAFEBABE is famously the java class file magic number

ofc i know this because im writing a jvm for my thesis :/

> DEADBEEF and B00B

0xDEADBEEF is even more evocative. OxB00B is, well, problematic.

And the ever popular A55FACE.

but then is JHWH ok?

According to the Jews, yes.

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.

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.

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!)

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.

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.

I'd venture to guess it's to avoid confounding it with a Ø used in Scandinavian languages.

Yes, that is the exact reason. One of the designers mentions it here:

https://youtu.be/wjE5eHLICzc?si=no+tracking&t=330

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”.

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.

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.

> […] 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...

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.

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

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.

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

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

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

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

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

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

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.

> And given that ẞ 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 „ẞ“ 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.

(gutshäuser-ostpreußen.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 „ß“ for e-mail. Evergreen browser are now updated for the IDNA2008 algorithm, which supports the „ß“, but for a long time first IDNA2003 didn’t support „ß“ 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.

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

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.

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.

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.

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 prob­lem 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 counter­parts, 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.

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.

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.

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

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

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_...

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.

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

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.

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?

Would that make this the Japanese Sword Fallacy Fallacy?

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

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

> 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?

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

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

> [...] 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.)

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.

I like the advice given in the Refactoring UI book

> You see, there is a prob­lem 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 counter­parts, 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.

It’s a metaphor. Keep your pants on

[flagged]