The goal of typography is to convey written information as easily as possible. Well-chosen typography makes page look aesthetically pleasing and helps the viewer to read easily, without thinking about it. For mobile devices, the key challenge to typography is the size of the screen. Mobile typography must balance readability with information; you want to fit enough content into the screen without making the font too small to read. This can be a tricky balance. The other big challenge to mobile typography is that phones are used everywhere: while sitting in a waiting room, walking outside, laying in bed, and so on. This means that mobile screens are viewed in all kinds of lighting, from bright sunlight to total darkness. This means that mobile typography has to be readable in all different conditions. Mobile typography has developed to meet these challenges, and most web designers follow a set of key principles in order to create attractive mobile websites and enhance readability.
The one factor that will affect font’s readability the most is size. If your typography is too small, it will be difficult to read. Particularly on mobile devices, you never want to make the user have to work in order to read your website. They’re likely to exit your page and go somewhere else. You need to make your size big enough that it’s easy to read; that way, your content is the only focus. Because mobile devices shrink content to fit on a small screen, you generally need to use a larger sized font than you would on a desktop website.
In addition to considering a font’s size, you have to think about the spacing between letters and words. Creating space between letters helps to make your typography more readable. If the letters are too close together, they start to look squished and difficult to read. The space between lines, called leading, is also important. Allow enough space that the lines don’t look as if they’re running together. If you leave too much space, however, it makes it challenging for the eye to follow from line to line. This graphic from Web Designer Depot provides a helpful guide:
As previously mentioned, people view mobile websites in all different kinds of lighting. In order to make your mobile site readable anywhere, you need to create high contrast between the color of the background and the color of the text. White text on a yellow background, for example, is likely to be unreadable. If you want a colorful page, a darker colored background with white text usually looks good. If in doubt, a white background with black text will never go wrong.
Remember that the goal is to make it easy as possible for readers to focus on your content. You don’t want the typography to draw attention to itself. For this reason, you want to choose a simple font. Avoid anything with decorative flairs. Many web designers recommend staying away from fonts that include serifs (decorative lines at the end of a letter’s main strokes). Fonts with serifs or other lightly decorative flairs may work well for a headline but not for the body of text. These extra strokes can make your text look convoluted and impair readability.
Time’s New Roman, for example, may be a highly popular font for word processing, but its distinctive serifs make it ill-suited for mobile web design.
“Times New Roman-sample” by TimesRomanSp.svg: Rbpolsenderivative work: Kuyrebik (talk) – TimesRomanSp.svg.
Popular Mobile Typographies
The most popular mobile typographies excel in simplicity and readability. They are also popular because they are easy for web designers to use. These typefaces will likely to be familiar to you, and that’s not a bad thing. When it comes to typography, familiarity is generally preferable to creativity.
Helvetica has been around since 1957, and you probably see it every day, on everything from road signs, to government forms, to product packaging. It’s a neutral sans-serif popular because of its simplicity. Helvetica is used by big brands all over the world, and it’s also highly popular on websites.
Roboto is popular primarily because it is the default font used on the Android operating system. Developed by Google, Roboto is a simple and modern font.
“Roboto (typeface)” by Google – http://commondatastorage.googleapis.com/androiddevelopers/design/Roboto_Specimen_Book_20131031.pdf. Licensed under CC BY 2.5 via Commons – https://commons.wikimedia.org/wiki/File:Roboto_(typeface).svg#/media/File:Roboto_(typeface).svg
San Francisco is a relative newcomer to the world of typography, but it’s poised to become highly popular. Just as Google developed Roboto, Apple developed San Francisco, and they will soon be using it as the system typeface for iOS. This means that San Francisco will soon be a familiar sight for many mobile users.
“San Francisco Display SP” by Cjt3007 – Own work. Licensed under CC BY-SA 4.0 via Commons – https://commons.wikimedia.org/wiki/File:San_Francisco_Display_SP.svg#/media/File:San_Francisco_Display_SP.svg