Динамически адаптивный шрифт html/css?

Question

[Name_23]

Добрый день, я верстаю макет сайта и нашёл в Интрнете формулу по которой шрифт сам подстраивается под размер экрана. Вот она

`font-size: calc(25px + (40 + 40 * 0.7) *(100vw - 320px) / 1170);`

25px - это минимально возможный шрифт. 1170 - ширина котейнера. Нету смысла обьяснять всю формулу. Кому интересно, гляньте это видео https://www.youtube.com/watch?v=HJZP5QsrpXs. Суть вопроса: при измене шрифта `line-height` остаётся прежним. То есть при увеличенном шрифте текст наезжает на себя, а при уменьшении слишком большие отступы. У кого-то есть подобная формула для `line-height`.

Comments

[imko]

просто не задавай ее

[Ankhena]

1. Во-первых, уже есть clamp. И если поддерживаемые браузеры позволяют, то эта дичь с формулой больше не нужна.
2. Во-вторых, задавайте line-height коэффициентом, без указания единиц измерения и всё будет хорошо.

[profesor08]

А какой смысл в этой формуле? Почему не задать заранее подсчитанное значение? Ведь сама формула не ограничивает размер шрифта, а только подсчитывает некое среднее значение, которое по сути зависит только от vw, а значит и указывать надо именно vw.
font-size: 6.3vw;

[Rsa97]

profesor08, Тут всё-таки немного другая формула. Если её упростить, то получится 5.812vw + 6.4px

[profesor08]

Rsa97, я за несколько секунд, методом тыка, подобрал значение, при котором текст сохраняет пропорции, независимо от ширины экрана. Но, возможно, формула должна выглядеть несколько иначе, например: font-size: 25 / 320 * 100vw;, таким образом шрифт будет пропорционально уменьшаться до минимального размера в 25px при 320 ширине экрана. Верхний предел можно ограничить медия запросом.

[Name_23]

profesor08, формула сама всё считает. Не нужно ничего дополнительно писать.

[profesor08]

Name_23, если у тебя экранчик маленький, то подвоха может и не заметишь.

Answer 1

[Rsa97]

line-height: normal;