Typography in mobile design

For website design it is essential to consider how the website will be displayed on mobile devices. First of all, it concerns content readability – typography should receive special attention as it is a basement of web design. You can read more on this topic in article Web Design is 95% Typography by Oliver Reichenstein.

Mobile image from Shutterstock

Size

One of the most common problems connected with reading on mobile devices is too small font size. User has to continuously zoom in to read tiny text, which surely irritates him. Even for responsive websites the small font issue is quite widespread.

In fact, font size can change the website look and feel completely. Modular Scale Calculator is a calculator developed by Tim Brown allows you to choose the right font size for your website, including “golden ratio” (1:1.618).

Website example with font sizes proportion 16/24/72:

Contrast

Any text should contrast with the background color on both – mobile and desktop devices. This simple rule is frequently overlooked which results in red text on purple background or yellow on blue one.

Actually, there is even a special service, which helps check colors contrasts on the website
checkmycolours.com. Below you can see several websites with well-done content and background color contrast.

Spacing

Different devices have different screen sizes and sides proportion. During the markup stage it is important to remember that text is comfortable to read with enough space from borders and right line spacing. It is especially true for reading on mobile devices. Some examples:

Font selection

Choosing the font, which will be correctly displayed on any device and with any OS is quite challenging. You need to take into account what font will be rendered on different devices, for example:

This problem can be solved with special web-services: Web Font SpecimenTypecast app and Typekit’s font browser. Sometimes it is worthwhile to use different fonts for different screen sizes. A List Apart applies this technique.

Besides, it is not worth to use non-standard fonts in inappropriate places. For example, this is how League Script looks like – it is hardly could be read.

Adaptive design

All mentioned above is important to take into account in adaptive design. Especial attention should be paid to font size, spacing line length along with testing the final markup version.

Changing the font size

Most of the websites use px and em in order to specify the font size. Em is more preferable, because allows the user to change the font size right in the browser. However, there is one drawback – in em the size depends on font size of initial element. So it is better to use rem: font size will be depended on root element – html.

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
 

Example with media queries:

@media (max-width: 640px) { body {font-size:1.2rem;} }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
 

Spacing and line length

According to research, conducted by Baymard Institute, the optimal line length for comfortable reading is from 50 to 75 symbols. Make such proportion valid for any device is not easy at all. For example, default font size on the device is 16 px, but we would like it to be 20 px. It means that the font should be 1.25 rem.  Then text block with width of 675 px will fit into the 60-character line:

@media (min-width: 950px) { .container {width:675px;} }

This way you can write containers for devices of any size. For better reading experience on big screens you can also break the content into two columns.

@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }

Text of 1140 px width will be divided into two columns.

Quality mobile typography examples

via

Leave a Reply

avatar
  Subscribe  
Notify of

Recent posts

SEO Case Study: How to get a niche business in the top of the search results using relevant high-frequency queries

January 20, 2021

Promoting a niche business can sometimes be a challenge. When deploying your forces on the SEO battlefield, it’s extremely important not only to conduct an in-depth competitor analysis but carefully define the requests that are the target in your particular niche. Then come internal and external optimisation, and a number of actions required to improve Continue reading >

How to quadruple website traffic in the real estate niche in 8 months | Case Study

December 21, 2020

Marketing in the real estate niche has certain peculiarities. In this article, we share the case of Kampas, a Lithuanian online business and explain how SEO assets can help to increase visibility in the search results and quadruple the organic traffic! Check the whole story of cooperation on our website. Client Kampas.lt is a real Continue reading >

The future is here: a detailed overview of Google Analytics 4

December 18, 2020

The year 2020, among other things, has brought to the world the long-awaited Google Analytics 4, which is now officially released and available worldwide. What are the key changes and how Google Analytics 4 differs from Universal Analytics? Who will benefit from the transition to the new data model and how to get started with Continue reading >

How to enter a new market using PPC advertising | Case Study

December 1, 2020

How to enter a new market? This is the question lots of retailers who successfully promoted their products within certain regions frequently ask. Marketers tend to believe that display advertising is the easiest way to market a product when entering a new market. In this article, we share the case of an international player and Continue reading >

Let's get the ball rolling

Please fill in this short form and we will be in touch with you soon

For any questions [email protected]

UK | USA | EST

+44 (0) 20 313 766 81
+44 7852 537715

Lincoln
The Terrace AT5,
Grantham Street,
LN2 1BD

+1 347 809 34 86

Las Vegas
6920 S. CIMARRON RD.,
Suite 100,
NV 89113

Tallinn
Roosikrantsi 2-K230,
Kesklinna linnaosa,
Harju maakond,
Tallinn 10119

CEE Ecommerce Report 2019

Based on the analytics data of 292 websites

enter correct name, please
enter correct e-mail, please

Typography in mobile design

0
start now

Start now