Dive into typography
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.
A font is the typeface at a specific size. Times New Roman at 12pt is a font. The letter forms themselves are glyphs.
- The type size (or cap height) is the overall height of capital letters in the formation of words.
- The ascender is the upward tail on letters like h, l, t, b, d, and k.
- The descender is the downward tail for letters like g, q, and y.
- The counter is the white space located inside letters like o and p.
- The x height is the height of the letter, and does not include ascenders or descenders.
- The baseline is the boundary that the lowest part of the letter rests on, excluding ascenders and descenders. An x e.g. rests on the baseline.
Not only the letters are important, but also the spacing between them:
- Kerning is the space between individual letters of a type (done by the font designer)
- Leading is the space between individual lines of text (in CSS: line-height)
- Tracking is overall spacing between all letters (in CSS: letter-spacing)
- Word spacing is the space between individual words of a sentence. (in CSS: word-spacing)
Text can be aligned in four different ways:
- Left alignment is the casual default, it creates easy to read text as we read from left to right.
- Center alignment draws the reader’s attention. It’s most suitable for headlines and titles.
- Right alignment can be applied to secondary information, such as the date/business name/address etc on a letter. It’s mainly used in address labels, business cards etc.
- Justified alignment is commonly used for newspaper articles, books or newsletters with columns. It’s difficult to work with as rivers of white space can occur. Rivers can be fixed by adjusting the tracking.
Typefaces can be divided into these three categories:
- Serif type has extensions or strokes on the ends of the glyphs. Times New Roman is a popular example. It’s easy to read and tends to be a little conservative. Serifs create horizontal weight, their job is to prevent our eyes from wandering up or down to the next line.
- Sans-Serif type does not have extensions or strokes. It’s also easy to read and has a more modern appeal. Helvetica is THE sans-serif typeface.
- Script, decorative and symbol typefaces create a very specific image. They are used for things like birthday invites, logos etc.
Some tips to get you started:
- 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?
- 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.
- Figuring out 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.
- 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.
- 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.
- 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.
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:
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! ↩