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.

Myriad

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.