Typography is the foundation of design on the web. Stripped to its core, the web is really just text on a page, so it’s important to get it right.
That’s easier said than done if you don’t know where to start. By following a few simple guidelines, you can make better typographic choices and improve the readability and visual appeal of your work.
To illustrate some of these guidelines, we’ve created a quick tutorial. You’ll turn a mass of text:
Into something much easier on the eyes:
Along the way, we’ll learn about choosing typefaces from Talking Type and modular scales from Tim Brown’s More Meaningful Typography. We’ll generate our own modular scale based on the golden ratio, and use its values to set things like font-size, line-height, measure, and padding.