Happy holiday folks! All the best from us at Digitpaint
💫

Day 15

Stylish web typography with font-variant

Truly beautiful web typography is now possible in your browser!* By leveraging font-variant (and it's subproperties) we get low-level control over OpenType font features.

Let's take a look at the demo. Left we have used a different font-variant styling for every line, on the right we've used the normal font. Note, this only works if you're using Firefox.

Styled

The weather outside is frightful But the fire is so delightful And since we've no place to go Let It Snow! Let It Snow! Let It Snow!

It doesn't show signs of stopping And I've bought some corn for popping The lights are turned way down low Let It Snow! Let It Snow! Let It Snow!

Normal

The weather outside is frightful But the fire is so delightful And since we've no place to go Let It Snow! Let It Snow! Let It Snow!

It doesn't show signs of stopping And I've bought some corn for popping The lights are turned way down low Let It Snow! Let It Snow! Let It Snow!

Controling the font

The subproperties for which font-variant is a shorthand, are font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures and font-variant-numeric. These subproperties enable you to control the glyphs of OpenType fonts. The property can also be used on ::first-letter and ::first-line selectors.

The properties explained

That's quite a bunch. Let's have a look at what each property does.

font-variant-alternates

The font-variant-alternates CSS property controls the usage of alternate glyphs. If the font has different "swash" alternatives, for instance, you can get the webpage to use these alternate swash glyphs, by giving font-variant a value like swash(<value-name>). Before you'll be able to do this, though, you will have to declare the value name in @font-feature-values. Check out the source code to see how we managed to do this.

font-variant-caps

The font-variant-caps property offers you the ability to change letters into capital letter glyphs of different sizes. You can either pick the text to display small uppercase glyphs, or petite capital glyphs. If petite capitals are not present in the font, the browser shows small-caps, which is a CSS 2.1 property and is therefore supported by virtually all browsers.

font-variant-numeric

This CSS property can control the alternate glyphs for numbers, fractions and ordinal markers. So if you set the ordinal value on the font-variant property, the layout will automatically look like 1st instead of 1st.

font-variant-ligatures

A ligature is a joining of two characters into one shape. And this property can control which ligatures and contextual forms are used in textual content of the elements it is applied to. You can see the effect of this on the first lines of the demo paragraphs.

font-variant-east-asian

Not commonly used in the English or Dutch language, but it controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.

The bad & ugly

While these properties are really promising it is a major headache to get everything working. Before we rant any further, we have to say, we are by no means font experts, but neither are we CSS-noobs. When using these properties we more or less got stuck on two problems: the availability of supported fonts and the workings of font-variant-*.

The process of finding (free) fonts that have different font features is tedious, also once you've found a font that has certain features you have to make sure they're actually in the webfont version. Some versions have them removed in the webfont to save bytes, which in itself is a good thing, but it's not always clearly stated. This also goes for commercial foundries, it's not always clear what variants a font supports.

The font-variant-* CSS properties and the @font-feature-values declarations are quite hit and miss, we've had situations where a property suddenly stopped working only to re-appear when we changed something else. Using the older font-feature-settings property got us more consistent results (of course for the sake of the demo we soldiered on with font-variant and friends).

So is this production ready? Most definitely not. It's a nice start but you might be better of using font-feature-settings for now. If you however use it as a progressive enhancement, by all means go ahead!

Browser compatibility

Most browsers deliver basic support for the shorthand property. Not all subproperties are supported on every browser. So even if the shorthand works, the subproperty doesn’t have to work. Of all browsers, it's FireFox that supports the most subproperties.

  • chrome
  • edge
  • ie
  • firefox
  • android chrome
  • safari
  • opera
  • ios safari

Find more information about the font-variant and it's subproperties on MDN webdocs

Learn more

There is much more to learn about the font-variant, take a look at:

Demo source code

Have a closer look to this demo, check out the source files:

Back to home