<hpcodecraft> release the kraken!

Dive into typography

Reading time: 5 minutes

The second lesson of Hackdesign is about typography - here’s my digest:

What is typography?

Typography is the art of type, it deals with fonts and readability. Today, typographical knowledge is worthwhile for web developers because CSS already allows a lot of customization when it comes to fonts. Additionally, every font says something by itself, so you should know which fonts fit the message you want to convey to your users.

Typography basics

A font is the typeface at a specific size. Times New Roman at 12pt is a font. The letter forms themselves are glyphs.

typography-basics

Not only the letters are important, but also the spacing between them:

kerning-and-leading

Text can be aligned in four different ways:

Typefaces can be divided into these three categories:

Some tips to get you started:

  1. Find out what your font can do
    Check the character set and the features of a font before incorporating it in your web design. Does it contain all the letters you’ll need? Is it available in bold, semi-bold etc?
  2. Subset cleverly
    Font fallbacks happen on a character basis. As soon as character is missing in the specified font the fallback system will use the corresponding character from the next font in the list, then switch back to the original font. This can be exploited, e.g. by using a font without numbers first and provide the numbers via the fallback font.
  3. Figuring out numerals
    typography-numerals
    Use tabular figures for vertical aligned numbers or in columns and lining figures in text. Oldstyle numbers are better in mixed-case text while linear numbers should be used with numerical data or in capitalized text.
  4. Don’t fake styles
    If your font provides subsets for italic/bold text, include them in your CSS. Otherwise the browser will enforce these styles artificially which won’t look as good as the original style.1 Use <strong> instead of <b> and <em> instead of <i> in your markup to show your intention and define the corresponding styles in your CSS. Maybe emphasized text should be pink and not italic? You’re good to go then.
  5. Learn your HTML entities
    There are a lot more characters available than you have on your keyboard. Memorize the most common ones to have them ready when doing type on the web.
  6. Define relationships, not absolute dimensions
    Text on the web can be resized by the user. Use ems in relation to the body text size instead of absolute size values.

Chances are that you won’t immediately start designing your own font after reading some articles about typography. To get an idea of what a type designer’s work may look like, play these two little games:

If you’re interested in further reading take a look at Thinking with Type. The book can be read online for free and contains a lot of examples and more information.



Sources:


  1. While writing this summary I realized that I did exactly the same error on this website. I'm using Open Sans Condensed for the body text here and included only the main style from Google Fonts. The result was that bold text looked blurred and italics, well… see for yourself:
    Before:
    italic-before
    After:
    italic-after
    The most striking difference is the tighter tracking but some letters also changed their appearance: The a and e look totally different (and better) now! 

comments powered by Disqus