A responsive website is a dream of every website owner and if your website is not responsive or people are not bothering about it, it would be a great loss. 

One might think here, what makes the site not responsive or what should be done in order to make it noticed among people. We all know that fonts play an essential role in this regard.

If you are aware of how to make a font selection, you will lead in this place without any doubt. I have seen many questions regarding the font size so I thought why not to make a complete guide to properly define font size and how the designer should pick it. Because while creating a new website there are many aspects that we should keep in mind. From web development to giving it a professional design, everything has its own importance. 

Same as this font size has its own importance. Without wasting further time, Let’s move ahead and discuss the points in detail.

Mobile Web Typography

I have divided this guide into 2 basic elements i.e., mobile web typography and desktop web typography. We all are familiar that your maximum users visit your site from mobiles so it is more important to make it responsive. 

There is no definite rule applied in it yet you have to consider a few notable things in order to avoid future concerns. Let’s start with Mobile Typography and see which things to avoid and which things to pick.

Body Font Size

Let’s start from a body font size where you have to define the important message for which you have written a particular blog or an article. It has a specific meaning so the body should be legible to make people understand. I would recommend you to keep the body size 16px. Here another confusion arises that you can’t go for 16px for every font type.

There are a few typefaces where 16px would go best but on the other hand, there are some typefaces where 16px will make the text hard to read. Now what should be done here? Suppose you are using Helvetica font and you start from 16px size, so here if the size is appropriate and easy to read then go for it but if you find it a bit hard to read, you can easily adjust its size or consider using another one which suits your body text.

Text Input Size

It is another important part where you should be anxious about the size. There is no specified rule still I would recommend you to go for the previous advice and start from 16px. However, one thing to consider here is, your text input size is not that small that the user has to zoom in in order to understand. Have you ever experienced that you had to zoom the text box of a particular site? Don’t make the same mistake.

Secondary Text Size

Now comes the secondary font that you use on your website and mainly for the captions or labels. Always make sure that your secondary font size is 2 times smaller than your paragraph text size so that people can easily acknowledge the difference. For instance, if you have set the paragraph text 16px then for secondary text size, go for 14px.

If you choose 15px, it will not make any difference so better to take 2 steps behind. Furthermore, sometimes you highlight or style a particular text for better communication or in order to attract the user, make it highlight in a light shade color.

Look For your Design from Real Device

The major issue occurs when you are setting your website for mobile users and viewing the site from Laptop. Your laptop and mobile feel are different so can’t make this blunder and expect no issue in the future. If you are setting all the specifications for mobile users, view your website from mobile where you will get the real idea whether it is appropriate or not.

Desktop Web Typography

Now comes another essential element is Desktop web Typography that is equally important to be considered. When we talk about Desktop web typography, we divide the designs into 2 types i.e Text-heavy pages and Interaction-heavy pages. Let’s talk about both in detail.

Text-Heavy Pages

It comprises the most important pages i.e Blogs, Articles, News, etc. These pages are the main reason why the user is on your website. If we talk about interaction, they are not very interactive. However, for such pages, you need to set a large font size so that people won’t find it hard to read. Let’s start from 16px that is the ideal font size. However, in this case, 16px won’t be ideal as it will make the text hard to read.

If we consider 18px, it would be better than 16 but if we move a little further and go for 20px, you might consider it extra-large yet it is the best font size for Text-heavy pages.

Interaction Heavy Pages

It involves all the clicking and searching. Hence, for Interaction heavy pages, a small size would be appropriate but it also depends on the amount of data. It all depends on the data you are showing to the user. Sometimes 18px size would be extremely large and awkward and 13 px would be the best choice to make. Choose a small size for less important things and go for a bit large size for more important things.

The simplest way is to experiment with your chosen font size from different devices and make sure it is readable and understandable everywhere. It is how you can get a better idea of whether to go for a particular text size or not.

Final Words

A Responsive website is a goal and dream of everyone but are you taking all the steps to make it worth using? Fonts are the main elements of every website so taking them for granted can cost you. Apart from suitable font selection, you should also be concerned about the font size that will make your website or content legible.

I have enlisted those important points regarding font size that will make your website responsive. I hope this guide will be informative for you in the future and it will help you to set the appropriate font size for your texts.

Words from the Author

Hi, I’m Sofia Kenin, a typography designer and professional article writer. I have written a number of guides on font and typography and have already helped thousands of people to choose the right fonts for their businesses and websites to make them more user friendly and easy to understand. I love to play tennis and boating is my favorite hobby.

Develop better websites with zipBoard

Book a personalized demo to learn more about zipBoard!

Related Post