7 ms·

Looking at those typographic scales in context of modern computers always makes me wonder, why everyone adhere to original "letterpress" constraints? Nothing a

by myfonj 3y ago

Looking at those typographic scales in context of modern computers always makes me wonder, why everyone adhere to original "letterpress" constraints? Nothing against proven crafts when they serve well, yet all "typographic scales in CSS" I've seen so far always operated almost exclusively on font-size / line-height and seldom letter-spacing, almost never font-weight and never used other visual clues for expressing hierarchy and rhythm like decorative ornaments, different shades or even palette or some other creative tricks. Those are techniques that are sometimes used in the wild, built organically, but I have never seen them analysed in isolation, some colour theory telling that "you either bump-up font size by this factor or increase contrast between background and text to get such and such level of urgency". What I find most strange is that, seemingly, everyone is fine with conveying the same information using two and more ways in parallel: size, visual contrast and disruptions in vertical rhythm. Making part of text bigger makes it stand out on it's own, since it disrupts vertical rhythm around it and also shines with thicker strokes. Side-effect of this is more visual contrast, something I'd call "pressure". It is mostly the absence of content what constitutes the hierarchy -- the space around headings, indentation etc -- not the local "pressure" of the letters in headings. From my subjective perspective large contrasting text very often "screams" in my head. Some time ago I've tried if would be possible to normalize that optical pressure across sizes (without changing weight); this was the result: https://codepen.io/myf/pen/oNLKzNY https://codepen.io/myf/pen/oNLKzNY In short, I think we should try to "tone down" blocks with large text when we have the opportunity, like: (edit HN discards block element characters; think large square in "lighter" shade followed by two "heavier" lines of the same width below) rather than keeping it same, like: (think large square followed by two lines below, all of same shade, so the compact area of the square stands out even more.)

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.

by myfonj 3y ago

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.