Communication plays a vital role in design. Whether you design sites or mobile apps, your products have to clearly communicate their intent and purpose. The purpose of text on your site or in app is to establish a clear connection between the app and user and to help your users accomplish their goals. And typography plays a vital role in this interaction.
But how do you choose the right type for a site or app? Unfortunately, there are a lot of conflicting opinions out there about typography for web and mobile, and there isn’t one strict set of rules that apply in every case. However, there are several things you can do to make sure the fonts you choose for your site or app are working with you and your users, not against you.
The size and layout of your text can make a huge impact on the experience of reading something on screen. It takes the user much longer to process smaller text, small leading and paddings. As result, the users are skipping most of the information. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.
Two of the most important considerations when designing type for mobile devices are size and space. Type must be large enough to read easily and there should be enough space between lines so that text does not feel cramped in the small space.
Having the right amount of characters on each line and proper font size is key to the readability of your text. If the user can’t read it, the design does not work. A good rule of thumb is to use 30–40 characters per line for mobile.
Below is an example of two sites viewed on a mobile device. The first one uses 50–75 characters per line (optimum number of characters per line for print and desktop), while the second one uses the optimal 30–40 characters.
When it comes to small screens, space is a key consideration. Good spacing aids readability. By adding a little space to text — both between lines and in the margins — you are helping users better interact with the words. A good place to start is in the 10 to 20 percent range. You may also consider using paragraph spacing as well since graphs may look longer on smaller screens. This additional space gives readers the perception that text isn’t too dense and feels easier to read.
You should use color and contrast to help users see and interpret your text content. There are two schools of thought around text color and readability:
One says that higher contrast is better, and provide black on white combination as a prove for this statement.
The other says too much contrast is actually harder on the eyes, because higher contrast can cause more eye fatigue over long periods of time. Thus, shade of grey is more accessible.
In general, the right amount of contrast is a tricky thing. Because of the variation between screens, a color contrast that seems good enough on the designer’s monitor could appear much different on the user’s screen. But it’s especially important have enough contrast on mobile: users might be outdoors with low contrast on the screen because of lighting.