Typography Test

The font pairings below are the latest. I have tried to remove as many variables as possible in terms of size, spacing, and colors to offer a fair comparison, but there are still many ways that any of these examples could be tweaked.

I have listed them in my preferred order, relying a lot on Jamie's helpful insights and on reading a variety of designer opinions on the Web.

Tisa - Kepler - Myriad

This combination is based on Jamie's analysis, and I think it works the best of all the pairings I've tried. Tisa is a unique and outstanding font for body text--almost a semi-serif. It is very readable but also has a distinct character. Tisa is probably a little too quirky to use for headlines on our site, but Kepler bridges the gap between Cornell's logo and Tisa--Kepler would only be used for large headlines in this model. Myriad is a very versatile sans-serif and renders well at small sizes, making it a great choice for captions, subheadings, navigation, etc.

Kepler - Myriad

If we want to go with fewer font faces for simplicity or CSS file size, Keper would also work well for body text.


If we want to go with a sans-serif for body text, I think Myriad Pro is a good choice. It has more warmth than Proxima Nova (U of Chicago's font), it has more weight at larger sizes, and it renders better at small sizes. I think many sites are moving away from such a heavily reliance on sans-serif, so even though sans-serif sites look more modern, I think they may also look more dated in terms of overall design pretty soon. The sites I look at that are produced and/or highlighted by design experts almost always have a good amount of serif fonts at this point. We could also add a serif font in for subheadings, though I don't think this is as effective as the reverse approach shown in the first two pairings.

Proxima Nova

Proxima Nova is a very popular font, and it works very well on the U of Chicago's site. It is very clean, modern, and flexible, but I think it feels very corporate, and I don't like it as much as Myriad in general.

Caslon - Myriad

At Jamie's suggestion, I tried Caslon, which is what DePauw University uses for headines and body text and what Cornell's logo is based on. Caslon is pretty similar to Kepler at large sizes, but I don't think it renders quite as well. And for body text, some of the letters--'a' and 's', particularly--are almost collapsed, making the text harder to read than Kepler or Tisa.