One Week in Web Design 4

By | November 7, 2011

CSS Typography

Although I’m comfortable working with CSS typography (styling, spacing, embedding, text replacement etc.) it’s clear that my current approach has been self-centred rather than user-centred and so it has to go.

Letting Go of Absolute Control

I’ve always preferred setting my font sizes in pixels, as from a designer’s perspective this gives very fine control over how the font is displayed. However, in the spirit of user-centred design, and in order to prepare myself to create fluid grids and responsive designs I will be designing all my websites in future using relative font sizes. If you don’t already have a preference I highly recommend putting pixels, points, keywords (and percentages*) to one side and instead perfect your use of ems.

*relative units but prone to cross-browser rendering issues (p81, CSS & HTML Web Design)

Back to Base-10

Ems can be hard to work with because the font-size is dependent on the context (e.g. 1.5em for a top level <h1> will probably be very different to 1.5em for a deeply nested <h4>). However, you can make things easier by setting 1em = 1px. This is achieved using the 62.5% rule:

body {font-size:62.5%}

This says the body text should by 62.5% of the default, 16px: 16 x (62.5/100) = 10px. Since ems are relative to the font-size of the context this means that immediately within the <body> tags 1em = 10px. So if I want my <h1> to be 24px I can now set it to 2.4em (24px/10px = 2.4em). This technique gives the most control to a) the user and b) the designer, though you do need to be aware of Font Size Inheritance.

Also, due to browser compatibility issues with text zooming *cough*IE*cough* it is best practice to add the following rule: html {font-size: 100%;}
(p81-2, CSS & HTML Web Design)

Font Size Inheritance

When working with relative units font sizes are inherited (i.e. they are relative to their parent), so if you have a list on 3 levels with the rule li {font-size:1.5em;} the lower list items will be larger than the parent: level 1 = 1.5 em, level 2 = 1.5 x 1.5 = 2.25em, level 3 = 1.5 x 1.5 x 1.5 = 3.375em. To overcome this you can simply use the rule li li {font-size:1em;} (p110, CSS & HTML Web Design)

Line Heights

If you do not specify units the line height will be calculated from the font size, e.g. the following is valid CSS and will set the line height to 1.5 times the font size: p {line-height:1.5;} (p82, CSS & HTML Web Design)

Kerning

Kerning (not to be confused with gurning) is when the spacing of characters overlaps (contrast with monospaced fonts). This can be achieved using letter-spacing and word-spacing but should be used with care as font designers put a great deal of effort into perfecting the kern of their typefaces.

Beware: Overuse of Typefaces

You should limit your design to 2 unless you have a good design reason for using more. Before introducing another typeface you should consider using whitespace, colour and contrast, font styles and variants of your existing typefaces.

Beware: Embedding Fonts and CSS Styling

Often, custom fonts (e.g. @font-face, Typekit, Google Fonts) have a number of variants (bold, italic, bold italic being most common) but browsers are unaware of these and will apply their own styles if you haven’t changed them in your CSS. Beware of the “italic italics” and the “bold bolds” which are very often completely unreadable.

Beware: Font Stacks and Character Sizes

Consider the font stack Verdana, Arial, sans-serif (not that you would use it but just to illustrate the point) and compare these two fonts at 16px:

  • this is some text (Verdana)
  • this is some text (Arial)

There is a significant difference in the character sizes between fonts at the same font size. This difference needs to be taken into consideration for all designs, as we know that not all of our users will have access to all the fonts in our stack and the rendering size will impact on our design.