Hack: Typography

February 19, 2013

I recently spent some time improving the typography of this blog. Here are the 3 things that had the biggest impact on improving my site’s readability.

1. Steal typography from sites that you like

Look at the sites you frequent and take note of their readability. Inspect their CSS of your favorites: Right-click > Inspect Element on the paragraph you like and steal their font-size, line-height, and paragraph width.

This blog uses a 21px font-size & 32px line-height when in full screen mode, which is a width of 665px. I took inspiration from Zeldman’s blog and SVN by 37 Signals.

2. Optimize your font stack for readability

Yes, thin Proxima Nova is gorgeous, but there’s a reason that books aren’t printed in it. Serif stacks are a lot more readable.

Grab a serif font stack from cssfontstack.com. They are all optimized to fall back well across different browsers/devices. I’m a fan of the Cambria and Georgia stacks.

3. When in doubt, use the golden ratio

It’s argued that there’s a science to readability, and it’s the golden ratio. You really can’t go wrong with sticking to it. Pearsonified created a really handy calculator for calculating the golden ratio for your text.