3 ms·
There are various other CSS properties that are linked to the font so that the result is bad if another font gets used. letter-spacing: this has been giving me
by chrismorgan 4y ago
There are various other CSS properties that are linked to the font so that the result is bad if another font gets used.
letter-spacing: this has been giving me grief recently. It’s mostly a tool for people second-guessing the font designer because they chose a font that they liked but didn’t actually like because it was too wide, and now they’re tightening the letter-spacing, but poor people like me who have told their browser not to let pages override their font choices¹, or those for whom the web font just fails to load for whatever reason, now have to suffer for it, surprisingly often to the point where letters collide (not often in the scheme of things, but surprisingly often to me). My opinion is that you should absolutely never adjust letter-spacing at body text sizes, with the sole exception of all-caps text where it is generally desirable to add up to about 0.05em. If you feel the need to set letter-spacing on body text in any other situation, you’re using the wrong font.
font-feature-settings: some OpenType features are generic, like tnum for tabular numbers, but others like stylistic sets are explicitly linked to a particular font, so that if you set this globally in this way, you might actually trigger something in another font that ruins things. For example, my monospace is Triplicate, and ss01 makes it not monospaced (called the Poly variant), so if you activate ss01 and were doing box drawing or similar, it just got ruined. Or if you’re using a version of panr’s Terminal theme² for Hugo from more than a few months ago (when it got fixed for the wrong reasons, but it got fixed), it has the case feature set improperly, which is supposed to just adjust vertical positioning of some punctuation to fit all-caps text, but in practice a number of font foundries (including at least one of the biggest) have decided to work around inferior desktop publishing software (leastways, that’s why Matthew Butterick decided to do it) by making that feature also substitute uppercase glyphs—so now the entire page is all caps.
The particularly galling part to me is that there actually is a defined way of doing this properly for font-feature-settings, scoping by font, but Firefox implemented it in 2014 and no one else has touched it. Sigh.
/* The current and inferior way: */
code {
font-family: triplicate, monospace;
font-feature-settings: "ss01";
}
/* The new and improved way that Google and Apple haven’t implemented: */
@font-feature-values triplicate {
@styleset {
poly: 1;
}
}
code {
font-face: triplicate, monospace;
font-variant-alternates: styleset(poly);
}
I’d really like something better for letter-spacing, too. Maybe a letter-spacing-adjust @font-face property or something. I dunno.
—⁂—
¹ I started doing this a few months back in Firefox as an experiment, and I’ve never gone back—it significantly improves the web, with Google’s Material Icons web font with its stupid ligation technique being practically the only meaningful casualty.
² Which I hate, by the way—monospaced fonts are generally quite bad for long-form reading, and are still more so when presented light-on-dark and with excessively wide columns. Do you know just how much more readable those sorts of pages become when you swap in a serif or sans-serif font? Try reading half an article, then swap it and go away for a few minutes so that it doesn’t feel weird, then come back and read the rest. The effect is quite remarkable.
- deleted 4y ago[deleted]
- clairity 4y agoit's frustrating to see the most relevant and informative comment at the bottom while tangential blathering sits at the top. thanks for pointing out that css font settings can be scoped to fonts, even if it's firefox only for now.
- wildrhythms 4y agoI am usually forced to apply some 0.2px or 0.3px letter spacing because the designers I work with don't realize that their design software renders fonts completely differently than the browser, and that added letter spacing in the browser makes it 'look right' to them.
- madeofpalk 4y agoI have never encountered this. What OS/design software does this?