I'm Adam Lloyd.

Yo soy Adán Lloyd.

私は アダム ロイド と申します

Two renderings of Light City: Chromium on Linux on the left, Safari on OS X on the right.  Red borders surround the <h1>s, and blue borders surround the <a>s within them.  The relevant portion of the font stack is 'URW Palladio L', 'Palatino'.

I am concerned with the main header:  the left version is the intended appearance; the right version is ugly.  The post header is included because it includes lower-case letters and so sheds more light on what is happening.

I know very little about typography, so I’m probably going to sound like a fool for a moment.  My impression of what’s happening is that the Mac version takes the area between the bottom of the descender and the top of the ascender and centers that vertically within its block.  The non-Mac version, meanwhile, takes the area between the baseline and the cap height, centers that, and pads it.  (Alternatively: the non-Mac centers the entire bounding box.  This sounds like the more plausible explanation.)

I’m certainly not qualified to pass judgment as to which is the right way of doing it.  The non-Mac version certainly looks better to me, and I’m inclined to think it correct; however, this conflicts with my blind faith in Apple to do typography better than everyone else.

I am interested in knowing exactly what is going on here.1  I suspect that the answer lies in some piece of information in OS X’s Palatino (perhaps its bounding box is just the ascender-to-descender height?), but I don’t have the means to find out myself.2  I am even more interested in knowing whether this is fixable with CSS; the utter failure of my efforts so far suggests that it isn’t.

So, any answers from the ‘net?



This isn’t a new issue (indeed, I’ve rambled about it here before).  It was present in the original Light City, and worked around by adding a Mac-specific font (Baskerville) to the top of the font stack.  I have since grown increasingly uncomfortable with leaving an ugly hack in place to cover up a problem I didn’t understand, so I dumped it with the update (after a simple but apparently incorrect check indicated that the issue had miraculously vanished). ↩



As always, dear Internet, you are welcomed to contribute to the “Adam gets a Mac” fund! ↩

Two renderings of Light City: Chromium on Linux on the left, Safari on OS X on the right. Red borders surround the <h1>s, and blue borders surround the <a>s within them. The relevant portion of the font stack is 'URW Palladio L', 'Palatino'.

I am concerned with the main header: the left version is the intended appearance; the right version is ugly. The post header is included because it includes lower-case letters and so sheds more light on what is happening.

I know very little about typography, so I’m probably going to sound like a fool for a moment. My impression of what’s happening is that the Mac version takes the area between the bottom of the descender and the top of the ascender and centers that vertically within its block. The non-Mac version, meanwhile, takes the area between the baseline and the cap height, centers that, and pads it. (Alternatively: the non-Mac centers the entire bounding box. This sounds like the more plausible explanation.)

I’m certainly not qualified to pass judgment as to which is the right way of doing it. The non-Mac version certainly looks better to me, and I’m inclined to think it correct; however, this conflicts with my blind faith in Apple to do typography better than everyone else.

I am interested in knowing exactly what is going on here.1 I suspect that the answer lies in some piece of information in OS X’s Palatino (perhaps its bounding box is just the ascender-to-descender height?), but I don’t have the means to find out myself.2 I am even more interested in knowing whether this is fixable with CSS; the utter failure of my efforts so far suggests that it isn’t.

So, any answers from the ‘net?


  1. This isn’t a new issue (indeed, I’ve rambled about it here before). It was present in the original Light City, and worked around by adding a Mac-specific font (Baskerville) to the top of the font stack. I have since grown increasingly uncomfortable with leaving an ugly hack in place to cover up a problem I didn’t understand, so I dumped it with the update (after a simple but apparently incorrect check indicated that the issue had miraculously vanished). 

  2. As always, dear Internet, you are welcomed to contribute to the “Adam gets a Mac” fund!