logoalt Hacker News

chrismorgantoday at 6:17 AM2 repliesview on HN

letter-spacing is massively overused. I have Firefox set to only use my chosen fonts (and highly recommend it: it makes the web much better), and this reduction in variation makes non-zero letter-spacing much more obvious to me. At typical body sizes, I will tend to notice (and be displeased by) letter-spacing changes of less than 1% (I notice even 0.1px often).

There are only three places where I hold letter-spacing of any kind to be acceptable:

1. Art. (This is pretty much the intended context of the article, but I just know it’s going to be taken out of that context.)

2. In large headings, slightly reducing letter-spacing may be reasonable, as fonts are often spaced for smaller size usage. But whereas reducing line-height is all but essential, reducing letter-spacing is of marginal value at best. Ideally you have a variable font with optical sizing (the opsz axis), so this is handled automatically.

3. In all-caps, small-caps or all-small-caps text, as fonts are generally spaced for runs of lowercase letters. https://practicaltypography.com/letterspacing.html suggests 5–12% (which you can spell in CSS as 5% or 0.05em). Ideally you have a font that optimises this itself within the caps, smcp and/or c2sc features.

Do not, under any circumstances, set non-zero letter-spacing for body text. It’s just wrong. If you feel your preferred font is too spacious or too tight, fix or replace the font.

(If you want another reason: letter-spacing is incompatible with ligatures, not so often used in sans-serif faces, but in serifs things like fi not having the ascender and dot collide messily is often valuable.)


Replies

gucci-on-fleektoday at 6:55 AM

> There are only three places where I hold letter-spacing of any kind to be acceptable:

Three more that I'm aware of:

4. For emphasis in Fraktur text [0].

5. In very small amounts (< 2%) to improve paragraph breaking [1 §7.2].

6. For very large signs where readability is more important than aesthetics [2, 3].

These are all rather special cases though, so I still agree with your general point.

[0]: https://unifraktur.sourceforge.net/en/letterspacing.html

[1]: https://tug.org/TUGboat/tb21-4/tb69thanh.pdf#page=95

[2]: https://mutcd.fhwa.dot.gov/SHSe/Alphabets.pdf#%5B%7B%22num%2...

[3]: https://mutcd.fhwa.dot.gov/SHSe/shs_2004_2012_sup.pdf#SHS%20...

show 1 reply
robin_realatoday at 6:46 AM

*:not(h1,h2,h3,h4,h5,h6) { letter-spacing: initial !important } in your user styles should fix point 2. Point 3 slightly harder to fix yourself.

show 1 reply