Choosing the best website font sizes is one of the first steps when you start a new website project or you make a redesign. This is very important because font plays a huge role in your UX/UI design.
Why chooseing the website font sizes is so important?
You can consider your website as the online office of your business. No matter if you have a simple corporate website or a huge e-commerce one, you should definitely make your best to represent your business. services and products.
We know that the process of creating, managing, and upgrading the website is not so easy task and easily can become very time-consuming. When your online presence is big you can not make excuses but make your best.
Your website has many ways to show your business – pictures, texts, videos, blog posts. All of these parts must be in great harmony with the others if you want to look consistent and professional.
We all know the phrase “A picture is worth a thousand words”, but in the online world and business websites, in particular, is a must to choose the best words, not only pictures. It is very important to choose the best font sizes for your website because you want to look presentable on all devices!
How to begin with selecting the best website font sizes?
In this so important process, we will use one very helpful website: https://type-scale.com/
This website will help us a lot with how to choose not only the best website font sizes but also the line-height. Line height is important in the process of developing our website because it plays a huge role in the readability of our texts.
With a few east calculations, we will get the best website font sizes in no time. Let’s do it!
How to work with Type-Scale.com?
When you first open up https://type-scale.com/ you will see this field:
On the left side of your screen you will see a few options:
- Base size;
- Google Fonts;
- Preview Text.
This is where the magic happens. You need to fill these fields to get your results:
- Base size: enter the base font size of your project;
- Scale: choose the scale your fonts sizes will be applied to other font sizes of your project;
- Google Fonts: choose the font you want to use as a preview; If you can not find the one you are going to use in your original project, try to use the closest one;
- Weight: choose the font-weight: regular, semi-bold, bold, etc;
- Preview Text: here you can type some text for the preview.
How to work with Type-Scale.com?
The first thing is to choose the base font size. In our case study, we will start with 16px.
Then you need to decide the scale you want to use. The scale will calculate how bigger the fonts sizes will be in comparison to the base font size you have chosen.
The scale is totally up to you. Here for your decision comes the design you are going for. You have to decide the scale size according to the customers of the website you are working on. If your audience is older you may need to use a bigger scale.
In our demo, we are going to use a scale of Major Third – 1.250, font Poppins and weight of 400.
When you enter these values on the left, the other font sizes are automatically calculated.
Now you have the font sizes for all H-tags and your body font as well.
- H1 – 48.83px
- H2 – 39.06px
- H3 – 31.25px
- H4– 25.00px
- H5/H6 – 20px
- P– 16px
Calculating the line-height of the font is as important, as the font sizes. To calculate the line height for each font size, multiply the value of the font size with the value of the scale you have chosen (1.250 in our case).
- H1 – 48.83px * 1.250 = 61.03px
- H2 – 39.06px * 1.250 = 48.82px
- H3 – 31.25px * 1.250 = 39.06px
- H4– 25.00px * 1.250 = 31.25px
- H5/H6 – 20px * 1.250 = 25px
- P– 16px * 1.250 = 20px
These are the values for your desktop designs.
What about the mobile resolutions?
The easiest way is pretty simple: make your current H2 as H1 for mobile, your H3 for H2, and so on. I will merge the values for H4/H5/H6:
- H1 – 39.06px
- H2 – 31.25px
- H3– 25.00px
- H4/H5/H6 – 20px
- P– 16px
The line heights remain the same. For the really small text part of your design, you can use the first value after the base font: in our case, this is 12.80px(line height:16px).
We hope that this blog post is informative and helpful for your next web design!
1,785 total views, 3 views today