CSS Typography is really good now!

I not unexpectedly very much enjoyed this somewhat-rambling 59-minute course on controlling font features from CSS. It’s really quite amazing and wonderful what you can do declaratively these days.

CSS Typography Crash Course by Kevin Powell (YouTube)

To begin, Roel Nieskens takes a long look at variable fonts, which can be manipulated via both standard CSS properties, like font-weight, as well as using font-variation-settings, all of which can be animated. Variable fonts support a much more granular range of values for font-weight than traditional fonts, all without downloading anything other than the initial font file.

You can use the Wakamaifondue site to determine which features a specific font has, as well as to play with the values along these axes. The standard axes are mapped to CSS properties, like font-stretch, font-style: oblique + angle, font-style: italic, and font-optical-sizing. All of this can also be animated, with the font being able to influence the animation as well.

The demonstrations are quite impressive, especially since it’s all manipulated using a CSS feature that is widely available across major browsers.

CSS is magicalThe next section covers colored fonts, which can contain multiple palettes, each with multiple colors. You can use CSS to override the colors but not directly with color. Instead, you define @font-palette-values to choose a different palette or to override individual colors in a palette. All of this can rely on variables, be animated, and so on, with optimized updates as provided for everything else in a modern web browser.

Next up, he showed how to set font-variant-numeric to tabular-nums to make the font render numbers so that they line up vertically for tabular display. The font has to support this feature but nearly all of them do. This is a good default for table cells. He also shows font-variant-caps and font-variant-numeric to diagonal-fractions, as well as controlling an OpenType feature called “scientific inferiors”, which will subscript numbers, as in chemical formulae, by setting font-feature-settings to “sinf”.

Finally, he talks about standard units like cap (the “the nominal height of capital letters”, according to CSS Length Units (CSS Tricks)). He shows how to do a “true” vertical-align: middle by setting margin-top to calc(1ex − 1cap), which centers without lending so much weight to the descender or ascender.

“Typography is full of details that nobody notices until they’re broken or they’ve gone away.”

I, for one, welcome the high-powered typography features that will let web pages finally look as good as printed output, like magazines and newspapers, where many of these techniques have been used for decades, if not centuries.