|How-to||– 10 min read –||October 17, 2019|
Which fonts, buttons and colors to use in the mobile version of a website
What is a mobile typography
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:
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:
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:
- for user input and body text: at least 16 px;
- for less important text: 14 px;
- line spacing: 24 px.
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 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.
Lack of decorative elements
How to see what devices are used to visiting your website
How to set the font size for mobile devices 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:
- in an external CSS stylesheet this option is preferable:
An appropriate size of the buttons for mobile version websites
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 clearly visible:
What fonts to use for the mobile version
|Run Site Audit|
Learn how to get the most out of Serpstat
Want to get a personal demo, trial period or bunch of successful use cases?
Send a request and our expert will contact you ;)
Cases, lifehacks, researches and useful articles
Don’t you have time to follow the news? No worries!
Our editor Stacy will choose articles that will definitely help you with your work. Join our cozy community :)