V
V
volshebnik692020-09-25 21:04:50
Adaptive design
volshebnik69, 2020-09-25 21:04:50

Why are different rems obtained when adapting text and leading?

Can you tell me what's wrong?

Writing

font-size:calc((100vw - 30rem)/(80 - 30) * (1.18 - 1.07) + 1.07rem);
 line-height:calc((100vw - 30rem)/(80 - 30) * (1.6 - 1.2) + 1.2rem);


But on the monitor screen, it turns out that 1 rem for the font height = 16, 667 px.
And for line spacing 1 rem = 19.19 px.
Aren't the rhymes the same?
I check the sizes with the Chrome extension - Fonts Ninja (see picture)
5f6e2deebfa0f691092072.jpeg

And it turns out that you need to go into the inspector all the time in the adaptive and watch with the Fonts Ninja extension how much the font size or line spacing comes out in order to accurately write the desired value in the code with the rheme number.

For example, if I want to set the leading I need, for example, 30 px., Then I divide 30 by 16 and get 1,875 rem. But when prescribing this value in the formula, 30 px is not obtained. on the monitor. By selection it turns out 1.6 rem (=30 px. 1 rem = 19.19 px.)

If you continue to set such a ratio for the font size, then again the font size does not work. Again, by fitting, the value 1 rem = 16, 667 px is found. (already for the font. And here it is already different).
Is this how you need to jump back and forth from the inspector in the responsive to the code and back to manually "catch" the desired dimensions?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question