Minimum font size for mobile view

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

    Possible duplicate of What is the best font for extremely limited space and other answers found by searching here for "mobile font size".

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

    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 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 And what font size is that?

    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.

    "em" was never widely adopted that's why browser developers changed the zoom functionality to also resize px values. Using px is fine nowadays.

    @ChristianStrempfer No it is nor I need toi change font size and keep pictures the same size

    @MonkeyZeus - the pretentious ones are folks like apple who don't have accessibility settings in their browser to force pinch to zoom or turn off pinch to zoom (yes this is an issue for some people) and then block a web standard from use. I suspect in the apple case it is them using accessibility to cover for the fact that they want apps in their app store, not on the web. Follow the $$$$ and you will see that the most affected group are the developers who don't want to build and maintain Android and iOS apps and make them full accessible in a browser for EVERYONE!

  • 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

    Hi Alvaro The unit they proposed are not px it is SP(Scalable Pixel) Thanks

    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 the image you see here is probably resized. This is supposed to be the minimum, 14sp for body is supposed to be readable.

  • 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

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

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

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM