Yes, we’re talking about text here. The not-so-glamorous and often neglected part of web design. While everyone’s talking about the latest fads in responsive designing, icons, conversions and whatnot, the humble text all too often gets ignored. And I don’t blame them. The only folks who really pay attention to it are the typography geeks, or content authors. But perhaps it’s time to change that. Like it or not, plain old text can make or break your website.
“Readership = Revenue”
– D Bnonn Tennant
The purpose of many websites is to make money, directly or indirectly. A website is a business asset. It needs to generate a good return on the investment. Every element should be geared towards that. To make that sale, the website needs to tell people what to do, why they should do it, and make it easy for them to actually do it.
How does one get that message across? Other than the rare stroke of design genius, this is done via text. Unless you’re Google, you can’t really get away with a plain white screen and a search box.
It’s really all about the text anyways
With a large chunk of website visitors coming from mobile devices (~36% as of September 2014, according to StatCounter), it’s no wonder everyone’s creating responsive designs. Yet most responsive designs still focus on fluid grids, flexible images, and getting the media queries right. At most, some designs have a few media queries to reduce the default text size for small screens so that the text fits on the screen. Small font, on a small screen. You can imagine how much fun that is to read.
“Web Design is 95% Typography”
– Oliver Reichenstein
On a mobile device, you really don’t have the luxury of screen space. You can’t afford to have fancy design elements and buttons clutter up your screen. The space above the fold is limited. And you want it to make an impact. The only way to do that is through the text.
How does one ensure that the text is not just readable, but pleasantly so, especially on small screen sizes? Just adjusting the text container’s size and getting the text to reflow is not sufficient. A truly responsive design requires more than that. After all, the aim is not just to show something on screen, but to make sure the content is optimized for readability, usability, accessibility, and overall graphic balance.
Guidelines for good readability – on mobile devices
The Easy-2-Read Standard was the standard for good readability back in the day. Here’s my updated version of the guidelines for good readability, especially for mobile devices.
-
The default font size needs to be easily readable. Without zooming. Without clicking on any button. You’ll have to scale your font to suit the screen size. Keep in mind that the average distance from the screen while reading from mobile devices is just 8-10 inches, much like a book, versus the 23-28 inches for a desktop.
-
Text needs to breathe. Though screen space is premium on a mobile device, packing it full with text is not going to help your cause. So avoid the temptation. Leave enough white space around the text. It reduces a reader’s stress level, and draws them in to focus on the important part – the text.
-
Keep columns proportional. If you’re still running multiple columns on a mobile layout, keep in mind that the column width needs to be proportional to the size of your font. Choosing the right column width is not just about the design or format. It’s about ensuring legibility and an easy flow. Just like on a desktop, if the columns are too narrow, they make the eye change lines too frequently and break the flow of reading. It’s better to just have a single column for a phone layout. Typically, 10-15 words per line make for a smooth reading flow.
-
Adjust the line heights. About that reading between the lines thing – it’s a pain. No one wants to do it. Lines that are spaced too close together cause the eye to take in both the upper and the lower lines at the same time, causing the reader to fuzz them out. So part of your design needs to make sure that there’s adequate space between lines, even when it all scales down for the mobile screen.
-
Avoid text in images. Once your image scales to match the screen size, there are no guarantees text in an image will still be readable. If that text was your punch line, too bad, you’ve lost your chance.
“.. read what you are designing, and imagine reading it for the first time, like someone who just found it.” – Dean Allen
The Tools
So now that we’ve established the need and the guidelines to handle the text properly on mobile devices, how do we go about it? There are many ways to do it, some more useful than the others. Let’s take a quick look.
The simplest way to achieve font scaling is to set a flexible baseline. Instead of specifying the body font size in pixels, set it to 100% of the container, and then set every other font size relative to this, using em:
body {
font-size:100%;
}
p {
font-size: 0.875em; /* If the baseline is 16px, this will scale the font to 14px */
line-height: 1em; /* This keeps the line height proportional to the font size */
}Using Media Queries
If you want to scale specifically for smaller screens, media queries can help. Like with other things on the web, there’s no single right way to do it. Depending on your requirements, you can use px, em, rem, or viewport units to specify the measurement. Pixels are good only when you need a high degree of precision, but they don’t really give the versatility required for scaling.
Using em enables flexibility by making all measurements relative to the size of the body text. Though it involves some extra math in your head, it’s a neat way to make sure the fonts scale. However, since it is relative to the context of the container, it can get quite unwieldy once you have a couple of levels in your hierarchy, or need to move modules around at a later date.
Herein comes the rem to the rescue. rem units are pretty similar to em, except that they are relative to the font size of the root element, and are independent of the context of the current container. The catch is, rem is not supported in older browsers. Ethan Marcotte dishes out some great advice about when to use each of these units. Yet another useful way is to set the sizes based on viewport units.
We’ll take a quick look at what you can do using em as an example. To make the fonts a tad bit smaller for a mobile screen, you can scale it like this:
@media screen and (max-width: 30em) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 20em) {
body {
font-size: 80%;
}
}Since we’d earlier specified the paragraph font size and line height in terms of em, just resizing the body font will ensure they are resized as well. Of course this is a very basic example, just to show how it’s done. You may want to hop over to Sara Soueidan’s article where she gets into the details.
Using a jQuery plugin
While media queries are the more popular way of making text responsive, they are not a truly fluid solution, since they rely on breakpoints. A few jQuery plugins are available to fill the gap and help you easily scale text in a completely fluid manner. The jQuery Responsive Text plugin and FlowType plugin scale the font size well, based on a specific element’s width. FlowType also lets you specify a minimum and maximum font size so that the text doesn’t scale beyond the range you want.
The header sometimes needs a different treatment. Since the header makes a bold statement, you may not want it to be scaled evenly and spill across multiple rows. The awesome slabText plugin doesn’t just blindly scale the text, but calculates the ideal number of characters in each row, and splits the headline accordingly into new rows, while scaling the text. If you want, you can also control the split points. Sara Soueidan has some neat examples showing the difference on her CodePen account. Here’s a responsive headline using the slabText plugin versus what it would look like using simple viewport scaling.
There are a few other takes on responsive text that are quite interesting, though still nascent. The HeadTrackr by Marko uses face-detection with the users webcam to determine how close or far they are to the screen, and then resizes the text accordingly. Ian Storm Taylor and others have been advocating Element queries instead of media queries – basing decisions on the element’s properties rather than on the screens. It’s still more of a discussion right and element queries are not yet part of CSS.
Conclusion
With mobile taking over the way we consume digital media, the emphasis is going to shift from complex layouts and fancy designs to simpler, larger, typography centric, mobile-first designs.
Ignoring responsive text is really no longer an option.
Richa JainOnce upon a time, Richa was a savvy techie & manager, in the semiconductor software industry. After her miraculous escape and recovery, she now works from her garden, creating websites, writing about technology, business & entrepreneurship; and helping others escape the cubicle lifestyle.
