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:

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.

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 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.

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 use a CSS style that makes serif bold italic 1.1 times higher than sans-serif.  That will in most cases make things look reasonable.

The emphasised phrase in the following paragraph should look the same height as the rest of the text:

"If we want to deal with non-print, font-independent reading, we need to establish a new set of font metrics."

Without the extra 10% increase in size it would look like this:

"If we want to deal with non-print, font-independent reading, we need to establish a new set of font metrics."

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?  Irrelevant: let's just use the same units for typography that we use for measuring everything else.