How to choose the right font sizes

A manual of web font sizes

Maryam

Follow

Published in

Bootcamp

4 min readAug 8, 2022

--

Have you also struggled when choosing font sizes for different screens?
I recently came across this question from newbies:

How to choose the right font sizes for my design projects?

Well, so I thought to post a compiled guide here so that it’ll be helpful for all the newbie designers to get started with the right font sizes. However, according to different screens and font families, the rules might need to alter based on respective detailed guides (Links to each guide will be attached).

Choose the right screen size first

The first thing is to get the right screen size as the font sizes are mainly based on the screen sizes. We can’t expect a user to see 42pt heading on a mobile app right?

So for a base start, it’s good to use small sizes and later things can progress based on the screen size.

For Desktops: Use the standard 1440 x 1024 px screen size
For Tablets: Use the 1024 x 768 px screen size as half of the users use this screen size.
For Mobiles: You need to consider 3 categories
- For iPhone 8: Use 375 x 667 px
- For iPhone Pro: Use 375 x 812 px
- For Android: Use 360 x 640 px

This is an image of base screen sizes for different platforms. — Base screen sizes

So after setting the right screen size for your designs, let’s use the correct font sizes in it.

Desktop

When it comes to website or web-app typography for desktops we need to understand our page type. There are two types of web pages:

Text-heavy pages: The primary purpose of these types of pages is to share textual information with users. They are mainly articles, blogs, news, terms pages, etc.

For text-heavy pages, titles should be above 20+ px and body text can be around 18–16px. — Text-heavy web page sizes

Interaction-heavy pages: The primary purpose of these pages is to get the action from the users’ side. This type of page also consists of several types of important and least important texts. The page mainly involves the action items like clicking, selecting, hovering, searching, etc.
These type of pages also requires constant modification based on the different type of cases.

This table has all the based sizes that can be used in interaction-heavy pages. for titles headings can be 96, 60, 48, 34, 24, 20px for body text 16, 14, 12, 10px. — Interaction-heavy web page sizes

Tablets

Generally, the font sizes used on iPads and iPhones are the same. In tablet, we might need some bigger sizes for heading because of the big canvas but the rest goes the same way. The below table can provide a good baseline to start choosing font size for a tablet screen.

This table has all the based sizes that can be used on iPad screens. for titles headings can be 34, 28, 22, 20, 17pt for body text 17, 16, 15, 12, 11pt. — IOS sizes for iPad

iPhone (IOS)

A quick summary of font sizes for the iPhone app; Apple has a default font SF Pro; these numbers can work for SF Pro or similar fonts.

iPhone (default) sizes:

This table has all the based sizes that can be used on the iPhone default screen. For titles headings can be 34, 17pt for body text 17, 15, 13, 10pt. — IOS sizes for iPhone

iPhone (small) sizes:

This table has all the based sizes that can be used on the iPhone’s small screen. For titles headings can be 32, 17pt for body text 14, 12, 11, 10pt. — IOS sizes for small iPhone

Android

The below table consists of all the baseline sizes that can be used while designing android apps. The sizes are based on the Roboto and other similar fonts. However, sizes might need to alter for distinct fonts.

Some points to consider:

How many fonts to use?: Never use too many font sizes; start with only 4 sizes in total.
Header font size: Use it for headings and section titles. In rare cases where you have a title and sub-title, you might need 2 sizes for header font.
Body font-size: This will be the default font size; that can be used for all the body text on the page including; text, text boxes, dropdowns, buttons, menus, etc.
Secondary font size: This font size needs to be about 2pt smaller than your default primary font size, can be used for less important details like captions.
Tertiary font size: This font size needs to be about 1pt smaller than your secondary font size.
pt, px, sp? What is all this: Don’t get confused with any of these for now you will learn all these with time. In the end, you just need to enter the number in your software font size box when designing.

So that’s the end. I hope this guide will give you a basic idea of how to get started with the right font sizes for your next design project.

Resources and other reading material: