Suppose I specify all font sizes in rem units, then I specify a font size at a certain screen size, but it turns out that the fonts that were already small were even smaller, to the extent that they are more unreadable.

Here is an example:

 html { font-size: 10px; } h1 { font-size: 4rem; } h2 { font-size: 3rem; } h3 { font-size: 2.5rem; } h4 { font-size: 2rem; } p { font-size: 1.4rem; } @media screen and (max-width: 600px) { html { font-size: 6px; } } 
 <html> <h1>Simple text</h1> <h2>Simple text</h2> <h3>Simple text</h3> <h4>Simple text</h4> <p>Simple text</p> </html>

The question is what to do in such cases? What is the right thing to do? For small fonts, set the size values ​​in absolute values?

  • For small fonts in @media, specify the values ​​of rem that suit you, or as you said in absolute terms. Just check what is happening and whether you like the result. - Alexey Drizhakov

1 answer 1

There can be many approaches for dynamic typography, I would pay attention to the possibilities of the calc() function and, perhaps, the dependence of the font size on the width of the screen - the simplest font-size: calc(1rem + 1vw) formula font-size: calc(1rem + 1vw) , with details of the coefficients We must already experiment. You can also ask about the theme of CSS gateways.

In your particular case, it turns out that you specify a basic font size of 6 pixels - so naturally, the text will be very small. Here is an example of how this can be partially avoided by using the calc() function and cc variables. It is necessary to add an increasing factor to those values ​​that become too small on small screens, while on large ones leave it equal to one.

 html { font-size: 10px; --font-ratio: 1; } h1 { font-size: 4rem; } h2 { font-size: 3rem; } h3 { font-size: 2.5rem; } h4 { color: red; font-size: calc(2rem * var(--font-ratio)); } p { color: red; font-size: calc(1.4rem * var(--font-ratio)); } @media screen and (max-width: 600px) { html { font-size: 6px; --font-ratio: 1.25; } } 
 <html> <h1>Simple text</h1> <h2>Simple text</h2> <h3>Simple text</h3> <h4>Simple text</h4> <p>Simple text</p> </html>

  • And if for example, to add a fixed size to small fonts, is this the wrong approach? - uzi_no_uzi
  • In your case, I would simply avoid having to set such a small base font, 6 pixels is too much. - Sasha Omelchenko