Stuff & Nonsense. Website designers in North Wales

Lead Pipe

Would you be surprised if you heard me grumble about CSS3 and web typography *?

Probably not.

Fine web typography is almost always about readability, particularly the readability of long passages of text. Typefaces that have been designed specifically for on-screen reading (as opposed to print) go some way to making type more readable, but designers can make even the most readable screen fonts difficult to read and, conversely, you can make type set in faces that have not been designed for on-screen reading more readable.

There are several factors that affect readability; your choice of a serif over a sans-serif and the distinctiveness of the typeface you choose, the measure (line length), how you justify your type and the spacing between lines.

Leading

Leading (‘ledding’) (or line-height in CSS if you prefer) is, unsurprisingly, the space between lines of type.

It is perfectly acceptable to decrease leading if your chosen typeface has a smaller x-height, but when you set the line-height too tight, you darken the optical grey of your type and the ascenders (strokes that rise above the x-height) and descenders (strokes that fall below the baseline) merge to form a denser and less readable mass of type.

A small amount of additional lead often makes blocks of type more readable, but when you open the leading to much, you force a reader’s eye to make bigger jumps between the end of one line and the beginning of the next.

Again, there are several factors that should influence your choice of leading amount for body text.

  • Does your design use dark text against a light background or (like this one) the reverse? You should always increase the amount of leading for reversed designs.
  • How long are your line lengths? You should always increase the amount of leading in proportion to the length of a readable line (the measure). Of course this becomes difficult in liquid-width designs, but more on that another day.
  • The x-height of your chosen typeface.

x-height

x-height is the size of a typeface demonstrated by its lowercase x, as x is the only letter that stretches to all four corners of character space, disregarding of course letters with ascenders that extend above the mean line and descenders that fall below the baseline. (More on x-height at Wikipedia)

The x-height of a typeface has a big impact on its readability as it influences our perception of the size of that typeface, more so than the height of ascenders and descenders. Even when you set the same size on several typefaces (for example: 36px), those typefaces may appear to be different sizes.

x-height, together with differences in a typeface’s weight and character width, affects it’s apparent size, the darkness of it’s typographic ‘colour’ and therefore the amount of leading (line-height) that you should set between lines to maximize the readability of your type. As a general rule if the typeface you choose has a smaller x-height and a lighter weight, you should decrease line-height. When the typeface has a larger x-height and a heavier weight, you should increase line-height.

Here comes the grumble you’ve been waiting for…

The problem with CSS

Imagine this scenario.

For your design you want to use Calibri, a typeface with a smaller x-height and darker, denser optical grey. Of course for people who do not have Calibri installed on their system, you'll no doubt offer a more commonly found alternative, perhaps Verdana along with it’s larger x-height followed by the ubiquitous Arial with an x-height that is different again. Your resulting CSS font-stack would look like this:

body {
font-family : Calibri, Verdana, Arial, sans-serif; }

Most CSS frameworks that include a typography component and most everyone I know add a line-height declaration, wrapping up several font properties including size, line-height and family into one shorthand declaration:

font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; /* 24ways */
font: 0.8125em Verdana, sans-serif; line-height: 1; /* A List Apart */
font: 11px/1.5em "Lucida Grande", Verdana, Arial, Helvetica, serif; /* Mark Boulton */

And there’s the problem with CSS, right there. Different typefaces, even common ones, that have been designed with different x-heights, need different amounts of line-height. Calibri less than Verdana and different again to Arial or Helvetica. But CSS does not provide the facility to specify a varying line-height if a font in the stack is not installed, as it retains the same set line-height value for all typefaces specified in the font-stack.

Specifying the font-stack in a different way,

body {
font : 12px/1.5 Arial;
font : 12px/1.8 Verdana;
font : 12px/1.3 Calibri; }

doesn’t help.

When Calibri is not installed or is disabled, a browser displays the typeface from it’s own browser (‘default’) stylesheet rather than falling back to the previously specified Verdana or following that, Arial. However it does continue to display the last specified line-height value, regardless of whether it’s accompanying font-family is available.

CSS3 will not help resolve this

When you have a few extra minutes to spare, take a look through the CSS3 Text Module. It was last updated over two years ago. While the CSS Working Group has proposed important additions, some, such as text-shadow that have already been implemented in the browsers I care about, there is nothing proposed to address the issue linking line-height to font availability. This is an oversight I hope that with the right encouragement and help they will rectify — and soon.

What are your options today? Perhaps a Javascript solution such as FontAvailable that can test for font availability. If you’re handy with the jQuery, you could then append a class based on the result:

.calibri { font : 12px/1.3 Calibri; }
.verdana { font : 12px/1.8 Verdana; }

and so on.

Of course you could choose to get around the issue of font non-availability altogether and utilise @font-face for even the most common of typefaces, it’s an approach I’m currently contemplating but one that brings about it’s own set of challenges.

Yeah, yeah Andy…

All you ever do is…

complain.