<aside> ℹ️ When you design an interface that will work on different screens, you should consider whether the typography will change depending on the size of the screen.

</aside>

On the whole, all typography guidelines remain the same on small or large screens. Only a few changes may be necessary depending on the context and how we interact with a specific screen.

It's always a good idea to reduce the size of 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.

Sometimes the heading size should be reduced significantly on small screens.

Small screens do not require a strong hierarchy of headings because usually only part of the text and the heading itself is visible, and everything else is hidden by scrolling. So there's no point in expressing text structure with headings.

Small screens will need a weaker hierarchy than large screens.

For big screens, it's not very 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.

The headings change depending on the screen size at ghost.org, and on a large screen, they are too gigantic. You have to squeeze the browser window to read comfortably.

As a result, large headings and text on big screens make readability worse. And this applies to almost all situations where the screen is huge. For example, users interact with a giant touch panel at arm's length, which is close enough and doesn't require any special effort to enlarge headings.

That said, of course, 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 and 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.

It is better not to shift lists and quotes on small screens to save horizontal space.

Usually quotes and lists are left indented. On mobile it is better to make it zero for them. On a small screen, horizontal space is significant and it is better to use it sparingly.