Единицей измерения размера шрифта является:
Условно единицы измерения можно разделить на три группы.
Первая группа — это величины, которые используются для измерения длин реальных предметов. К ним относятся:
* in — дюймы;
* cm — сантиметры;
* mm — миллиметры.
Ко второй группе можно отнести величины, которые пришли в CSS из типографии. То есть они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Данная группа величин привычна полиграфистам. К ним относятся:
* pt — типографский пункт;
* pc — пика;
* ex — высота строчной буквы «x» в шрифте.
Третью группу составляют величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины. К ним относятся:
* em — вычисляется относительно размера шрифта элемента;
* px — пиксель. Вычисляется относительно устройства отображения;
* % — процент. Естественно, процентные соотношения не являются единицами измерения в привычном смысле слова. Они вычисляются относительно размеров элемента-предка.
CSS Font-Size: em vs. px vs. pt vs. percent
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Front-end шпаргалка: единицы измерения
Для каждой ситуации в верстке лучше использовать подходящие единицы измерения. Верстать только в пикселях значит не учитывать адаптивность. Применять только проценты — делать макет с зависимыми друг от друга блоками. Не использовать rem — переписывать весь код, если заказчик попросит сделать «покрупнее». В верстке десятки единиц измерения и лучше сочетать их, чтобы облегчить работу себе и добиться лучших результатов.
Абсолютные единицы
Измеряются в точных (абсолютных) значениях:
- Дюйм — in (inch).
- Пика — pc (pica).
- Поинт — pt (point).
- Сантиметр — cm (centimeter).
- Миллиметр — mm (millimeter).
- Пиксель — px (pixel).
Дюйм пришел из английской системы мер, пика и поинт — из типографики, сантиметр и миллиметр — из метрической системы мер. И только пиксель пришел из веба. Однако размер пикселя, который используется в верстке, отличается от обычного.
1in = 6pc = 72pt = 96px
1pc = 12pt = 16px
1cm = 10mm = 37,8px
Посмотрите, как выглядит текст в разных абсолютных единицах измерений.
На практике обычно используются пиксели, другие единицы измерений — крайне редко. Например, сантиметр и миллиметр понадобятся, если на сайте есть элемент, который должен распечатываться в строгом размере: бейдж для выставки или почтовый адрес, который вкладывают в карман конверта. Подобные задачи могут встретиться пару раз в жизни.
Относительные единицы
Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.
Viewport — область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты — они не входят. Но в viewport входят полосы прокрутки.
1vw = 1/100 ширины окна браузера
1vh = 1/100 высоты окна браузера
1vmin = меньшее из значений 1vw и 1vh.
1vmax = большее из значений 1vw и 1vh
Поддерживается не всеми браузерами. Проверяйте с помощью ресурса Can I Use.
Иногда возникает путаница при выборе «проценты или viewport». Размер в процентах будет считаться от размера контейнера, а viewport — от области просмотра экрана. Допустим, вы установили значение 10vw. Тогда на экране с шириной 800px размер составит 80px.
Размер шрифта в пикселях
Viewport помогает добиться масштабируемости текста. Чем больше экран, тем более крупный шрифт будет показываться. Однако может случиться ситуация, когда шрифт станет слишком мелким и нечитаемым. Чтобы этого избежать, применяйте функцию calc (). Поставьте базовый размер шрифта, допустим, 12px, и добавьте значение vw:
Тогда текст станет более динамичным и предсказуемым. Если не хотите использовать calc, работайте с препроцессорами.
Шрифтозависимые единицы
1em = размер родительского элемента
1rem = размер шрифта корневого элемента
1ex = высота символа X
1ch = ширина символа 0
Единицы измерения привязаны к шрифту. Они помогают связать размер шрифта с размерами блоков и отступов. При смене семейства шрифта размеры, установленные через ex и ch, меняются. На практике ex и ch используются редко. Основные используемые единицы — em и rem. Если em не задан, берется значения по умолчанию, установленное в большинстве браузеров — 16px. Единица rem считается от базового значения, а em — от родителя.
Использование rem помогает изменять шрифт всего сайта. Это очень удобно при верстке адаптивных страниц. Задавайте размеры шрифта для каждого устройства отдельно. Например, десктоп-версия — 16px, планшеты — 12px, смартфоны — 10px. На экране устройства шрифт будет отображаться в зависимости от присвоенного значения.
На примере шрифт для сайта задан 16px. Это и есть заданное значение rem для сайта. Дополнительно прописали значение rem для экранов маленьких размеров шириной до 400px — 10px. Таким образом, на десктопах шрифт будет 16px, а на мобильных устройствах — 10px. Ширина экрана изменялась, автоматически поменялся шрифт на всем сайте.
Единица em работает иначе и зависит от родителя. Поэтому на разных участках кода она принимает разные значения. Есть отличный пример для иллюстрации. Допустим, мы задаем нижние отступы относительно размера текста в блоке через em. В обоих случаях, и в заголовке и абзаце, отступ равен 1em. Но в заголовке em = 32px, потому что font-size родителя 32px, а в абзаце — 16px, и здесь размер шрифта — 16px.
Еще пример. Мы задали отдельный класс для родительского блока. Теперь размер зависит только от него, а не от размера шрифта всего документа.
Используйте em и rem, когда дизайн построен на точных пропорциях и важны размеры отступов, блоков и шрифтов. Если сверстать полностью на em и rem, изменение размера шрифта автоматически пропорционально скорректирует остальные элементы. Дизайн останется гармоничным, а вам нужно будет поменять только одну строчку кода.
Что использовать?
Выбор единиц зависит от задач проекта, поэтому принимайте отдельное решение в каждом конкретном случае. На ресурсах, откуда пользователи распечатывают материалы, используйте pt или pc. Если при печати нужны точные размеры, задавайте cm и mm. Для пропорциональных дизайнов, привязанных к размерам друг друга, берите em и rem. Для мультимедийных и резиновых форматов задавайте в процентах или через viewport.
Основное правило — подбирайте единицы измерения, наиболее простые в поддержке данного проекта.
Единицы измерения в CSS: px, rem, em, fr, %
Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. В статье расскажем про пять единиц измерения: px , em , rem , fr , % . Они делятся на абсолютные и относительные. Давайте разбираться, чем они отличаются.
�� Абсолютные единицы измерения привязаны к настоящим физическим размерам.
Познакомиться со всеми абсолютными единицами измерения можно в спецификации. Среди них пиксели, сантиметры, миллиметры, дюймы и непривычные нам единицы измерения вроде одной сороковой доли сантиметра.
�� Относительные единицы измерения описывают значения, которые зависят от других значений.
Познакомиться со всеми относительными единицами измерения можно в спецификации. Среди них em , rem , vh , ex и другие единицы измерения.
Варианты единиц измерения
Пиксель бывает физическим и CSS-пикселем.
Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px , то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.
CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Подробнее рассказали в статье «Как подготовить вёрстку к retina-экранам».
Пример использования
Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно <html>. Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге <html> задан шрифт 16px , то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px .
Пример использования
Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px , то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px .
Пример использования
Для <h1> значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.
Проценты задают размер относительно родительского элемента. Родительский элемент равен 100% , тогда width: 50%; будет равна половине ширины родительского элемента.
Пример использования
Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.
Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr , а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.