Web Interface Handbook / Typography

Responsive Typography

01 Make the heading hierarchy a little weaker

It's always a good idea to reduce the size of big titles on small screens. The heading sizes on mobile don't have the same importance and effect as on larger screens. In addition, they take up too much space sometimes, which is not helpful for good content reading speed.

Small screens will need a weaker hierarchy than large screens.

For big screens, it's not important to make headings larger than for normal screen sizes. Users interact with these screens close enough that if the title is too big, they must lean back to read it.

You need to test and verify your choices because too much depends on the interface's context and the information in it. Generally, it's better to rely on testing in practice than automatically increasing all text or heading sizes by a specific ratio on large screens. It's better to look at each heading individually and how comfortable it is to read on the big screen and draw conclusions.

02 Pay more attention to navigation

Navigation on small screens is essential. It's worth remembering that the clickable area on mobile should be larger than on desktop. So it's a good idea to increase menu links and distances between items.

Insufficient font size and spacing between items, a frequent problem on small screens. You can safely increase the font size for menus and especially the distance for easy tap.

There are no exact rules or magic ratios for all possible screens in responsive typography. Only practical testing can provide answers and insight into how to do things better.