Reading Time: 4 minutes

The W3C recently tweeted the first working draft of the new CSS Fonts module. And I read it. And I’m excited, and I think you should be, too. There’s a lot of cool things that are going to help us solve some a lot of problems, and do a few cool new tricks.

font-min-size and font-max-size

The first really cool thing that sticks out are that we can now set ranges to our font sizes.

As we move further from pixel-perfect designs and gravitate towards fluid typography, these two properties will become hugely beneficial. We’re already seeing CSS Tricks posts on fluid typography, where the font-size is set with some calc() formulas relying on vw or vmax properties.

Having a font-min-size simplifies those formulas greatly.

So imagine writing something like this in the near future:

body {
  font-min-size: 16px;
  font-max-size: 22px;
  font-size: calc(1em + (100vw - 300px) / (1600 - 300) );
}

I can also see how this might be a useful way to balance out relative fonts (like em ):

 h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.75rem;
}
h3 {
  font-size: 2.6rem;
}
p {
  font-max-size: 2.5rem ; // never let your paragraph get bigger than the headings
}

This might be a useful way to write CSS that could be “safeguarded” against the damage a content author in a CMS might cause with a rich text editor.

Especially if you’ve got a CMS whose text-editor allows content authors to increase font size, this is a very useful property for making sure they can’t break design:

.rtf > p {
  font-max-size: 2.5rem !important;
}

A small nitpick

My only bone to pick with this is the actual names of the properties — they’re inconsistent!

If we have width and min-width , then the proper pattern to follow is that these properties should be named min-font-size and max-font-size.

font-size-adjust

Have you ever used a super nice, fancy font hosted by Typekit, Google, or Font Squirrel? Ever noticed how the spacing of your content is messed up until the proper font finally loads?

This due to the fact that not all fonts’ glyphs take up the same “aspect value”. “Aspect Value” is x-height / font-size . X-height is the height of a lowercase “x” in the computed font.

For further reading on computed font sizes, see: An em isn’t an em, but an ex is an ex

font-size-adjust aims to solve the problem caused by a fallback font that has a different “aspect value” . It does this by changing the computed font-size so that the x-height is the same, regardless of what kind of font you’re using.

So this is a great way to mitigate FOUC (Flash of Unstyled Content).

font-display

This is another great tool for mitigating FOUC that I’m happy to see. One of the more interesting things I learned from the spec is how browsers deal with that awkward time between when you see content and when you see correctly styled content.

Put another way:

Let’s not show the content until the font gets here. If it’s not here in three seconds, we’ll use your fallback font until we get the right one.
Chrome and Firefox

Here’s your content. I’ll just use your fallback font until the right one shows up.
Internet Explorer

I like IE’s moxy here; it’s prioritizing content over design. The problem, though, is that not every browser (or developer), might agree. This is why we have font-display.

We can designate, in the @font-face declaration, whether the browser should

• block (draw invisible text, and then swap font face when it’s loaded),
• swap ( draw visible text with a fallback, then swap when it loads),
• or fallback (use a fallback first, then just wait for that font to get here).

So imagine writing something like this in the near future:

@font-face {
  font-family: "Über Helvetica Neue";
  font-display: fallback; // because we liked IE's moxy just this one time
  src: url(http://uberpretentiousfonts.com/UberHelveticaNew.otf)
}

h1 {
  font-family: "Über Helvetica Neue", Helvetica, sans-serif;
}

font-synthesis

By default, the web browser only wants us to have two font-weights : Normal and Bold ¹.

If you want more than a normal and a bold font-weight, you’ll need to provide fonts for each weight. If you don’t provide individual font files for those weights, it uses an algorithm to figure out which one². And if you’ve only provide one font file, it will synthesize the boldness.

The browser does something similar with the font-style properties, too. If you don’t have an italic or oblique font file, the browser takes it upon itself to go ahead and just wing it³.

Problem with this “wing it” situation is that it makes designers and typographers all sorts of sad. They whine about the “purity of design” or some such nonsense. That’s where font-synthesis: none comes in. We can either turn off “wing it” mode, or designate which things we’re ok with the browser doing to our beautiful “Über Helvetica Neue” font.

I never realized that font-synthesis was around in module 3. So if this property isn’t news to you, then…fine! Did you know that font-synthesis will now allow the value small-caps?

Font Color Support

This was probably my biggest, “uhh, wat?” moment in reading through the spec. I usually don’t care about the visual aides in these specs, but oh man would it be nice here.

Color fonts are A Thing ™⁴. They’re regular font files, but with the added bonus of having parameters on shapes that control color. Typekit has a decent collection of color fonts, if you wanted examples.

Imagine you want to control the color of the dots over a lowercase “i” or “j”. If this is a color font, and there is an appropriate parameter for the diacritics, we can now control what color is used.

Pretend that the index of the “dot” parameter is 5. You might find yourself writing something like this:

@font-palette-values Diacritical {
  font-family: "Über Helvetica Neue";
  5: rgb(192, 255, 238)
}

h1, h2, h3 {
 font-palette: Diacritical;
}

Add it all up

There was other stuff in the spec, too. But these are the things that really stood out to me that I think we ought to get ready for:

• font-min-size and font-max-size
• font-size-adjust
• font-synthesis
• color fonts!

In the next few months we should expect that browsers are going to start supporting these features, and we should be ready to start using them.