Back to Overview

CSS Typography cheat sheet


Small roundup on CSS features that will enhance your web typography.

Today I want to write about a few small typography enhancing features in CSS. Most of them don't seem to be inside the mainstream CSS wisdom floating around (perhaps I am just missing them constantly :(...). So I decided to give them a quick shout out so more of you guys can make use of them.

Font-face irritation


First I wanted to highlight a small font-face irritation I often see these days. Most people add custom fonts via font-face using unique names for every font weight. That's not necessary & will save a lot of small headaches if you do it right from the beginning. You can add multiple weights & styles for every font & use the same font name. Let me give you code example:

@font-face {
     font-family: 'Liberation Sans';
     src: url('fonts/LiberationSans-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'Liberation Sans';
     src: url('fonts/LiberationSans-Italic.ttf') format('truetype');
     font-weight: normal;
     font-style: italic;
}
@font-face {
     font-family: 'Liberation Sans';
     src: url('fonts/LiberationSans-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
}
@font-face {
     font-family: 'Liberation Sans';
     src: url('fonts/LiberationSans-BoldItalic.ttf') format('truetype');
     font-weight: bold;
     font-style: italic;
}

Notice that every font-face addition got the same name, but has different attributes for font-weight & font-style. This way you can go ahead & use your font the same as you would with any native font.

Bold, strong or italic are now already defined & should just work out of the box, without extra CSS code. I used to declare every font-weight with its own name (like Droid-Bold) & had to add it via CSS to every possible tag that could cause my font to display the bold variant. With this new way to write font-face, this isn't necessary anymore.

Hyphenation


Hyphenation is the better word-break. It’s locale aware, and inserts the hyphen character at the correct place, when breaking the words. This is especially important in responsive designs. It will save you from a lot of ragged lines. And, no need anymore for clunky & slow Javascript hyphenation fallbacks. Jackpot!

Sadly we still need to prefix them:

 -webkit-hyphens: auto;
    -moz-hyphens: auto;
         hyphens: auto;

For definite cross browser support you need to inject this weird code snippet:

             -ms-word-break: break-all;
                 word-break: break-all;

                 // Non standard for webkit
                 word-break: break-word;

            -webkit-hyphens: auto;
               -moz-hyphens: auto;
                    hyphens: auto;
                    
   -webkit-hyphenate-before: 2;
    -webkit-hyphenate-after: 3;
            hyphenate-lines: 3;

The Hyphenate-Before or -after sets a minimum number of characters before or after the hyphenation. And hyphenate-lines how many lines can be hyphenated in a row. As you may have guessed, these are Webkit only.

For more information check out the W3C Hyphens Definition & for browser compatibility take a look at Hyphens on Can I Use

OpenType Ligatures


I love this one.

The vast majority of fonts contain lowercase and uppercase alphabets, numerals, punctuation and accents. But there can be much more to fonts than this basic set of characters. Many professionally-designed fonts also contain ligatures, alternative characters, smallcaps, different kinds of numbers, and sometimes much more besides. These lines of code enable your fonts to really shine (as long as they feature a few of these OpenType features). This is how you enable it:

h1 {
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

This way you turn on ligatures, as well as discretionary ligatures. For more info into ligatures & OpenType features check out this FontShop explanation.

Adjusting font sizes for fallback fonts


If you are using font stacks, this one is for you.

In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

.adjust {
    font-size-adjust: auto;
}

You can use the following values to define the adjustment: none, auto & a number. I would recommend sticking to auto. It works fine for me. For more information on this topic, check out the W3C documentation.

So folks, that's it for today. I hope I could shed some light on this small CSS features to few people know about. If you have something to add or found an error, drop me a line @Starburst1977 or under @thewordsapp.