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?

Answer 1

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: 624px) {     html {         font-size: 9px;     } }   @media (max-width: 623px) {     html {         font-size: 8px;     } }