When designing a website, it is important to consider how the page will be viewed on different platforms and operating systems. Each operating system comes with a set of default fonts so it’s best to design around those. However, the fonts available on each platform are different. Lucida Grande (Mac) and Calibri (Windows) offer the best reading experience because they are finely tuned for readability.
As you can see though, each font has its own footprint. If we look specifically at Lucida Grande and Calibri, Calibri is much smaller even though it is using the same font-size. This makes it very difficult to use those two fonts as alternatives for your Mac and Windows users, respectively.
The font-size-adjust property allows us to make the sizing more analogous because it uses the relative height of lowercase letters instead of capital letters. As you can see in the reference rendering, this makes Calibri and Lucida Grande roughly equivalent; they have the same footprint.
The problem: This property is a CSS3 spec, so it is not available in most browsers yet. Only Firefox supports it so far.
| Internet Explorer | ✗ |
| Firefox | ✓ |
| Chrome | ✗ |
| Safari | ✗ |
Assuming you don’t want to embed a font (because you might scare users away with a security warning) or dynamically resize with JavaScript (because there’s no guarantee it’ll work), you are left sticking with boring Helvetica and Arial since they are the only two that have a matching footprint.
