How-to 10 min read February 3, 2021

Which fonts, buttons and colors to use in the mobile version of a website

For mobile users' convenience, it's necessary to make links and buttons large enough on the website. It is also important to choose the right font size and consider the line spacing for the mobile website.

What is a mobile typography

Mobile typography is a branch of the art of typography, dedicated to the set of rules for the most convenient perception of printed information on portable devices.

In the example below, the mobile version of the website is displayed on the left with easy to read fonts, and all information is placed within the screen width.

The text on the right side is too small; an unsuccessful font for promo offer is used. There is a horizontal scrollbar since the website is not adapted for mobile devices:
Mobile typography
The website content on mobile devices should be displayed in such a way as to ensure easy loading, clarity, and readability. At the same time, it should have easy-to-use features so that the user can carry out all the necessary actions on a smartphone just like he'd do it on his PC.

In the example on the left, all conversion buttons are located in a visible place; they are quite large. The website on the right uses too small fonts and non-responsive design:
Layout for mobile devices
The basic principle of mobile web design is to provide the user with the necessary functionality without overloading him with unnecessary information and calls to action. The mobile version website content should be easy to read through so that you can get back to some point and read it in detail.

The example on the left uses a readable font for the main text, the length of the line, and the division into paragraphs facilitate easy perception of the material. The text on the right is not divided into paragraphs; the font is too small. It's very difficult to read such content using a mobile device:
Website adaptation for mobile devices
You need to pay attention to the following elements while developing a mobile version of a website.

Font size

Recommendations differ depending on the operating system used. However, in any case, the font size should be easy to read:
Font size for mobile devices
Experts recommend to use the following font ranges:

  • for user input and body text: at least 16 px;
  • for less important text: 14 px;
  • line spacing: 24 px.

Since everyone has different devices, eyesight, and viewing conditions, it's worth considering that you still won't be able to make a single ideal option. Therefore, we need a sweet spot in the middle which can be determined by testing. Ask colleagues or users to go to the website on their device and give feedback.

Also, depending on the topic of the website, it is worthwhile to understand the conditions under which people read published articles, for example, in public transport or while heading to work on foot. You can see this in the analytics (viewing time). If the main traffic comes in the mornings and evenings, it's clear that people visit the website on their way to work and back.

Find more detailed instructions from the information posted on Material Design.

Empty space

There must be spaces between lines, paragraphs, letters, and words to easily read the text:
Line spacing for mobile users

Lack of decorative elements

Fonts must be selected without unnecessary decorative elements that can make reading difficult on a small screen. You should also remember that certain operating systems use different font families. For example, Apple traditionally uses San Francisco fonts:
Font family for mobile devices

Line length

It is preferable to use short lines, 30-40 characters would be ideal:
Optimal line length for mobile visitors

Color combinations

The mobile version of a website must have correctly selected color combinations that contribute to the perception of information. Monochrome color combinations are used most often:
Color scheme for mobile devices
You can check the contrast of color combinations on the website using the checkmycolours online service:
Color combinations testing checkmycolours
This service gives a detailed report on errors that make the labels illegible due to incorrectly selected background colors and fonts:
Site color scheme test online
You can instantly change the color combinations and check the result in the service.


For mobile devices, the same-level headings are best suited to divide information into semantic blocks without a complex hierarchy. This structure is appropriate for quick reading and searching for the necessary information:
Headings in the text for mobile devices

How to see what devices are used to visiting your website

Before you understand how the content on the site should look like on mobile devices, you should analyze from which devices users access it. You can see this in Google Analytics, "Audience" - "Mobile" - "Devices":
Mobile devices report in Google Analytics
Besides models, you can also see the screen resolution of the devices used:
Screen resolution report in Google Analytics
You can check how your site looks on these devices in Google Chrome settings in the developer mode. Go to settings, then select "More tools" - "Developer Tools":
Developer tools in Google Chrome
Here you can select the desired device or specify the resolution:
How to check site mapping on different devices

How to set the font size for mobile devices in CSS

Media queries are special codes that allow you to prescribe display rules for certain ranges of screen resolutions in CSS.

The font size for mobile devices should make it easy to use the touch screen without causing inconvenience when clicking the links in the text. It is also necessary to choose a suitable line spacing to ensure the readability of the text.

You can place media queries in the following ways:

  • inside the HTML page using the <style> tag. In this example, a font of 16 pixels is set for mobile devices with a screen width of up to 500px:
@media (max-width: 500px) {
body { font-size: 16px; } 
  • in an external CSS stylesheet this option is preferable:
@media (max-width: 500px) {
body { font-size: 16px; } 
You can also add a line-height value that defines line spacing. You can set it as a percentage, pixels, points, or use multipliers or multiply the current text size. For example, a value of 2 in this example means that double line spacing is set for mobile devices:
@media (max-width: 600px) {
 body {
    line-height: 2;

An appropriate size of the buttons for mobile version websites

The main requirement for the buttons in the mobile version is the size that allows them to be easily pressed on the touch screen. The research showed that the most preferred size of buttons with icons for mobile devices is within the range from 42 to 72 pixels (11-19mm). The best option is 60px (16mm):
Buttons size on the site for mobile users
If the target audience of the site is older people, then it's better to use the maximum size of the specified range, i.e., 72px.

Using different sizes, you can indicate the degree of priority of the button. For example, use buttons with a maximum priority of 72px and a minimum priority of 42 px. You should also set the appropriate distance between the buttons, which is calculated based on their size:

  • 12-24px (10-13mm) for large buttons;

  • 24-36px (6-10mm) for medium-size buttons;

  • 36-48px (3-6mm) for small buttons.

For text buttons, similar height standards (42-72px) are used, only the width will be different. The space between these buttons for optimal visual separation should be at least 12px.

Besides, you should place the conversion buttons in the middle of the screen so that they are visible:
Links size for mobile devices

What fonts to use for the mobile version

Experts recommend using standard system fonts for body text and buttons. For example, Book Antiqua:
Book Antiqua font for mobile users
Another popular font family, distinguished by its concise and legible style is Helvetica:
Helvetica font for mobile visitors
To emphasize the individual style of the company, it is worth highlighting the headings with branded fonts, for example, Avenir Next:
Avenir Next font for mobile visitors
The Geogrotesque font is also suitable for headings and highlighting large numbers:
Geogrotesque font for mobile visitors
You should not use more than three fonts on one page in the mobile version, because it can slow down the download speed.


In the mobile version, the content should be presented in a convenient form that facilitates quick reading and easy use of all the necessary functions.
To avoid problems with usability, important conversion buttons should be located in the most visible place and have easy to click size.
For the mobile version, fonts should be legible and readable. The minimum size of the main text is 16px.
Standard system fonts should be used for the body text, while headings can be highlighted with more creative branded fonts.
The size of buttons on mobile devices should be between 42 and 72 pixels. In this case, the buttons with the highest priority can be larger than the others.
This article is a part of our SEO training resources of Serpstat academy
SEO Courses in Serpstat
Learn how search engines index and rank web pages, giving you the foundational knowledge needed to improve your website's visibility.
Watch the video course

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

The article has already been rated by 2 people on average 5 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Discover More SEO Tools

Tools for Keywords

Keywords Research Tools – uncover untapped potential in your niche

Serpstat Features

SERP SEO Tool – the ultimate solution for website optimization

Keyword Difficulty Tool

Stay ahead of the competition and dominate your niche with our keywords difficulty tool

Check Page for SEO

On-page SEO checker – identify technical issues, optimize and drive more traffic to your website

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.




We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Open support chat
mail pocket flipboard Messenger telegramm