From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Typography is the backbone of web design. Good typography will make your site easy to read, visually appealing and works in different user environments. Poor typography makes people look away.
One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.
Readability
It’s the words that matter.
In 2006, Oliver Reichenstein of Information Architects (which showcases excellent type-oriented display), wrote that “95% of the information on the web is written language.” That statement should be a guiding principle for all web design projects.
It encapsulates the importance of readability.
When designing for mobile and responsive formats, select simple typefaces that are easy on the eye – simple sans serifs of average weight work best. (Think Helvetica.)
Size and line breaks are another consideration. There is no simple formula for selecting a font size, but a good starting point is to match the point size to a maximum number of characters per line. An average range is 60 to 75 characters per line for website design, including spaces and punctuation. For mobile, consider dropping to 35-50 characters per line or basing the number of characters as a percentage of the total from the web layout.
Lines that have too many characters can be difficult for the eye to follow. Lines that are too short break a user’s natural reading rhythm. Size is a factor here as well. Lines with many characters require fonts that are too small to be easily readable, while lines with too few characters leave the design open to very large characters, which can look odd or even cartoony.
Contrast
Contrast in design is important if you want to make type stand out. You would not want to read pink type on a red background, would you?
It may sound simple, but plan your design based on white text/black background or black text/white background. After you find success with these combinations, consider adding color. But keep the contrast pattern from white and black in mind along the way.
Space
The smaller the screen size, the more important it is that you give letters room to breathe – vertically and horizontally.
Simply, add more space around and between type when designing for smaller screens. Add room to the margins so there is a natural line between where the screen ends and text begins.
Add extra space – maybe as much as 20 percent – between lines of type. Smaller type is easier to read with additional spacing. Think of it this way – you would not use 16 point type with 12 point leading on the browser-based website, so don’t do it for mobile. (Online you might consider 12 point type on 14 point leading; for mobile that would adjust to 12 point type on 16 point leading.)
Users are used to scrolling and will read your content if it interests them; they will not read it if it is too tightly packed to browse with ease.
Another consideration when it comes to mobile typography and space is room between elements. Just as you will give type extra room to breathe, give elements that same space. Instead of cramming four navigational bars into a horizontal space, stack them vertically in the mobile design.
Don’t try to cram elements into a side-by-side format as you would with the more horizontally shaped browser. Stack photos, text and other elements for the vertically-shaped mobile device. (You will also need to keep flipped orientation in mind for those mobile users who will read by turning the phone 90 degrees, but hopefully your adaption for responsive design techniques will accommodate those users.)
Responsiveness
The idea behind responsive typography is that type is resizable by screen size and user control and it includes optimized line lengths based on the width of the screen.
Responsive type is designed using pixels, ems or rems. Each is a different unit of measure that defines a relationship between the font used on the website (100 percent) and the font used at other points along the responsive grid.
Why does this matter? Planning your mobile site with a responsive grid in mind will give users the best possible experience and leave them with the most readable type because it will adapt to their screen, regardless of size.
There are a host of responsive grid templates and options to choose from and all have advantages. The designer needs to determine what properties are the most important when selecting or creating a grid so that the mobile site maintains the look, feel and branding of the sister websites.
Tips for Success
Start small. Does your text render on a smartphone? If not, work with the type so that it is readable on the smallest screens first and make adjustments to accommodate larger screen sizes.
Think about multiple columns for text. A single column is the right width on a small, narrow screen but what about in a wide-screen web browser? Think about splitting text into two columns to keep lines from getting too long.
Consider the type style. Letters of even stroke weights are the easier to read at small sizes. Avoid typefaces with varying wide and narrow strokes. Also consider the width of each letter; very skinny condensed fonts are more difficult to read than normal or regular styles.
Avoid bells and whistles. Scripts, cursives and novelty typefaces do not render well at small sizes. Avoid them for use in body text and use them sparingly for display (one or two words maximum).
Keep it simple. When working with mobile devices, remember the screen is small. Few elements mean text will be easier to read.
Test, test, test. Check out your design concept on multiple devices.
Check out different browser sizes. Do it with just a click from your desktop before you get started with a tool such as resizeMyBrowser.
More Great Mobile Typography
Thinking about mobile typography extends beyond mobile websites. It also includes app design. Here are a few websites and apps that have mobile typography down to an art.
Mobile Sites
Story Hotels
Amy Stoddard
Roanoke Outside
Print Fancy
McDonald’s
CBS Sports
Hipstamatic
Apps
Evernote
Paypal
NY Giants
Red Stamp
Nike Pro Training Boom
LivingSocial
Food on the Table
Get more inspiration:
I never knew there was a cms named fork too. just saw an image of it here, Get to go to try it, thanks 😀
Thx Carrie !! Your articles are always revelant ! It really helps.
Very nice Carrie.
Good round-up and the examples always help!
Another excellent article Carrie! Huge fan! 😀
choice at your fingertips.
thanks for share!
Great read along with examples! When you’re talking about characters per line, are you using code to break that up or just general setting your column width / font size to achieve the desired result?
I typically use a font/character size and per column width that achieves the character per line goal. You can get a little more control over the typography that way and hopefully avoid unwanted or odd breaks.
Thanks for all the great comments, everyone! Readers like you totally make my day!