12 Typography and spacing

 

This chapter covers

  • Fine-tuning spacing between elements
  • Using web fonts to give your page a unique feel
  • Using the Google Fonts API
  • Tuning font spacing: tracking, leading, and line height
  • Web font performance concerns and optimizations
  • Using variable fonts

In this chapter, you’ll continue building the page you started in the previous chapter. You should now have the colors defined and the page layout roughly in place. Next, you’ll look specifically at fine-tuning the spacing of elements on the page and replacing the fonts with more visually interesting web fonts. These may sound like two separate topics, but they interact with one another in some key ways. CSS includes a number of properties that control the layout, spacing, and size of fonts, so it will be beneficial to look at them and some other general spacing techniques together.

Typography is an art form as old as the printing press. This makes it the only topic in this book with hundreds of years of history behind it. As such, I won’t claim to exhaust the subject here, but I’ll show you some of the essentials and how to bring them to bear on the modern web.

12.1 Spacing

12.1.1 Using ems vs. px

12.1.2 Factoring in line height

12.1.3 Spacing inline elements

12.2 Web fonts

12.3 Google fonts

12.4 How @font-face works

12.4.1 Font formats and fallbacks

12.4.2 Multiple variants of the same typeface

12.5 Performance considerations

12.5.1 The font-display property

12.5.2 Variable fonts

12.6 Adjusting space for readability

12.6.1 Body copy spacing

12.6.2 Headings, small elements, and spacing

Summary