How should font sizes change in responsive layout?

Question

Fonts

Is there any advice on how to resize fonts when using media queries. Those. how the font should shrink as the browser window gets smaller. I think that "by eye" such things are not done, readability should be observed.

Answer 1

The rule I use is:
In the desktop version, the main font size (paragraphs) is at least 16px. Headings from h4 to h1 grow by a factor of 1.250 (Major Third): h4 - 20px, h3 - 24px, h2 - 32px, h1 - 40px. (rounded)
For small screens (<768px) paragraphs stay 16px or shrink to 14px (if there is a lot of text). Headings h4...h1 are recalculated from the new paragraph size with a factor of 1.125 (Major Second). In this case, the heading sizes grow more smoothly: h4 - 18px, h3 - 20px, h2 - 23px, h1 - 26px.
I do not make intermediate breakpoints for the font size, so as not to complicate things.

Answer 2

Use em instead of px.
Read more about em here: htmlbook.ru/content/edinitsy-izmereniya
Read also this book: abookapart.com/products/responsive-web-design