Typophile

Calculating a font's baseline position

Matt Mazur

Hey Typophiles,

I'm a software developer working on an application that requires precise font rendering and I'm having trouble doing the calculations correctly.

Here's an example:

A user selects 36 point Helvetica as their font. How far down, in pixels, is the baseline?

Here's my calculation:

12pt is 16px, therefore 1px = 4/3pt.

36pt * 4/3 = 48 pixels

The baseline, per a book I have, "sits one-third the point size up from the bottom", so the baseline in this example would be at 32px.

32px, however, is smaller than the height in pixels of a capital A in 36 point font, which means the top of the A gets chopped off when rendered, so something is off.

What am I doing wrong?

What you read is just plain wrong. The relationship of a baseline to the bottom of the em as well as to the top is fairly arbitrary as different fonts have different stuff under the baseline. What you need to do is research how the vertical metrics of fonts work. Start with: http://kltf.de/downloads/FontMetrics-kltf.pdf

The Bad News:
Fonts comes in 1000 point, and also in 2000 point, or 2048 points, or whatever the designer of each fonts has chosen.
Think of it as if JPG images comes in 72 dpi, 300 dpi or whatever "resolution".

The Descenders, baseline, x-height, caps height, and ascender height can be chosen at will by the font designer within the font "resolution".
So, there is no standard on that.

The Good News:
You can read those values out of the font meta-data and adjust at your will.
Modern browser do something similar via the CSS property called "font-size-adjust"
http://www.w3.org/TR/css3-fonts/#font-size-adjust
http://emdpi.com/cssfontsizeadjust.html

Hope it helps!
Good Luck

>A user selects 36 point Helvetica as their font. How far down, in pixels, is the baseline?

Good so far.

>Here's my calculation:

>12pt is 16px, therefore 1px = 4/3pt.

If the resolution says so.

>36pt * 4/3 = 48 pixels

>The baseline, per a book I have, "sits one-third the point size up from the >bottom", so the baseline in this example would be at 32px.

The book is false.* 1/3rd's a good starting point for average fonts, but the top of the em and baseline are determined first, (unless you are writing lines up the page?), and the descent can be as little as 1/6th in some cases.

And, 1/3 of 48 is 32 from the top.

>32px, however, is smaller than the height in pixels of a capital A in 36 point font, which means the top of the A gets chopped off when rendered, so something is off.

*The font you have selected is probably proving that.

Captured from web.archive.org on 14 Oct 2013. view this capture