Content is the most important element of your website. With a wide range of mobile devices available to people, your websites and apps must be readable on all. To maintain the readability of your content, you need to consider the fonts you choose, size, contrast and line length. How do you use Mobile Design Typography to make your content responsive and readable?
Fonts
Not all fonts look good on a small screen. Display fonts like script fonts may look good on a desktop screen, but on mobile they can shrink down too small to read. A script font like League Font is fine for the desktop, but on mobile it can be unreadable.
What are your options?
You could increase the size of the font. At a larger size, your chosen font may be look better. Or you could replace the font with one that is readable on small devices. You have to decide if you really need to use this font in your design.
Size
Size is also important. Too small and your content is unreadable. People leave sites if they can’t read it on mobile. If you choose a size that it too large, it could dominate the content. It could take up so much space that you end up scrolling constantly while reading the page. You have to find a size that works well at that size.
Line Length
How long should a single line of text be? It depends. Readability is determined by the font, character and word spacing and the word lengths. Even the device that you are using can affect readability. A general guideline is 9 – 12 words per line. 9 – 12 words is a comfortable range for people to read. Line Length and Column Widths explains why your text should be about 9 -12 words long.
Contrast
What is contrast? Contrast is how every element in a design which includes font, size, color, line length and images works to create a good user experience. The easiest to learn is color. How do your color choices affect the design? With mobile design, you need to also think about size, font, line length, position and shapes. On Web Designer Depot, John O’Nolan explains how to fully understand contrast in design. He shows you how to use them for a better user experience.
Summary
Your content is an important element of your design, especially on mobile. When developing for mobile, consider how the font type, size, line length and contrast can effect the readability of your site. If it isn’t readable, your visitors will leave. Keep them on your site by focusing on how fonts look on mobile.
For more information on Mobile Typography, check out these articles: