Единицы измерения размеров шрифтов CSS. Em: величина зависит от размера шрифта родительского элемента

Размер шрифта в CSS задается с помощью свойства font-size , например:

p {
font-size: 12px;
}

В данном примере приводится размер в пикселах, но для определения значения данного свойства можно использовать и другие единицы измерения. Прежде чем сделать выбор в пользу одного или другого из них, следует взвесить все аргументы за и против.

В табл. 1 приведены единицы, которые можно использовать для указания размера шрифта.

Рассмотрим применение каждого из них более подробно.

p {
font-size: 10pt;
}

Следует избегать использования пунктов и пик для оформления текста, предназначенного для отображения на экране. Эти единицы идеально подходят для задания размера шрифта для печати; измерение в пунктах пришло из полиграфии. Пункт составляет 1/72 часть дюйма, а пика – шестую часть дюйма. После печати текстовые документы, шрифт в которых задан в данных единицах, будут в точности соответствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата А4, так и на ватмане. Однако компьютеры не в состоянии отобразить физические размеры с такой точностью, и они пытаются угадать – причем не слишком успешно – размер пункта или пики, из-за чего под различными платформами один и тот же документ может отображаться по-разному.

Если вы пишете таблицу стилей для печати или же сам документ предназначен для печати, а не для просмотра с экрана, следует использовать пункты и пики. Однако базовое правило при дизайне страницы для отображения в веб-среде: избегайте их применения.

p {
font-size: 12px;
}

Многие дизайнеры любят использовать пикселы в качестве единиц измерения для задания размера шрифта, поскольку это позволяет добиться одинакового отображения в различных броузерах и под разными платформами. Однако при этом игнорируются настройки броузера пользователя; более того, при просмотре такой страницы в Internet Explorer пользователь не сможет изменить размер шрифта. Это представляет серьезные ограничения для пользователей со слабым зрением, для которых возможность прочтения зависит от наличия функции увеличения шрифта.

Может показаться, что использование пикселов для задания размера шрифта – самое простое и удобное решение, однако при наличии альтернативных методов следует отказаться от этого способа, в особенности если речь идет о больших блоках с контентом. При создании документа, предназначенного для печати, или написании таблицы стилей для печати совершенно нецелесообразно использовать пикселы в мире бумажных документов они полностью теряют смысл, подобно пунктам в экранной среде. При указании размера шрифта текста для печати в пикселах будет предпринята попытка угадать, каким образом он должен отображаться на бумаге, и результаты далеко не всегда совпадут с ожидаемыми.

Em – относительная единица измерения размеров шрифта. Ее название пришло из области типографии, где оно соответствует размеру заглавной буквы М, которая, как правило, является самым широким символом шрифта. В CSS 1em соответствует размеру шрифта, используемому в системе пользователя по умолчанию, или размеру шрифта родительского элемента, если он отличается от используемого по умолчанию.

Если вы используете em (или другие относительные единицы) для задания размера всех шрифтов, пользователи смогут изменять размер символов текста в соответствии с настройками размера символов, установленными в их броузере. Для примера создадим описание стиля, задающее размер шрифта внутри элемента p равным 1em :

p {
font-size: 1em;
}

Использование em для задания размера шрифта ограничивает ваши возможности по управлению отображением документа. Однако этот подход означает, что посетитель, которому необходим крупный шрифт, сможет прочитать ваш контент, ведь в конечном счете именно для этого вы и размещаете текст на страницу.

Значения в em можно задавать десятичными числами. К примеру, чтобы задать размер шрифта на 10 процентов меньше используемого по умолчанию (или размера шрифта родительского элемента), можно использовать следующее правило:

p {
font-size: 0.9em;
}

Чтобы текст стал на 10 процентов крупнее, чем при использовании значения по умолчанию или унаследованного значения, можно использовать следующее правило:

Еx – относительная единица измерения размеров, соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически, если присвоить свойству font-size абзаца значение 1ex , его заглавные буквы будут той же высоты, какую имела бы строчная буква x, если бы размер шрифта не был задан (при этом размер строчных букв рассчитывался бы относительно заглавных).

p {
font-size: 100%;
}

Как и в случае с em и ex , при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера, и пользователь сможет самостоятельно изменять размер шрифта. Значение 100% размера шрифта для элемента p соответствует размеру шрифта, заданному настройками по умолчанию (так же, как и при задании значения 1em ). При уменьшении процентного значения размер текста уменьшается:

p {
font-size: 90%;
}

При увеличении процентного значения размер текста увеличивается:

Размер шрифта можно задать, помимо присваивания числовых значений, посредством ключевых слов с абсолютными и относительными значениями.

Ключевые слова с абсолютными значениями

В распоряжении веб-разработчика есть семь абсолютных ключевых слов CSS:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Значения этих ключевых слов определены одни относительно других, и разные броузеры интерпретируют их по-своему. Большинство броузеров отображают текст с размером medium аналогично тексту с настройками по умолчанию, а остальные ключевые слова изменяет размер текста относительно medium в соответствии с их названиями.

Измерения с помощью ключевых слов называются абсолютными, поскольку при этом отсутствует наследование от родительского элемента. Тем не менее в отличие от применения абсолютных значений, например в пикселах или пунктах, использование абсолютных ключевых слов позволяет посетителю сайта изменять размер шрифта вручную, а также не переопределяет пользовательские настройки броузера. Основной проблемой при применении абсолютных ключевых слов становится несоответствие отображения текста, оформленного с их помощью, в разных броузерах – текст с размером xx-small может быть отчетливо виден в одном броузере и совершенно нечитаем в другом.

Ключевые слова с относительными значениями

При задании размера шрифта с помощью относительных ключевых слов – larger и smaller – он определяется по отношению к размеру, установленному для родительского элемента, подобно тому, как это происходит при использовании em и % . Таким образом, если размер элемента p задан с помощью абсолютного ключевого слова small , и вы хотите, чтобы выделенный фрагмент текста отображался более крупным шрифтом, можно использовать следующую таблицу стилей:

p {
font-size: small;
}
em {
font-size: larger;
}

Данная разметка будет отображена, поскольку текст между тегами и отображается более крупным шрифтом, чем текст родительского элемента p :

Пример:

В данном примере размер шрифта устанавливается в классе copy . Текст, заключенный в тег

, печатается с отступом 2em . Размер заголовка третьего уровня больше, чем размер основного текста, установленный браузером по умолчанию.

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES
ARE DISTRIBUTED IN A NETWORK ENVIRONMENT-ON A SERVER, AT
A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Результат:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT - ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Комплект шрифта - это совокупность всех строчных и прописных букв, цифр и пунктуационных знаков, имеющих одинаковый размер и начертание (рис. 18.13). Шрифты могут быть прямыми и курсивными. К прямому шрифту относятся буквы прямой формы в отличие от курсивного шрифта, в котором буквы имеют наклонную форму. Латиница (Roman) обозначает группу шрифтов, имеющих засечки.

Семейства шрифтов объединяют два и более вида шрифтов, представляющих собой различные варианты шрифта, имеющие одинаковое начертание (рис. 18.14). Тем не менее каждый вид сохраняет неотъемлемые характеристики основной формы букв. Варианты могут включать курсив, узкий (thin), светлый, полужирный (semibold), жирный, средний (medium), узкий (condensed), широкий, контурный и другие виды шрифта. В некоторых семействах представлены только некоторые из этих вариантов, в то время как другие семейства предлагают больший

Рис. 18.13. Примеры двух вариантов начертания шрифта "Bookman", нормального и жирного

выбор вариантов начертания. Семейство шрифтов предоставляет разнообразные, но гармоничные начертания шрифта, которые можно использовать в рекламе.

Размер шрифта

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

Пункт

Пункт (пт) используется для измерения размера шрифта (высоты букв). В одном дюйме (2,54 см) 72 пункта (0,351 мм). Полезно знать, что высота шрифта размером 36 пунктов составляет примерно полдюйма, а шрифта размером 18 пунктов - примерно 1/4 дюйма. На рис. 18.15 поясняются основные термины, используемые для обозначения высоты шрифта. Размер шрифта может составлять от 6 до 120 пунктов. Размер шрифта основного текста обычно находится в диапазоне от 6 до 14 пунктов. Для большинства изданий используются шрифты размером 9,10 или 11 пунктов. Шрифты, размер которых превышает 14 пунктов, называются выделительными шрифтами или шрифтами заголовка. Однако эти размеры - всего лишь условность: как правило, размер шрифта основного текста газетной рекламы составляет примерно 18 пунктов, кроме того, встречаются рекламные обращения, в которых размер заголовка примерно равен размеру основного текста. Рисунок 18.16 дает наглядное представление об основных размерах шрифта.

Наряду с измерением высоты шрифта пункты используются для измерения интервала между строками, линиями и кромками.

Инструкция

Размер шрифта определяется в пунктах, и у каждого размер а есть свое название («Цицеро», «Агат», «Терция»). Получить более полную информацию и сравнить различные размер ы шрифтов можно с помощью таблицы . В более привычных пользователю приложениях используется числовое обозначение размер а шрифта.

Человек, который часто набирает текст, может определить размер шрифта визуально. Если Вы не так часто работаете с текстовыми документами, узнать размер шрифта того или иного слова (фрагмента текста) можно с помощью инструментов программы.

Если слово или фрагмент текста были набраны с применением различных размер ов шрифтов, поле на панели инструментов будет пустым. В данном случае последовательно ставьте курсор в те части текста, которые визуально отличаются друг от друга, и также смотрите их размер на панели инструментов.

В редакторах Microsoft Office Word и Excel панель для работы со шрифтами находится на вкладке «Главная» в разделе «Шрифт», расширенные настройки размер а и стиля шрифтов можно вызвать не только с этой вкладки. Кликните правой кнопкой мыши по фрагменту текста и выберите в контекстном меню пункт «Шрифт». Также, если вы выделите фрагмент текста, сразу же будет доступна мини-панель, которая всплывет над выделенной частью текста.

В графических редакторах контекстное меню для работы со шрифтами становится доступным при использовании инструмента «Текст». Данный инструмент традиционно обозначается латинской буквой «Т». Принцип в графических приложениях аналогичен описанному выше.

Обратите внимание

Если текст перенесен на бумажный носитель, измерять буквы линейкой и умножать получившуюся величину на значение пункта в миллиметрах (или вычислять по другим формулам) было бы не совсем корректно, так как в разных стилях шрифта размеры букв различаются.

Зачастую, просматривая изображения в интернете, веб-серфер сталкивается с оригинальными подписями к ним. Еще оригинальней порою кажется шрифт, при помощи которого это было сделано. Подобрать нужный шрифт стало возможным при помощи интернет-сервиса WhatTheFont.

Вам понадобится

• Компьютер с подключением к сети Интернет.

Инструкция

Интернетизобилует большим количеством разнообразных полезных сервисов, один из которых WhatTheFont. С его помощью вы узнаете название искомого шрифт а в несколько кликов. По своей сути этот сервис уникален и существует не первый год, что говорит о постоянном развитии сервиса. Теперь вам не нужно сидеть часами перед экраном вашего монитора, просматривая кучу страниц со шрифт ами.

С выполнением поиска шрифт а и его определения на странице сервиса разберется даже , который хоть немного работал с компьютером. Вам необходимо сделать скриншот с изображения, на котором есть образец искомого шрифт а. Для этого следует воспользоваться клавишей PrintScreen, которая, как правило, находится среди блока навигационных клавиш (чуть выше кнопок со стрелками). Обратите внимание, что на ноутбуках и нетбуках расположение этой клавиши иное.

Откройте любой графический редактор и вставьте изображение из буфера обмена. В качестве простейшего редактора возможно использовать MS Paint, который запускается из меню «Пуск» и раздела «Стандартных программ». В открытом окне редактора нажмите сочетание клавиш Ctrl + V, чтобы вставить продукт буфера обмена. Сохраните изображение в любой папке, например, на рабочем столе - для быстрого доступа.

Если вы знаете точный адрес изображения, изготовлением скриншотов заниматься не стоит. Чтобы его узнать и скопировать, необходимо нажать правую кнопку мыши на картинке и выбрать пункт «Скопировать адрес изображения» (для каждого браузера название этого пункта различно).

На странице сервиса нажмите кнопку Upload a file, чтобы загрузить изображение с жесткого диска, в вашем случае это картинка на рабочем столе. А скопированный адрес изображения необходимо вставить в пустое поле Or specify a URL. Затем нажмите кнопку Continue.

В следующем окне перед вами появится несколько загруженных вами изображений, в которых будут выделены разные буквы. Под каждым изображением есть пустое поле, в него нужно вставить выделенную на картинке букву. Нажмите кнопку Continue.

В итоговом окне вы получите список похожих шрифт ов, из которых можно выбрать самостоятельно искомый шрифт .

Стандартные шрифты, используемые системой для отображения названий папок и программ, расположенных на рабочем столе , по умолчанию рассчитаны на пользователей с нормальным зрением. Если вам трудно разобрать стандартный шрифт, его можно с легкостью изменить, выполнив ряд несложных действий.

Инструкция

Для того чтобы изменить размер на рабочем столе , кликните в любом свободном месте рабочего стола правой кнопкой мыши. Перед вами появится выпадающее меню, в котором необходимо выбрать пункт «Свойства» (самая нижняя строка) и кликнуть на него левой кнопкой мыши.

Откроется окно свойств рабочего стола, в котором вам необходимо выбрать вкладку «Оформление», нажав на нее один раз левой кнопкой мыши.

Перейдя на нужную вкладку, вы увидите в верхней части окна визуальное отображение текущего оформления. Ниже расположены те опции, которые вы можете настроить в соответствии со своими пожеланиями и нуждами.

Выберите раздел «Размер шрифта» (он находится с левой стороны в нижней части окна). В выпадающем меню вы можете установить нормальный, большой или очень большой размер шрифта: Normal, Large Fonts, Extra large Fonts, соответственно. Каждый раз при выборе того или иного пункта в верхней части окна будет отображаться визуальная выбранного оформления.

Когда вы определите необходимый размер шрифта, нажмите на кнопку «Применить», расположенную в правой нижней части окна. Дождитесь, пока система перенастроит параметры отображения шрифта и нажмите кнопку «OK».

Для того чтобы вернуться к ранее использованному шрифту, повторите все действия, выбрав в выпадающем меню вкладки «Размер шрифта» первоначальный вид шрифта, нажмите кнопку «Применить» и «OK», чтобы закрыть окно свойств рабочего стола.

Обратите внимание

Изменить размер шрифта также можно, изменив разрешение экрана, но при этом изменятся и размеры иконок на рабочем столе.

Полезный совет

На этой же вкладке вы можете дополнительно настроить цветовую схему и стиль оформления окон. Кликнув на кнопке «Эффекты», можно настроить отображение теней, метод сглаживания экранных шрифтов и прочее. С помощью кнопки «Дополнительно» можно установить цвета для различных частей окон, заголовков, кнопок управления окном, полосы прокрутки и строки меню.

Источники:

• как увеличить шрифт на ноутбуке

В приложении Microsoft Office можно установить единый размер шрифта для всего документа. Для этого существует функция выделения всего текста сочетанием клавиш или кнопки быстрого изменения размер а шрифта .

Инструкция

По умолчанию в Office 2007 установлен шрифт Calibri, размер 12. Чтобы изменить размер шрифта и установить необходимый вам, в Office 2007 нужно воспользоваться полем «Шрифт», расположенном слева на вкладке «Главная».

Латиницей в поле указан текущий размер шрифта . Например, Book Antiqua, рядом находится стрелочка. Нажмите на нее. Откроется список шрифтов, установленных . Шрифтов установлено довольно много. При необходимости можно установить дополнительные шрифты.

Чтобы установить шрифт для определенной части текста, выделите ее, зажав левую кнопку мыши и ведя указатель вниз. Нажмите на стрелочку в поле со шрифтом и выберите нужный шрифт. При этом вид букв должен поменяться. Если этого не происходит, значит, вы выбрали неподходящий шрифт, который

Как уже говорилось ранее, размер шрифта измеряется в пунктах. Она учитывается по размеру заглавных букв каждой гарнитуры. Вот поэтому разные шрифты одного размера выглядят неодинаково. Для большинства документов используется размер 12 пунктов, а для рефератов, курсовых и дипломных работ – 14 пунктов.

Диапазон размеров шрифта – от 1 пт до 1638 пт.

При этом 1 пункт (1/72 дюйма) = 1 мм.

Чтобы изменить размер уже набранного текста, его необходимо предварительно выделить.

Курсор ввода текста, стоящий перед словом или после него, не влияет на изменения этого слова!

Чтобы установить нужный размер шрифта, воспользуйтесь одним из способов, приведенных ниже.

1способ:

1 В окне открытого документа выделяем нужный текст и используем сочетание клавиш Ctrl+Shift+P.

2 В окне «Шрифт» на вкладке «Шрифт» в графе «Размер» задаем нужное значение шрифта. Кстати, после активации окна окошко размера уже выделено для ввода значения.

3 Закрываем окно кнопкой «ОК».

2 способ:

2 В группе «Шрифт» открываем окошко размера шрифта (рис. 3.14) и в списке значение выбираем нужное.

3 Или же, щелкнув в самом окошке размера, вручную набираем нужное значение, а затем закрепляем его нажатием клавиши Enter.

Примечание. Так можно задать любой размер шрифта, даже если его нет в списке размеров.

3 способ:

3 В автоматически всплывшей панели в окошке «Размер» открываем список размеров и выбираем нужный.

4 способ:

1 В окне открытого документа выделяем нужный фрагмент текста.

2 В окне открытого документа переходим к вкладке «Главная».

В группе «Шрифт» для увеличения размера щелкаем по кнопке «Увеличить размер» (рис. 3.15), а для уменьшения – по кнопке «Уменьшить размер».

Примечание. Щелкаем по данным кнопкам, пока не будет достигнут нужный размер.

1 В окне открытого документа выделяем нужный фрагмент текста.

2 Используем сочетание клавиш:

Ctrl+Shift+) – для увеличения размера шрифта.

Ctrl+Shift+(– для уменьшения размера шрифта.

Как сделать шрифт жирным?

Хотя правильнее такой шрифт называть полужирным. Вот только у российских пользователей программы Word закрепилось именно такое название для этого начертания, не будем менять традицию и мы. Жирное начертание используется для выделения фрагментом текста в документе. Но мой совет: не злоупотребляйте таким выделением, так как страница со множеством выделенным жирным начертанием слов смотрится очень неряшливой и грязной. Правильнее жирное начертание применять, в основном, лишь для заголовков документа.

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

Чтобы задать жирное начертание шрифта, воспользуйтесь одним из способов, приведенных ниже.

1 способ: в окне открытого документа выделяем нужный текст и используем сочетание клавиш Ctrl+B.

2способ:

1 В окне открытого документа выделяем нужный текст и переходим к вкладке «Главная».

В группе «Шрифт» щелкаем по кнопке «Ж» (рис. 3.16).

3 способ:

1 В окне открытого документа выделяем нужный фрагмент текста.

2 Наводим курсор на данное выделение.

3 Во всплывшей панели щелкаем по кнопке «Ж».

Похожая информация:

1. III. Методика измерений и расчетные формулы. Деформация - это изменение формы и/или размеров тела без изменения массы под действием внешней силы

Существует множество способов настройки размера шрифта CSS. Значительная часть верстальщиков по-прежнему пользуется пикселями, но это не совсем верный подход. Пиксель - слишком простой вариант, который не всегда пригоден для верстки адаптивных страниц. Рассмотрим все существующие методы изменения размера шрифта CSS.

Что вообще такое этот «размер шрифта»?

Есть мнение, что под размером понимается величина самого большого символа указанного шрифта. Это не так. На самом деле величина встроена в шрифт, и померить ее вручную, линейкой, вряд ли получится. Обычно размер чуть больше, чем расстояние от верхней части самой большой буквы до нижней части самой маленькой. Это делается для того, чтобы в заданном пространстве поместилось любое сочетание символов. Также важно указывать параметр «размер строки» (line-height), иначе буквы p, q и им подобные могут выйти за пределы.

Пиксели

Самый распространенный вариант. Устанавливается следующим образом:

font-size: 16px;

Преимущество у пикселей только одно - никаких сложностей с величиной. Ничего не надо подсчитывать. Какой размер указан, такими и будут символы на экране. Недостаток - трудности с адаптивным размером шрифта CSS. Не получится установить соотношения между разными размерами.

К числу «пиксельных» можно отнести устаревшие единицы измерения. К ним относятся pc, cm, mm и pt. Так, mm - это миллиметр, cm - сантиметр. Pt и pc - типографский пункт и типографская пика. Почему эти способы устарели? Потому что они не были «самостоятельными» - браузер автоматически пересчитывал значения в пиксели. Соответственно, проблемы были такими же, как и в случае с px. Кстати, в одном cm с точки зрения браузера содержится 38px.

Em: величина зависит от размера шрифта родительского элемента

Все просто. Допустим, у вас есть div, для которого задан font-size 16px. В нем находится еще один div, для которого размер шрифта CSS установлен как 2em. Соответственно, 1em - это будет 16px (т. е. размер шрифта родительского элемента), а 2em - вдвое больше, т. е. 32px.

В родительском элементе можно также задавать величину в em. В таком случае она будет зависеть от базового размера, заданного в body или html. Em - это относительный размер шрифта CSS, который будет увеличиваться и уменьшаться вместе с величиной знаков родительского элемента. Это удобно - чтобы изменить величину в большом количестве мест, надо только поменять параметры родителя.

Для профессионалов: ex и ch

Практически не используются обычными верстальщиками и frontend-разработчиками. Ex - это величина символа «Х», а ch - символа «0». В выбранном шрифте может не иметься таких знаков, но параметры все же можно использовать. Доподлинно неизвестно, для каких случаев лучше всего подходят такие размеры. Попробуйте поэкспериментировать - может, вам так будет удобнее? Однако помните, что ex и ch являются «условными» единицами, так что точная настройка параметров будет затруднительной.

Проценты: самый запутанный вариант

Как задать размер шрифта в CSS в процентах? Казалось бы, все просто - нужно только указать желаемый параметр и поставить после него символ «%». Но тут в дело вступает важный вопрос: «Процентом от чего будет являться заданный размер?»

В большинстве случаев параметр высчитывается в зависимости от величины родителя, но не всегда. Если задать свойство margin-left, процент будет вычисляться в зависимости от ширины родительского блока. Если установить line-height, то процент будет браться в зависимости от текущего размера шрифта.

Настройка параметров в процентах требует тщательных экспериментов. Будьте осторожны с этой единицей измерения, поскольку она легко может изменить внешний вид вашей верстки.

Rem: простая и универсальная единица

Выше перечислено множество способов настройки размеров шрифта в CSS, но ни один из них не является действительно удобным. Для упрощения работы был придуман параметр rem, который вычисляется в зависимости от заданной для тега html величины.

Это проще, чем кажется на первый взгляд. Например, для тега html, в который обернут весь контент страницы, вы задали в CSS font-size 16px. Соответственно, 1rem теперь будет являться 16px. 2rem - это 32px, и т. д. Можно использовать любые пропорции: 0,2rem, 1,1rem, 100rem… Браузер аккуратно пересчитает параметры.

В html можно вообще ничего не трогать, поскольку браузеры сами устанавливают для обертки определенный размер шрифта. Но для более тщательной настройки лучше все-таки переопределить показатель. Главное достоинство rem в том, что можно легко масштабировать шрифты в определенном месте, не влияя на другие элементы. Однако помните, что старые браузеры (IE ниже 9-й версии) не поддерживают этот показатель.

Vw и vh: экзотические параметры

Новейшие единицы измерения, созданные для мобильных устройств. Vw - это 1 % от ширины окна, на котором пользователь просматривает ваш сайт. Vh - 1 % от его высоты. Величина символов будет автоматически масштабироваться в зависимости от экрана устройства посетителя. Чтобы выбрать подходящий размер во время верстки, увеличивайте и уменьшайте размер экрана.

Подводим итоги

Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток - компоненты становятся менее модульными.

• если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
• в остальных случаях рекомендуется применять rem.

Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.