24

While designing a mobile app or mobile responsive site, what should be the minimum font size that wouldn't affect user's eye sight?

Improve this question
1

5 Answers 5

Reset to default
15

For mobile layouts, font sizes are typically set in EMs rather than pixels so that the font size is relative, ready to respond to different screen parameters. 16px is ideal font-size below this font-size would be challenging for user to read.

Improve this answer
5
  • 5
    Which user? Me in my 60s or me at age 18? Actually, I have no problem reading text down to 13px. On which device?
    – Rob
    Commented Dec 22, 2016 at 13:12
  • 4
    @Rob As long as you don't decide to join the pretentious "disable pinch-to-zoom website" club then ALL of your users will be able to use your site on any device imaginable.
    – MonkeyZeus
    Commented Dec 22, 2016 at 14:13
  • @MonkeyZeus And what font size is that?
    – Rob
    Commented Dec 22, 2016 at 14:18
  • 1
    Specifically for web, it's usually fine to use px since most mobile browsers will set a pixel ratio such that each CSS px scales to approximately 96 DPI viewed at arm's length.
    – Bob
    Commented Dec 22, 2016 at 23:30
  • 1
    "em" was never widely adopted that's why browser developers changed the zoom functionality to also resize px values. Using px is fine nowadays.
    – Christian Strempfer
    Commented Dec 26, 2016 at 10:31
10

W3Recommendation on font-size has a note that says (emphasis mine):

To preserve readability, a UA applying these guidelines should nevertheless avoid creating font-size resulting in less than 9 pixels per EM unit on a computer display.

12 pixels, according to this article from "think with Google" on Mobile.

  • Pick the right font. Your minimum font size should be 12 pixels; anything smaller and users will be squinting. Be sure to choose a typeface that is clean and easy to read. If possible, avoid use of image-based text.

12sp, which is used for captions, according to Material design typography section. This is the minimum font-size they propose (for both desktop or mobile). (See this question for more info on sp units).

Type sizes are specified with sp (scaleable pixels) to enable large type modes for accessibility.

enter image description here

Note that this is recommended for English and English-like scripts (Latin, Greek, and Cyrillic). For South and Southeast Asian and Middle Eastern languages, including Arabic, Hindi, and Thai:

Font size: For Title through Caption styles, font size is 1px larger than that specified for English. For styles larger than Title, the English type size is suitable.

Source: https://material.io/guidelines/style/typography.html

Improve this answer
3
  • Hi Alvaro The unit they proposed are not px it is SP(Scalable Pixel) Thanks
    – jyo
    Commented Dec 22, 2016 at 9:45
  • I'm reading your post on my phone and the 12sp line is unreadable. Maybe it's more representative of the actual sizes on a desktop, though.
    – Kat
    Commented Dec 23, 2016 at 20:09
  • 2
    @Kat the image you see here is probably resized. This is supposed to be the minimum, 14sp for body is supposed to be readable.
    – Alvaro
    Commented Dec 23, 2016 at 20:11
4

There is no definite minimum it depends on the user. (especially if you are concerned with accessibility)

Some users will need to increase the font size (and the size they increase to will depend on external environmental factors e.g. are they wearing their spectacles or not)

So you should set a size and allow the user to change it up or down as they wish. Even better allow the user to set a size and remember it for their next use - they still might change it but it is more likely to be correct than any size the developer would choose.

This is why you should use relative font size changes if more than one font size so use EM as the size as in NB4's answer

Improve this answer
3

It depends on the font. The default browser font of 16px/1em/100% is good for most cases according to The Google Developer's Insights page on fonts(emphasis mine):

By default, the browser will display each font at 16px (CSS pixels). This is a good default for most cases, but may need to be adjusted for a specific font - i.e. the default size can be set lower or higher to accommodate for the different properties of the font. Then, once the default size is set, larger and smaller fonts should be defined relative to the default size using pixels. These can then be used to adjust size of the text for primary, secondary, and other type of content on the page.

Typecast's blog post on a more modern scale for web typography also suggests using 16px (1em or 100%) as the base:

body {
  font-size: 100%;
}

The post also has a suggested scale for headers and the like.

Improve this answer
2

This depends to the highest degree on two parameters: The font you use and the device that the app will be viewed on.

  1. Font: Different fonts have different characteristics when it comes to readability. One basic rule controlling that is the x-height of the font, but there are other factors, too.

  2. Device: The main factors are: At what distance is the user viewing the device, and what is it's pixel density. Rule of thumb: The closer the device will probably be and the higher the pixel density the smaller should the font be.

    A book-like device with a theoretical 300 dpi held closely might actually ask for fonts as small as 10px or 11px.

    On the other end of the spectrum a TV screen with 90dpi, that might sit across the hallway, certainly needs something more close to 18px or higher.

At the end of the day, the answer is: It depends. Take your app, use it yourself, test it with real people in real circumstances and evaluate the feedback. When implementing the result in CSS, you might find this technique valuable.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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