Learning Responsive Web Design

Chapter 9. Typography

Websites are about communication, about getting information to people. Although some of the information is conveyed through images, most of it is conveyed through text.

Because the words on a web page are so important to being able to communicate your message effectively, you want to make sure text is easy to read and visually appealing.

Your goal is not just to make the text look good and fit in with the overall site design, but to create the best possible user experience for the user who is reading the text.

When creating website designs, we tend to want to control the visual appearance of text too much, thinking of it as a static thing, like the text on a magazine page. We try to control exactly how the text flows around other items on a page, and exactly how the words look next to each other.

To some extent, we can do this, but as we make our websites responsive, we lose some of the control over the text. Instead, we need to style text in such a way that it will look good however the design and layout change—and even if our content is displayed somewhere other than on the web page we designed.

In this chapter, we’ll learn the basics of how to add fonts to a website. Then we’ll look at how to size text, and what units of measurement are most appropriate for responsive sites. Then we’ll learn how line length affects readability, and add media queries to an example site to see how to keep the line length within the recommended range no matter what the viewport ...