best practice font size for mobile

Question

I have seen this question on SO   What are the most common font-sizes for H1-H6 tags with this being the recommended font sizes fo H tags   h1   font-size  2em    h2   font-size  1 5em    h3   font-size  1 17em    h5   font-size   83em    h6   font-size   75em      Is there a  best practice  for these for mobile phones  -say iphone screen size

User · Answer

The whole thing to em is  that the size is relative to the base  So I would say you could keep the font sizes by altering the base    Example  If you base is 16px  and p is  75em  which is 12px  you would have to raise the base to about 20px  In this case p would then equal about 15px which is the minimum I personally require for mobile phones

User · Answer

Based on my comment to the accepted answer  there are a lot potential pitfalls that you may encounter by declaring font-sizes smaller than 12px  By declaring styles that  lead to computed font-sizes of less than 12px  like so   html     font-size  8px    p     font-size  1 4rem       Computed p size  11px    You ll run into issues with browsers  like Chrome with a Chinese language pack that automatically renders any font sizes computed under 12px as 12px  So  the following is true   h6       font-size  12px    p      font-size  8px       Both render at 12px in Chrome with a Chinese language pack        How unpleasant of a surprise    I would also argue that for accessibility reasons  you generally shouldn t use sizes under 12px   You might be able to make a case for captions and the like  but again--prepare to be surprised under some browser setups  and prepared to make your grandma squint when she s trying to read your content   I would instead  opt for something like this    h1       font-size  2 5rem     h2       font-size  2 25rem     h3       font-size  2rem     h4       font-size  1 75rem     h5       font-size  1 5rem     h6       font-size  1 25rem     p       font-size  1rem      media  max-width  480px        html           font-size  12px            media  min-width  480px        html           font-size  13px            media  min-width  768px        html           font-size  14px            media  min-width  992px        html           font-size  15px            media  min-width  1200px        html           font-size  16px            You ll find that tons of sites that have to focus on accessibility use rather large font sizes  even for p elements    As a side note  setting margin-bottom equal to the font-size usually also tends to be attractive  i e     h1       font-size  2 5rem      margin-bottom  2 5rem      Good luck

User · Answer

The font sizes in your question are an example of what ratio each header should be in comparison to each other  rather than what size they should be themselves  in pixels    So in response to your question  Is there a  best practice  for these for mobile phones  - say iphone screen size    yes there probably is - but you might find what someone says is  best practice  does not work for your layout   However  to help get you on the right track  this article about building responsive layouts provides a good example of how to calculate the base font-size in pixels in relation to device screen sizes   The suggested font-sizes for screen resolutions suggested from that article are as follows    media  min-width  858px        html           font-size  12px            media  min-width  780px        html           font-size  11px            media  min-width  702px        html           font-size  10px            media  min-width  724px        html           font-size  9px            media  max-width  623px        html           font-size  8px

[html] best practice font size for mobile

Examples related to html

Examples related to css

Examples related to mobile