The goal of responsive web design is to make websites look great no matter what size screen or device the reader happens to be using and, accordingly, to display page content in the optimum format for reading. But if you make assumptions about the way responsive type works, you might find yourself in trouble. Here, guest contributor Jeremy Osborn points out some of the potential typographical pitfalls specific to responsive design along with tips for avoiding them.
A Brief History of Type On the Web
Typography on the web has always been about compromises. Since the beginning, visitors have been visiting our websites on machines with different screen sizes, different operating systems and different browsers. Each of these variables has affected the way type appears. In the age before mobile, web designers tried to paper over these differences by relying on fixed-width page layouts. One popular example of this was the 960 pixel-wide “grid system,” but there were many others.
Mobile Changes the Game
Fixed-width layouts were the standard when all we cared about was desktop screens. A fixed-width layout is very seductive because it allows a designer to set the heading sizes, body text, line spacing, line length and all of the other page components in a predictable way.
With evidence that mobile browsers will outnumber desktop browsers in the near future, we have little choice but to toss away the fixed-width mindset and change to a responsive one. This means embracing the unknown in a multi-device world. The number of different screen sizes and devices are far too numerous to make targeting a specific size screen worthwhile, instead we look to the fluid grid and CSS media queries to help us.
Embracing this uncertainty is the designer’s job, and I’ll admit it can feel a little daunting at first. A responsive layout might have 3 or 4 breakpoints (the point at which a layout changes based on criteria such as screen width) and this can sometimes feel like 3 to 4 times the amount of work!
However, optimizing the readability of your content has some very tangible benefits: the usability of your site will increase and users will be more likely to do things such as return to the site or spend money there.
Responsive Typography: Get in the Know
So let’s look at specifics: If you follow these four typographical tips, chances are your reader’s experience will improve dramatically.
1. Use Web Fonts, Sparingly
Thanks to the solid browser support for web fonts (technically the @font-face rule in CSS), we now have access to thousands of typefaces previously unavailable to us on the web. With this rise of riches, it’s tempting to go crazy. Consider Futura, for example, a classic typeface which comes in multiple styles and weights: light, book, medium, heavy, extra bold and many more. The smart designer chooses wisely, however.
Aesthetics aside, it’s important to remember that there is a performance price to be paid for your font choices. After all, every font on a page must be downloaded by the user. If you were to use all 10 variations of Futura, users with slower network connections (as is often the case with smartphone and tablet users) would likely abandon your site before a single word was even read.
2. Count Your Font Size in Em Units
CSS allows you to set font size in a number of ways, from the common pixel unit (px) to a keyword (small). To make your life easier in the long run, I recommend you set your font size with em units (em). The em unit is so powerful in responsive design because it allows your type to scale predictably no matter what size screen or device is being used. With type set in ems, you can be sure that your text (and the margin or padding space surrounding it) will scale fluidly, even if the user decides to override your font size in their browser settings.
3. Set Line-height with Intention
Line-height in CSS is the amount of space above and below multiple lines of text, also known as leading or line spacing. If you choose not to set any line-height values in CSS, chances are your text will look okay but not great. This is because desktop and mobile web browsers set a default line-height if none is specified. But the browser doesn’t always know best! By increasing or decreasing the distance between lines of text the designer can improve readability and even create intentional aesthetic effects. Increasing the amount of space between lines, for example, can create an almost luxurious sense of space (depending on the content). Be careful though, too much line-height and you run the risk of losing your reader’s attention.
4. Control Your Line-length
The traditional term for line-length is measure, which is defined as the amount of characters in a single line of text (typically within a column). Over the years it has been determined that somewhere between 45 and 75 characters is the ideal number for line-length. In responsive design, this line-length is notoriously tricky to control and predict, because we have to account for narrow phone screens as well as the expansive real estate of large desktop monitors.
The penalties are high if you don’t account for these differences: a measure that is too long will create difficulty when the reader tries to continue from one line to the next and they’ll lose their place. If the measure is too short, you’re tempting the reader’s eye to begin on the next line before they have finished the current one, resulting in a choppy reading rhythm. A common technique for controlling line-length in CSS is to use the min-width property, so the declaration min-width: 1200px,for example could be applied to either to a paragraph of text or its container to limit the length of the line.
Get Your Responsive Type Right
Getting your responsive typography right will go a long way in making your site as useful as possible for your users. It’s worth the effort however, because a solid typographical foundation will allow all of the other components of your design to shine. Furthermore, the price you pay due to hard-to-read content is going up as more users flock to mobile, so set some time aside and make that type fully responsive!