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. <media href="https://www.youtube.com/watch?v=WdBNYcWG0Yg" src="https://www.youtube.com/v/WdBNYcWG0Yg" source="YouTube" width="560px" author="Kevin Powell" caption="CSS Typography Crash Course"> To begin, Roel Nieskens takes a long look at variable fonts, which can be manipulated via both standard CSS properties, like <c>font-weight</c>, as well as using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings"><c>font-variation-settings</c></a>, all of which can be animated. Variable fonts support a much more granular range of values for <c>font-weight</c> than traditional fonts, all without downloading anything other than the initial font file. You can use the <a href="https://wakamaifondue.com/">Wakamaifondue</a> site to determine which features a specific font has, as well as to play with the values along these axes. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings#registered_and_custom_axes">standard axes</a> are mapped to CSS properties, like <c>font-stretch</c>, <c>font-style: oblique + angle</c>, <c>font-style: italic</c>, and <c>font-optical-sizing</c>. 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 <a href="https://caniuse.com/variable-fonts">widely available across major browsers</a>. <img attachment="css_is_magical.jpg" align="right" caption="CSS is magical">The 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 <c>color</c>. Instead, you define <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values">@font-palette-values</a> 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 <c>font-variant-numeric</c> to <c>tabular-nums</c> to make the font render numbers so that they line up vertically for <i>tabular</i> 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 <c>font-variant-caps</c> and <c>font-variant-numeric</c> to <c>diagonal-fractions</c>, as well as controlling an OpenType feature called "scientific inferiors", which will subscript numbers, as in chemical formulae, by setting <c>font-feature-settings</c> to <c>"sinf"</c>. Finally, he talks about standard units like <c>cap</c> (the <iq>the nominal height of capital letters</iq>, according to <a href="https://css-tricks.com/css-length-units/" source="CSS Tricks">CSS Length Units</a>). He shows how to do a "true" <c>vertical-align: middle</c> by setting <c>margin-top</c> to <c>calc(1ex - 1cap)</c>, which centers without lending so much weight to the descender or ascender. <bq>Typography is full of details that nobody notices until they're broken or they've gone away.</bq> 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.