Madness and Macness

For those in a hurry!

After years of trying we can now use pure CSS to let users read text the size they want it. All, it takes is
body {
font-size: 76%; /*sets a standard base of 12pixel*/
}

and from then on use ems like this:

h1{
font-size: 1.34em /*set base header 1 to 16px*/

}


Intro

We all know the frustrations of websites with text that’s either too small, too large, not resizable, not compatible with a wide range of browsers. Illegible text is number 1 complaint of users, yet 10 years along it still remains the holy grail of web typography: how can the designer satisfy everyone?

A year ago, I’d have said it was impossible due to browser differences, OS incompabilities, DPI variations and so forth. (Commentators tended to blame designers without realizing the problem lay with the Browsers).

The Problem with Pixels

We cannot use pixels. Pixels would seem to be the perfect solution. A dot is a dot is a dot. So you go ahead and do this:
body{
font-size: 12px;
}
Unfortunately, IE for Windows cannot resize text set in pixels. This become a real problem if you have captions at size 10px for example. It may be unreadable for some - yet no designer wants to make a site limited to minimum size of 12px.

The Problem with Points

We cannot use points. On a Windows machine a point is about 1.2pixels high on a Mac it’s 1pixel high. You can imagine the effect of
.caption
{
font-size: 7pt; /* 9 pixels high in Windows, 7 pixels high on the Mac */

}
Your site was unreadable to many.

So we’re left with Percents / Ems and keywords. I’ve found that percents and ems work best so I’m going to go with that.

So what is an ‘em’?

Essentially, in CSS an em is a relative size in the same way as percent is. 1em is equal to the ‘present’ font-size (100% is effectively the same thing) or technically the font-size of the parent element. Of course, at this point (ha!) you are scratching your head thinking what is the ‘present’ font-size of a new document. The answer is that it is what is specified in the browser preferences:
Fortunately, finally all the browser manufacturers have ‘agreed’ to go with a default size that is effectively 16pixels high. Last year, this was not the case and ‘ems’ were unusable still but with the minority browsers such as Safari moving to a 16px default (and the majority already having such a default in the first place we can now go with this).

Of course, 16px is unnecessarily massive but there we go. So now we need to decide what is our base size for our site, and we are done. So suppose we decide that 12pixels is a good base for our users then we calculate that 12px is 75% of 16 pixels, so we start our CSS with this:

body
{
font: 76%/160% "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
/*line-height is 1.6 times the font size*/
/* 76% rather than 75% counteracts an Opera bug */
}

So this means now we have set our site base to be 12px for a standard user. And from now on we can use ems to size things relative to this base.
p
{
font-size: 1em;
}
.caption
{
font-size: 0.834em; /*standard is 10px*/
}
h1
{
font-size: 1.335em; /* standard is 16px */
}

Conclusion

We’ve managed to set a decent base-size for the majority of our users. Windows IE users can resize the text if it’s too small. The size of the text will resize itself depending on the preferences of the individual user. Users who like smaller text and have set their browser default size to 14 or 15 will see smaller text. This system may not work with very old browsers, but I think it’s the best we can hope for.

Notes

• Ems Compound

  Be careful with embedding ems within themselves. They will compound! If you set for example
  li
{
font-size: 0.8em;
}
  and you have this a list in a list you’ll get 80% times 80% = 64%. Your text will rapidly become unreadable.

• Why use 76% percent rather than 0.76em in the body CSS.

  Unfortunately, some browsers don’t honour em sizes less than 1. This overcomes that. Also, I find it more intuitive to see the 76% as a levelling decision, and use ems from then on.

• Why use 76% rather than 75%

  Opera has/had a bug where if its an exact em based font-size it will remove one pixel.
  So 16 times 75% equals 12. Opera would make this 11, but
  16 times 76% = 12.2. So which is rounded to twelve and everyone’s happy.

• 0.834em. Why so ‘accurate’?

  Some browsers have a habit of rounding incorrectly. They may round the size ‘down’ from 8.7pixels to 8pixels. Also, some browsers apply the rounding to every stage. So for example in our stylesheet we have 76%. For a standard set browser, this means
  16px times 0.76 = 12.2pixels (which is rounded to 12pixels for display)
  Now, when we apply the
  0.835em is this applied to 12.2pixels or 12pixels?
  Correctly, it should be to the 12.2 pixels but it often isn’t. So by trial and error I get:
  12.2 times 0.834 = 10.17
  12 times 0.834 = 10.008
  The browser will always round it to 10pixels. In reality, you may just need to do by trial and error.

• Hey! You’re making your site 76% of my default. That’s not right

  In fact, although the browser preferences may say you are setting your default setting, due to historical reasons this is not really the case. Most users have their default at 16 and this is now the established standard, it much better to think in terms of 16 simply representing a baseline.