Inconspicuous Vertical Metrics

by Alec Julien

Five?

There are generally taken to be five vertical measures of note in typography (from bottom to top): descender, baseline, x-height, caps-height, and ascender.

Vertical Measures in Minion

But if you delve into the minutiae of font design, you soon discover that there are a slew of important vertical metrics that aren’t much talked about. In this article, I will take a look at several of these metrics, and how they are used in font design.

t-Height

Take a look at the basic alphabet from the venerable Minion, with the top three measures highlighted across each glyph:

Minion alphabet

You’ll note that the lowercase ‘t’ sticks out like a proverbial sore thumb. The crossbar aligns with the font’s x-height, but the top of the glyph is on a vertical plane all its own. In my research, I find no accepted terminology to measure the top of the ‘t’, and so I propose we give a name to this vertical metric (simply enough): t-height.

Minion t

The tradition for serif fonts is, like with Minion, for the crossbar of the ‘t’ to be at the font’s x-height, and for the top stem of the ‘t’ to come up somewhere midway between the x-height and the caps-height. Typically, sans serif faces adhere to the same rule, as do slab serifs. However, gothic and geometric sans faces often break with tradition and elevate the ‘t’ to the ascender. Handwriting fonts often do the same.

t-heights

Overshoot

Looking at the string ‘xoXO’, you might think that there are only three of the standard five vertical metrics in play: baseline, x-height, and caps-height.

xoXO

But if you view these glyphs at a larger size, you can see that the bottoms and the tops of the ‘o’ and ‘O’ overhang the baseline and their respective constraining heights. This is standard practice in font-making, the reason being that if the ‘o’ and ‘O’ came exactly to the baseline and x-height/caps-height, it would appear to the naked eye as if they were smaller than other surrounding glyphs. This goes for any glyph rounded on the top or bottom. Here are some typical lowercase overshoots, top and then bottom:

lowercase overshoots

And typical uppercase overshoots:

uppercase overshoots

In principle, the overshoots should not be apparent to the eye at normal text sizes. The whole idea of overshoots is that they make their glyphs appear to be the same height as flat-topped and flat-bottomed glyphs.

e-Bar Height

Typically, the bar of the ‘e’ rests somewhere between halfway and two-thirds up from the baseline to the x-height. (It’s extremely rare to find a font where the bar of the ‘e’ is below the halfway point between the baseline and the x-height.) Let’s call the height of the center of the bar of the ‘e’ the e-bar height. Here are Minion, Helvetica, Times New Roman, and Museo, and how their e-bar heights compare to the A-bar height and the x-junction height:

e-bar heights

A-Bar Height

The A-bar height, taken as the measure from the baseline to the center of the bar of the ‘A’, typically ranges from around 30-40% of the distance from the baseline to the caps-height.

A-bar heights

Incidentally, as you can see from the above image, the H-bar height is generally higher than the A-bar height. This makes sense architecturally, if you think of the crossbars of these glyphs as providing a sort of balance. The ‘A’ crossbar, if it were up at the height of the ‘H’ crossbar, would make the ‘A’ rather top-heavy.

R-Junction, P-Junction, B-Junction, and K-Junction Heights

When I first started designing fonts, I thought, naively, that the junction points in the middle of the vertical bars of the ‘R’, ‘P’, ‘B’, and ‘K’ were all at the same height. Wouldn’t it be easy if you could just design a ‘P’, and then just stick a leg on it for an ‘R’, and another hoop on it for a ‘B’? I soon learned better. Here, once again, is Minion to show us the subtle variations in vertical metrics that make a font interesting:

K R B P Junction heights

Upon closer inspection, we can really see the different heights of these junctions. Here’s a close-up of the ‘R’ next to the ‘P’. Note that the P-junction height is slightly lower than the R-junction height.

R P Junction heights

The B-junction height is much higher than the R-junction height:

R P Junction heights

E-Junction and F-Junction Heights

You might also suspect that the middle bars of the ‘E’ and ‘F’ would be at the same height, but this is not always the case.

E F Junction heights

In Minion, the E-junction height is slightly higher than the F-junction height. You can see, also, that there is a wide variance of heights across the middles of some glyphs:

A E F G H Junction heights

Look how strange Minion would look if all of these middle heights were the same:

A E F G H Junction heights equalized

And Then Some

We’ve really just scratched the surface. Well, I suppose we’ve dug in a little more deeply than the surface, but there are still a great many more interesting vertical metrics we could explore. G-bar height, briefly alluded to in the images above; horizontal serif height, e.g., how far off the baseline of the ‘T’ its bottom serif rises; vertical serif height, e.g., how far down from the caps-height of the ‘T’ its two vertical serifs drop; two-storey a-junction height, or where the loop of the ‘a’ intersects the vertical right side of the glyph; two-storey g-bowl height, or how high the bowl of the ‘g’ starts above the baseline.

If your interest is piqued, I highly recommend Karen Cheng’s Designing Type, which is filled with wonderful analyses of minutiae like these.