Getting Started with Responsive Typography

Written by Carrie Cousins on 11 Feb 2013
40,322 Views • Typography

Introduction

Responsive design is the “in” thing when it comes to website design. Responsiveness allows for one design scheme to work on websites, tablets and mobile devices and look great in a variety of sizes and orientations.

But have you thought about how this evolving, adaptable design outline relates to type?

Letterforms need to respond to design changes as well. In some instances, the change is simple, link a change in point size or leading (line spacing). Other times the change is more distinct, such as the substitution of a typeface to account for smaller screens.

The most important rule when it comes to typography for responsive design (or any design for that matter) is readability. Every word must be clearly decipherable to be effective. Use a combination of different typefaces, sizes, spacing and contrast to create the best and most readable type combinations regardless of screen size.

What is Responsive Type?

The first step is understanding what responsive type means can do.

Responsive type is resizable. It can be changed based on screen size or user preference.

Responsive type adjusts for column width as well, so that lines of text are not too long or short.

Responsive type also adjusts for differences in pixel density and screen resolution, so that letterforms do not become pixilated or blurry.

Typefaces

You don’t have to pick out a new typeface to be mobile friendly. Or do you?

Pick a typeface that works well at the smallest size you will plan your site for and work up. If text is readable at small size, it will likely only get easier to read as it appears larger.

Opt for typefaces with even strokes in letters and without extravagant serifs, tails or other features. Stick to a simple serif or sans serif (the more popular option).



Changing Size

When sizing type the first thing that likely comes to mind is point size – as in using 14 point type for the body of a blog. When thinking about responsiveness, designers also must consider pixels, ems or rems for sizing.

Measuring type in pixels is comparable to point size. The typical CSS, for example, allows for a size for type where the size can be any number you like. It is noted as {font-size: 16 px}. Most designers think this is the most precise way to measure type.

Ems are a more precise way to create and measure type because they are relative to parent elements in site structures. Ems also allow users to resize type in the browser. It works using a formula based on percentages. Ems allow the designer to have control over type with flexibility but they can cause challenges mathematically.

Rems measure type very much like ems with one key difference – rems are relative to the html elements. As the size of the site changes, rems change the size of type based a formula of percentages and ratios relative to the overall display of the body element. Rems are becoming more of an option but browser compatibility issues still pop up from time to time.

So what unit should you use? Go with what feels comfortable and works for you. If you are feeling good about all three choices, consider using rems for type and ems for things surrounding type, such as margins and padding so that they scale with the type size.

Line and Letter Spacing

Almost as important as size, it the amount of space between lines.

The web standard for line spacing in large blocks of text or body copy is about 140 percent of the point size of the font used. That same application also works for smaller screens.

Try to adjust line spacing so that it moves with the size of your type. The easiest way to do this is with a percentage-based formula.

There are other adjustments to consider as well. With larger type – such as that used for display purposes – consider slightly less line spacing. You want to get enough words on the screen to be readable without too much scrolling.

With smaller type – such as that used for the main body text – consider increased line spacing. Make sure there is plenty of room for lines of type to breathe and the extra spacing can make it a little easier on the eye. The same is true if using typefaces that may be harder to read, such as a novelty or script font.

Line Lengths

One of the most important considerations when it comes to type is line length. There is window of perfection that makes type easy to read based on how many characters fall in a given line of text.

Too few characters and type will appear too large for the space it occupies; this can stress out a reader and cause them to read too quickly. Too many characters and type will be small and cramped; it will be difficult for the eye to focus on and understand the text.

Typically the readability standard is about 50 to 75 characters per line for a website. For smaller screens, such as mobile, 35 to 50 characters per line is more appropriate.

Contrast

Finally, really think about the background color versus type color. There needs to be a lot of contrast between the elements, especially on smaller screens.

Opt for simple colors without a lot of effects for optimum readability.

Black is a good bet for light-colored backgrounds and white on dark works well. But consider grays as well. They can create just as much contrast while being a little easier on the eye.

Be wary of too much colored type. And stay away from type and backgrounds with similar color schemes. While they may work beautifully on a computer monitor, mobile users may click away immediately.

Conclusion

Start small and work your way up to create the best responsive type styles. If it works on the small screen, chances are very good that it will also look great on the largest of monitors.

Consider readability as the top priority. If users can’t read the type on your site, you have failed.

Test everything – twice or even three times. You want to create type that looks good, is easy to read and is engaging. Remember to think about your typeface selection, size, spacing and contrast when creating responsive specifications.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
dlv 11 years ago
Really nice article Carrie ! nice tips to follow, I will keep it in my favs !
regards!
Reply
Anna Andersone 11 years ago
Thank you for bringing ups the typography question once again! Would be great to hear your opinion on a responsive design tool called Froont we are developing! We are paying a lot of attention to typography and consider it key in design and web design. We are launching a private beta to signed up users and you can sign up at http://www.froont.com , or ask me for an invite directly.
Reply