Изначально при разработке шаблонов сайтов пользуюсь единицей измерения px. Но данный подход не является идеальным, т.к. имеет ряд недостатков. Рассмотрим альтернативные варианты задания размера текста.
Единицы измерения — px
px является наиболее простой и понятной единицей. Является абсолютной единицей, не с чем не связанной. Недостатком является то, что при смене шрифта приходится переопределять шрифт во всех стилях в ручную.
Единицы измерения — em
em — относительная единица. Относительна она по отношению к родительскому блоку, в котором задан размер шрифта. Одновременно и преимуществом и недостатком является зависимость от уровня вложенности.
Единицы измерения — rem
Основной размер шрифта сайта задается в px в стиле тэга html. А при другие вариация прописывается относительные ему rem.
Rem — это корневой em (Root Em)
Сильной чертой данного метода является, то что при изменении базовой единицы мы получим корректировку всех стилей сайта. Дело в том что разные шрифты могут визуально отличатся размером, для этого можно делать корректировку всего лишь одного стиля html. Также для каких-либо задач по общему изменению шрифта на сайте с помощью jQuery нам достаточного воздействовать на одно свойство. И в целом система стилей основанная на единицах rem более гармонична, т.к. в своей структуре работает с вариациями одного базового числа (золотое сечение).
Не шрифтовые размеры
Единицы em и rem можно также применять и для задания величин любых других свойств. Но не всегда это оправдано. Например для создания border лучше использовать px, т.к. относительный border может по разному отображаться в разных браузерах. Идеально использовать em и rem для padding и margin, причем используя в каких-то случаях rem, а в других em.
Viewport percentage lengths
Свойство шрифта изменять размер относительно размера экрана
vw (% от ширины экрана)
vh (% от высоты экрана)
vi (1% от размера экрана в направлении встроенной оси корневого элемента)
vb (1% от размера экрана в направлении оси блока корневого элемента)
vmin (меньше VW или VH)
vmax (больше VW или VH)Свойство font-size: 2vw; работает как надо. При сужении экрана уменьшается и шрифт.
По поводу изменения размера шрифта от размера экрана / контейнера есть еще решение на jQuery — FitText.js.
Принцип простой: после подключения самого скрипта, цепляем к какому-либо блоку функцию fitText:
jQuery("#responsive_headline").fitText();
jQuery("#responsive_headline").fitText(1.2); // Изменяет размеры более агрессивно
jQuery("#responsive_headline").fitText(0.8); //
Изменяет размеры менее агрессивно
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
