4 ms·
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
by chrismorgan 2mo ago
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 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.)
- robin_reala 2mo ago*: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.
- chrismorgan 2mo agoI have seriously considered blocking letter-spacing outright in user stylesheet a few types over the last four or five years, but decided to keep it to keep an eye on how badly people are doing things. And really, I’d prefer problematic properties to have prefs whereby you can disable them outright, rather than trying to add a style on top to nullify it. Newer stuff often does, but the old stuff doesn’t. user_pref("layout.css.letter-spacing.enabled", false) would make me happy.
- gucci-on-fleek 2mo ago> 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 https://unifraktur.sourceforge.net/en/letterspacing.html [1]: https://tug.org/TUGboat/tb21-4/tb69thanh.pdf#page=95 https://tug.org/TUGboat/tb21-4/tb69thanh.pdf#page=95 [2]: https://mutcd.fhwa.dot.gov/SHSe/Alphabets.pdf#%5B%7B%22num%22%3A207%2C%22gen%22%3A0%7D%2C%7B%22name%22%3A%22Fit%22%7D%5D 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%202004%20Supplement.indd%3ABookmark%20316 https://mutcd.fhwa.dot.gov/SHSe/shs_2004_2012_sup.pdf#SHS%20...
- chrismorgan 2mo agoI should clarify that I speak only of English and general web content CSS. I’m happy to disqualify 4 and 6 on those grounds (you decide which grounds I use for Fraktur!). As for 5, I’m not convinced letter-spacing is the right tool for it: at those scales I’ve tended to prefer condensing or expanding the text, glyphs and all, which you can do in SVG. But I will allow it as a place where very careful letter-spacing use with kerning and ligature control can be acceptable.