Reply To: How do I change font-size for mobile?

[Sushil Adhikari]

That would make for a good blog tutorial …. I made a note. However, to change the font sizes with media queries (responsive sizing), here is an example:

@media (max-width: 480px) {
	h1 {font-size: 14px; line-height: 1;}
	h2 {font-size: 12px; line-height: 1;}
}

Usually a good idea to add a line-height as well, although it’s a personal preference how the line height is done, some will do it in a px value or em value. The media query will also depend on what screen size you are editing font sizes for as well. The example above means that any screen size from 0 to 480px (generally a landscape view on a phone), your font sizes will be what you see in the example.

The above example can also be used for anything else you need to adjust at that screen size.