Should your font size change based on size and orientation of the device?

Question

I am created a cross platform app and I was wondering if and when fonts should scale based on the size of the screen. Also, I was wondering if the scales of fonts should change based on the orientation of the device or on very large/very wide devices.

For example, I have one screen which has the text as the main subject of the screen. This font looks a bit odd on different devices when it doesn't scale.

On buttons, however, the font looks fine without scaling.

Also, there are certain titles that look fine with rotations and others that look atrocious.

Are there any guidelines about which, if any bits of text, should scale and based on what (ppi, size of phone)? I know the common web standard is rem, but that doesn't exist in mobile in certain cases (including mine).

Answer 1

The short answer: Yes you should probably change text sizes based on the device.

But there are no hard and fast rules. I'd move away from subjective arguments like "it looks bad" and start empathizing with your specific audience and their needs.

Is your audience elderly? Will they use this on a phone? Many of them struggle with small type in general so you should account for that and make the text much larger.

Tablets are often used in more relaxed situations often with lower ambient light. Do you provide enough contrast, line height, etc to make content more legible? The best way to find out is to try using what you've created in those situations.

Is the screen huge? Most studies show that between 50 and 75 characters is the optimal line length before something should wrap. Can you increase the type size to improve legibility and take up appropriate space? There's a good chance you can.

However, Only you can determine the goals of what you're building and your ideal audiences needs. Do what makes sense for them.

Answer 2

For better readability you need to change font-size based on screen ppi and screen size. But I don't recommend to change font-sizes on orientation. It's odd to change text size when device rotated to landscape.

If you use 'em' or 'rem' unit to implement for web or 'sp' for android devices this is handled by browser or OS. But in designing process because we haven't these responsive units in Adobe XD or Sketch you need to calculate correct pixel or point size and use differently in Desktop vs Mobile artboards. for example base font-size in adobe XD mobile could be 14, adobe XD desktop 18 and web 16px or better 1em.

I also recommend you to read this section of Material Design guideline: Material Design typography

Material design is a design system for all devices (web, android, iOS, ...) so I think recommended solution in guideline is the right answer for you! Hope it helps:)