Typography 101 for Developers

Web design is 95% typography. If you get the type right, the design will work. If you get the type wrong, no amount of fancy graphics will save it. Yet, many developers treat fonts as an afterthought.

Hierarchy

Hierarchy guides the reader's eye. It tells them what is important. You achieve this through size, weight (boldness), and color. Your H1 should be distinct from your H2, which should be distinct from the body text.

Readability

Line height (leading) and line length are critical. If lines are too long, the eye loses its place. If lines are too close together, the text feels cramped. A good rule of thumb is a line height of 1.5 for body text.

Conclusion

Don't use more than 2 or 3 font families on a single site. Consistency is key to a professional look.