Imagine going through all that stress just to develop a mind-blowing site only to find out that it does not look just as attractive on mobile devices as with other screen types. In the course of this article, we will discuss a factor that contributes to this, namely; font size.
Mobile-friendly sites are designated to function on mobile devices. So to stay on the safe side, here is a guideline on how you should arrange your site's font so it comes out as desired on both desktop and mobile devices.
But first, let us consider what font size is mobile-friendly.
Mobile friendly font sizes
In designing your site's font, you need to take note of the following parameters
Points (pt)
EMs (em)
Pixels (px)
Percentages (%)
Not all sites use themes that support these parameters, however, if your site does, the following estimates might help. Among the 28 rough estimates of font sizes, some standard conversions are;
Extra small - 7.5pt 10px 0.625em and 62.5%
Small - 10pt 13px 0.8em and 80%
Medium - 12pt 16px 1em and 100%
Large - 13.5pt 18px 1.125em and 112.5%
Extra large - 18pt 24px 1.5em and 150%
Extra extra large - 24pt 32px 2em and 200%
You could decide to make your fonts as big as 36pt 48px 3em and 300%. However, to get the best outlook for your mobile site, Google has recommended something standard. According to Google, your site's base text should be a minimum of 16px. Of course, you could always explore and find which size suits your site's needs best. You can settle for 17px or 18px but in all you do, 16px should be the minimum.
How do Mobile-friendly Font sizes boost SEO?
If your site was originally designed to be a desktop site, here are a few reasons why you should make your site more mobile-friendly.
The use of mobile devices by internet users has quickly become more popular over the years. Unlike before when most persons used desktops to access the net, more focus is on mobile devices now. Activities such as online shopping are now done mostly with mobile phones.
40 percent of individuals make searches only through smartphones.
Cost per click (CPC) on mobile devices costs less than desktops by 24 percent and 40 percent more click through rates (CTR). In turn, mobile-friendly sites which had lesser SEO ranking than responsive sites now have better SEO ranking
How can you make your font size mobile-friendly for SEO?
If you had someone design your site for you, sending an email to the theme creators of your site would be best. In your email, you can include all necessary adjustments you would like them to make on the size of fonts of your site. You could decide to call to make inquiries about the theme your site is currently using and carry out the rest of the process yourself.
You do not necessarily have to contact whoever originally designed the theme of your site. In cases where you lost contact with those who originally worked on your site, or you need a new touch to your site, you could get the help of entirely different professionals.
If you designed your site on your own and would also like to customize it yourself, you need to first check if your site theme has customization options. If it does, click on appearance and then “customize”. Here, you can find and make use of the “Additional CSS” option. For example, you can make your header (H1) 24px and your body text 17px.
To ensure the legibility of your site's text across various devices, you should try the following;
1. Research for mobile themes- If you use Shopify/WordPress, or any other platform, finding a mobile theme would not be a problem. You simply have to purchase a theme that would give your site a responsive interface, that is, a theme that would automatically adjust your site to suit viewers' devices. Before you decide on which theme to apply, you should do well to read what fellow web designers with some form of experience with the theme/template have to say about it. You could also check what the theme looks like on an actual site. With some themes, you can do this by clicking on the “Inspect Element” option in the live demo.
2. Media Queries- The text size of a site depends on the media query declared for various screen sizes. With reference to the site's CSS file, you will be able to customize the size of your font across available devices in the file. Media query can be on the minimum and maximum height as well as minimum and maximum width.
CSS can be used:
If the browser is in portrait or landscape mode.
When the device browser ranges between a font size of 0px and 640px; and
When the font size of the browser ranges between sizes of 640px and above.
However, @media is used in situations where the browser font size ranges between 500px-600px.
NOTE: Applying several fonts with various sizes on the same page of your site does the opposite of making it look attractive. Doing this gives your site a messy layout and makes it difficult to navigate.
3. Font Spacing- In designing your font size, ensure that there is sufficient space between each paragraph and line. This is to prevent your site text from looking cramped on certain devices. For links on your webpage, you should consider making their size and spacing between them much bigger. By doing this you make it easier for people to click on the links.
4. Employ responsive designs- Use mobile-friendly fonts as outlined earlier. Additionally, you could apply the readability theory. According to the readability theory, a standard column should lie somewhere between 8-10 words per line. With this knowledge, whenever the text width per column exceeds 10 words you should consider breaking the sentence up. You must also put your font's base size into consideration. The base size is important because individuals will access your site's content across various devices and your font has to appear the same notwithstanding the device size.
5. Make a new version of your site- If you do not want to go through the stress of tweaking your site's font, you could design a new site for mobile devices.
Conclusion
If you are still creating strictly desktop sites, then it just might be time to let go of that tedious practice and start creating responsive sites instead. This more effective alternative allows the content of your site to automatically fill the device of viewers. As seen in this article, making your site responsive and mobile-friendly by using the right font sizes is an easy strategy to help boost your SEO. It might appear not to have much importance but it actually does its bit in optimizing your site and helping you reach your online visibility goals. No doubt, your website’s font size will help you rank on Google, it all begins with retaining your audience on your site. And that is what your ultimate goal should be – your audience.