1

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).

2

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.

  • Also consider the effects the text size has on layout. This is related to the width of the body text as Bryce mentioned, which optimizes the font size to available space, but you need to consider how you can optimize layout to get an appropriately large font size. – Sardtok Nov 19 '19 at 14:09
0

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:)

  • I'm a big fan of material design and an avid Android user, but wouldn't material design look odd on an iPhone? I love the design language and I understand that it can be used cross platform, but should it? An iPhone user may just see it as distinctly Android. – Byte11 Nov 19 '19 at 15:55
  • I am not sure about Swift, but in web design there is no issue about that. I used Material Design typography guideline in my current project. Designed in Adobe XD and developed using Vuetify and tested on iPhone X. Actually iPhone X is the only device I test during development. Everything looks good:) – Hossein Malakalaie Nov 21 '19 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.