Little-Known CSS3 Typographic Features

The CSS3 fonts module has a number of interesting CSS3 properties and features. Browser support for many of these is pretty limited right now, but I thought I’d summarize some of these features here.

The first three properties discussed here are CSS3 properties, while the last section will discuss features that have existed for a while but that you may not know about because of their limited potential for use.

The font-stretch Property

The spec says this property “selects a normal, condensed, or expanded face from a font family.” So in other words, if you’re embedding a custom font on a web page that includes various built-in styles, you can avoid having to declare a new value for the font-family property and specify the style with this property.

The values it accepts are:

• normal
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

If you specify a style with one of these values, and that style is not supported, then the browser will display the closest style that’s narrower than the one specified.

Browser support? Amazingly, only IE9+ supports this property.

The font-size-adjust Property

This one specifies something called the aspect value of a font. This means that the font’s size is chosen based on the size of lower case letters, rather than based on the size of uppercase letters. Thus, the value works relative to the explicit font-size value. The value can be either a number or “none”.

Here’s an example:

.element {
  font-size: 20px;
  font-size-adjust: .4;
}

So in that example, the font’s lowercase letters will be 20px multiplied by .4, while the uppercase letters will be 20px.

This is especially effective for preserving the readability of text when the primary font in your font stack is not available and the browser resorts to one of the fallbacks.

Browser support? Only Firefox (since version 3) supports this one.

The font-kerning Property

It’s tough to find anything on this property outside of the spec. CSS already has a letter-spacing property, which allows you to adjust the spacing between letters.

With this property, you can take advantage of “adjustment data contained in the font”. So if a font you’re using has built in data for adjusting the space between letters, then you can set this property to have a value of “auto” or “normal” to utilize that data.

This property will have no effect if the font you’re using does not have any built-in adjustment data.

I have no idea what browser support is for this property. My guess is that no browser supports it, since it’s not listed in any CSS property reference that I know of.

Alternate Values for the font-weight Property

Finally, although these values for the font-weight property have existed in CSS long before CSS3, I thought it was worth mentioning them here.

In addition to the well-known “normal” and “bold” (which we’ve probably all used), this property let’s you use a number of other lesser-known values.

The values are shown below:

• bolder
• lighter
• 100 (Thin)
• 200 (Extra Light / Ultra Light)
• 300 (Light)
• 400 (Normal)
• 500 (Medium)
• 600 (Semi Bold / Demi Bold)
• 700 (Bold)
• 800 (Extra Bold / Ultra Bold)
• 900 (Black / Heavy)

The numeric values listed have their style equivalents listed in parentheses. The value would only be written numerically. So you might do something like this:

.element {
  font-weight: 500;
}

So what do these seldom-seen values do? Well, in almost all cases, they won’t have any effect at all. Most fonts have either a “bold” or “semi bold” style built in, so the values 600 and 700 will often work. But those would be fairly similar to just using a value of bold, which works for all fonts.

The other values need to correspond to styles that are built in to the font you’re using, then you’ll see a difference when using them.

The value “bolder” will increment the weight up to one weight bolder (from the font’s available built-in weights) than the current style. A value of “lighter” chooses a weight that’s one weight lighter, again from the font’s available weights.

These values are supported by every browser and version currently in use. The problem with using these values is that they are strictly dependent on the available styles built into the font you’re using.

Conclusion

It’s true that many of these features will be rarely used, but they do give us a small preview of the fine-grained approach to web typography that could exist in the years to come, and that has existed in print design for as long as many of us can remember.