On Typography and the Web

Typography's measures

Classically the typographer's unit is the point.  Never mind the history, the point can be converted to a metric value.  But, no pun intended, that's not the point:  the problem is that texts in different fonts do not look the same size even if their size is expressed in the same number of points.  For example, the lower-case characters of Times always looks smaller than those of Helvetica when both are given the same point size.  Inspect this image of some text:

Type sizes

In the image all letters are in size "12pt", but as the fonts are different, the apparent size is different too.  I had to use an image, because no web CSS specifications would rigourously result in the same presentation on the reader's screen.

Fonts for Roman characters have upper and lower case letters.  The size of the lower case letters is a fraction of that of the uppere case ones, but that fraction is different for each font.  Unfortunately the size of a font specifies the size of the upper case letters.  In the image above all capital letters are the same size: 12pt, but the lower case ones are not.

Is it my Problem?

I would like to build web sites that are totally independent of specific fonts and sizes, using only relative measures such as "%" and "em".  The reason is that most of my readers may have vision problems and so may want to use their own preferred typography, size of text, and so on.  Content and structure is to me always much more important than a beautiful layout or the choice of fonts.

Please understand that this is perhaps purely my (psychological) problem, of no concern to anyone else.

The Point

If I decide to make a CSS style for "Emphasise", which should be bold italic serif, then the word comes out too small (5th line in the image), and if I make it come out right, I have to set the font size to 14pt instead (as done on the last line in the image).

This effect is visible in many places, ironically it can be spotted on the Wikipedia page on typography!

Trying to correct it creates insoluble problems in CSS:  I do not know what fonts the reader's browser will use for the generic fonts "serif", "monospace", "sans-serif".  Hence I cannot really specify sizes either.  The only way out seems to specify everything in very great detail:  font names, sizes in absolute values, positioning of nearly each element.

But that is clearly contrary to the design goals of the site and indeed of the web itself.

The Problem

The problem purely and simply is sloppy definitions in units and presentation of fonts as traditionally used in typography.  Until the birth of the Web this was not important since almost all text was read on paper printouts, where everything is fixed by the author/desinger beforehand.

I'll discuss here only the class of common fonts for Roman alphabets, not even any fancy fonts such as those resembling handwriting. I'm only concerned with the likes of Helvetica, Times, Courier, Palatino and similar.  Stuff used to print novels and newspapers.

In a given font of that class there is of course a set of lower case letters and a set of upper case letters, each having its own height.

Each font thus is characterised by at least two sizes, and the proportion may be different for each font:  e.g. it might be that the ratio of Helvetica's upper case letters to its lower case letters is different from the ratio found in Times.

This is in fact true: Helvetica's upper case letters are roughly 1.38 times higher than its lower case letters, but those of Times are 1.47 times higher.

Relatively speaking, Helvetica lower case is about 1.15 times higher than Times lower case.

Therefore a single number does not suffice to give the size of a font:  if the lower case letters of 12pt Helvetica would be exactly the same height as those of 12pt Times, then there would still be a difference in their upper case letters.

One possible answer might be to use the same font throughout, using serif and sans-serif versions, italic and roman.  But unfortunately, even within the same font family there are height differences between the variants.  Times italic is slightly smaller than Times roman, but Times bold italic is the same height as Times roman.

A Kludge

For the time being then, I have chosen to force the use of the font DejaVu, which has serif and sans-serif versions with regular and italic all at the same size lower case letters.  The downside is that these pages will force download of several MB of font information.

A Final Word

Why do we still use archaic units like points?

Suppose I want to print a big label, or a large banner for outdoor use.

I probably want to make the letters, say, 10cm high for the label, or 1m high for the banner.  How many points is that?  This should be irrelevant:  we should use the same units for typography that we use for measuring everything else.