Как сделать «резиновый» текст?

Question

[Иван Бабий]

Дело в том, мне нужно, чтобы текст был пропорционален экрану монитора. Как это сделать в идеале - не могу понять. em, % - вроде как должны давать такую возможность, но по-сути такими не являются. Как дальше быть? Получается, разница между мониторами 1366x768 и FullHD (1920x1080) небольшая, но используя те же em и т.д. разница в размерах огромная ( когда на fullhd мониторе шрифт почти не видно, то на моем мониторе текст просто огромный ).


Как быть, должен же быть выход, которым, и я уверен, что им пользуются все более-менее профессиональные разработчики

Answer 1

[Алекс Глебов]

font-size: calc(1rem + 1.23vw);
это использую
1rem нужен чтобы на телефоне шрифт не был мелким
величина шрифта задается в vw

Answer 2

[Aleksey Chernikov]

Не забывайте про vw, vh, vmin и vmax
Я обычно использую vmin - размер изменяется пропорционально той стороне экрана, которая меньше. Это удобно, когда делаешь респонсив с текстом.
Но в вашем случае можно использовать и vw - размер текста будет напрямую зависеть от ширины дисплея.

Что касается em и процентов - то они зависят исключительно от значений размеров родительских контейнеров.

Answer 3

[iBird Rose]

делаешь все шрифты через em, а потом в media меняешь font-size у body при нужных разрешениях экранов

Answer 4

[Александр Таратин]

Да буду закидан я помидорами
fittextjs.com

Answer 5

[Денис Белевцов]

Вот тут всё великолепно расписано. Если умеете пользоваться sass, это что что нужно.
Ещё можно просто сделать размеры фиксированными, и менять с помощью медиа запросов. Для того чтобы имея 2 размера экрана и 2 размера шрифта на них найти 3 размер шрифта для 3-го экрана я сделал вот такой простенький калькулятор