CodeinWP CodeinWP

Little-Known CSS3 Typographic Features

Little-Known CSS3 Typographic FeaturesThe 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.

10 Responses

  1. seb says:

    Oh, thank you for this article! Merci je ne connaissais pas ces propriétés.

  2. jbcarey says:

    example and visual vues would have improved this article…. I ‘still’ don’t know how these properties “LOOK” like.

    • Neither do I! :)

      The reason is that these will only work with embedded fonts that have built-in equivalents for these values. And most of them don’t work in many browsers. It’s a bit of a bummer that you can’t see them work. I tried to find fonts that actually display these different values correctly, but I couldn’t find any.

  3. alex says:

    It’s still funny how we are still so behind regarding font and text CSS. vertical text is still a burden to create x-browser even with CSS3 transforms, font rendering is still OS specific and causes issues with fixed layouts and there’s no CSS to justify text properly. I hope they will give text and form styling CSS a little more attention in the future.

  4. Antonin says:

    Funny thing is the “lighter” of font weights usually never works. It’s damn right impossible to get any of that to work.
    I’m excited; however, about the font-size adjust because that means we’ll be able to directly influence the proportions between font lowercase and uppercase creating some interesting effects

  5. Edwin Martin says:

    You forgot font-feature-settings, which is supported in Firefox since version 4.0 and allows for some very cool typographic features.

    For more information, see:

    http://www.boogdesign.com/b2evo/index.php/firefox-4-features-for-font-fanatics?blog=2
    http://hacks.mozilla.org/2009/10/font-control-for-designers/

    (In the second linked page, the old property -moz-font-feature-opentype is used instead of -moz-font-feature-settings).

  6. Deepak says:

    Funny thing is the “lighter” of font weights usually never works. It’s damn right impossible to get any of that to work.
    I’m excited; however, about the font-size adjust because that means we’ll be able to directly influence the proportions between font lowercase and uppercase creating some interesting effects

  7. Christian Z. says:

    Here’s a codepen that shows all the font-weights at work:

    http://cdpn.io/iGCxu

    I had to find a Google web font that included all 9 weights to use for this example. If you can put an ID on the H2 of “Alternate Values for the font-weight Property” then I can link directly to that section within my codepen.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).