4 ms·
This is something that I’d say should mostly be handled in the font, and nowhere else. Variable fonts have the optical size (opsz) axis, which you can use to tw
by chrismorgan 3y ago
This is something that I’d say should mostly be handled in the font, and nowhere else. Variable fonts have the optical size (opsz) axis, which you can use to tweak things like glyph thickness and tracking based on the font size. It’s like full hinting used to be, but even better. I’d like to see operating systems move to defaulting to fonts that work this way.
I find your example interesting, but I hate things overriding letter-spacing like that, because it generally looks bad, and definitely looks bad in my chosen fonts. Need to finish off my article railing against people changing letter-spacing on body text, which is ridiculously common and always a bad idea. Line-height you take a bit too far, but the general concept of “larger text means smaller line-height” is one I wish more people understood. I’ve become partial to `* { line-height: calc(1em + 0.5rem) }` in the last year, which I find to work quite nicely as a single definition. For colour, it’s an interesting thing to consider, but I think it’s mostly the wrong solution—optical size s the proper solution for most of it, and my experience is actually that larger text normally wants to have a stronger colour rather than a weaker, because it’s a heading. But the interactions between font sizes and contrast in various guises is absolutely relevant, and I’m glad that the successor to WCAG’s terrible colour contrast technique, APCA (Advanced Perceptual Contrast Algorithm), takes font size into account in considering what makes for acceptable contrast.
- Myndex 3y ago!! Thank you for mentioning... and to add, human perception of contrast is actually driven more by the spatial characteristics (size, weight, thickness) than by the distance between two colors. This is a key reason that contrast measures that consider only the distance between two colors fail at predicting contrast.