Basics of Typography for Mobile Web

Mobile devices like smartphones and tablets, are being used more and more than ever before—for work, shopping, research and leisure. In fact, it has finally reached the point where nearly half of all online retail traffic is coming from mobile devices, according to latest online traffic reports from IBM. What this means for business owners is that now is the time to work on your mobile website design, to make it appealing and functional for your mobile visitors. One of the most important pieces of the mobile design puzzle is the typography. As you are putting your mobile your site together, keep in ind the following typography basics.

• Size – Text size is very significant in mobile web design. If you choose too small of a font, you will cause your reader to constantly pinch and zoom just to read what you’ve written, but too large and you overwhelm the screen, making your reader scroll through page after page for even a short document.
• Whitespace – It may not seem like it, but the space between the words and paragraphs is just as important as the words themselves. The right amount of whitespace makes it easier for the readers to easily scan the document and find information quickly. This is reason why many articles written for the mobile web include bullet points and/or subheadings to break up the text.
• Alignment –While an occasional center-aligned header is necessary, in general you will want to choose left alignment for your text. Justified text is sometimes popular in standard web design, but often does not translate well to mobile web. A standard left aligned text may have a “ragged” right edge, but will still be the easiest to read in most cases.
• Font – Choosing a smooth, simple font for text is even more vital for mobile design than it is for general webpage creation. Since everything is displayed a little smaller on a smartphone or tablet than it is on a computer, you want a font that will be readable even at a small size—likely something without too many frills and curls.
• Contrast – The same color no-no’s that you would avoid in normal web design should be avoided in mobile web design (ie, no yellow text on a white background), but with mobile design, take it one step further. Remember, when visitors are reading a mobile website they may be in the sun or in a poor lighting situation, so contrast is highly important. Good contrast is easy—a dark color on a white, or off-white background always works.

Typography is both an art and a science. It is not something that you can learn overnight either, because every website, page and job brings a brand new challenge. While there are no true rules that you MUST follow when it comes to the typography on your site, the basics above are a great place to look for inspiration. Just remember to check out your final product on a number of different devices to make sure you don’t have any unpleasant surprises!