Размер шрифта иначе называется. Rem: простая и универсальная единица

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

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

Шрифт является для компьютера инструкцией, в каком виде следует выводить символы текста на экран или на печать.

Шрифтов много, отличаются они друг от друга по трем параметрам:

• гарнитура,
• размер символов,
• начертание.

Рассмотрим эти параметры шрифта.

Гарнитура шрифта

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

Лингвистически слова «гарнитура» и «гарнитур» похожи. Гарнитур означает набор предметов, имеющих схожее назначение, например, мебельный гарнитур, ювелирный гарнитур и т.п. Также и гарнитура объединяет набор шрифтов для вывода текста на экран или на принтер. Все предметы из гарнитура, также как все шрифты одной гарнитуры, выполнены в одном стиле, имеют единое художественное решение.

Каждая гарнитура имеет свое имя, например, Times New Roman, Courier New. Есть гарнитуры со специальными символами, например, Symbol и Wingdings.

В названиях компьютерных шрифтов русские буквы не используются. Вместо этого применяется латинский алфавит, например, «Baltica», «Svetlana» (это транслитерация, когда русские названия пишутся английскими буквами). Также возможен английский перевод русских названий шрифтов, например, «Schoolbook». Шрифты, которые пришли к нам с Запада, сохраняют свои названия, например, шрифт Garamond.

Слово «гарнитура» обычно опускается. Как правило, просто говорят «выберите шрифт Arial» или «документ набран шрифтом Times New Roman». Также обычно упрощают и вместо «гарнитура», либо «имя гарнитуры» говорят «имя шрифта ».

Размер символов шрифта

Если гарнитура (проще говоря, имя шрифта) является первым параметром шрифтов, то вторым параметром является размер символов шрифта .

Можно встретить еще такое название – кегль шрифта (кегель шрифта). Это то же самое, что и размер шрифта.

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

Как задается размер шрифта (или кегель шрифта)? Обычно пользователи выбирают размер шрифта – 8, 10, 12, 14 и т.д. Здесь цифры означают размер символов шрифта по вертикали в типографских пунктах между вершиной самого высокого символа и нижней точкой самого низкого (см. рисунок).

Слово «пункт» произошло от немецкого слова «punkt» и переводится как «точка». Для тех, кто любит цифры, сообщаю, что один пункт равен 1/72 дюйма, то есть 0,3528 миллиметра. Соответственно, для того, чтобы 8 пунктов перевести в миллиметры, надо 8 умножить на 0,3528. В результате получится, что 8 пунктов – это 2,8224 миллиметра.

Начертание шрифта

Перейдем к последнему третьему параметру шрифтов, точнее, к начертанию. Начертание шрифта – это разные варианты шрифта внутри одной гарнитуры, точнее:

• стиль и
• насыщенность шрифта.

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

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

Некоторые гарнитуры могут содержать шрифты светлой (thin), очень светлой (light), жирной (heavy) и сверхжирной (ultra heavy) насыщенности.

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

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

Кегль – это величина площадки, на которой размещается символ (буква) с учетом свисающих, надстрочных и подстрочных элементов (диакритических элементов). Так, например, для шрифта размером 14 пт (пунктов) кегль (как раз равный 14 пт) определяется как расстояние от верхнего выносного элемента (например, для буквы «б») до нижнего выносного элемента (как в букве «р»). В этом случае понятно, что реальная высота символа «а», набранного шрифтом 14 пт будет меньше 14 пт.

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

Шрифт Times New Roman - кегль 18 пунктов,

Шрифт Arial Cyr - кегль 18 пунктов.

Величина стандартного шрифта печатной машинки составляет 12 пунктов. Книжный текст набирают обычно шрифтом кегля 10-11 (пунктов), в документах меньшего масштаба и более узкого применения (рефератах, пояснительных записках, рукописях статей) уместно использовать более крупный кегль – 12-14.

Начертание

Большинство шрифтов имеют четыре начертания :

обычный (Regular, Normal);

полужирный (Bold);

курсив (Italic);

полужирный курсив (Bold Italic).

Набор шрифтов определенного рисунка, но разных начертаний и размеров называют гарнитурой . Например, гарнитура шрифтаTimes New Roman состоит из следующих шрифтов:

Times New Romanпрямой;

Times New Roman прямой полужирный ;

Times New Roman курсив ;

Times New Roman курсив полужирный .

Форматирование символов

В текстовом редакторе Wordпо умолчанию символы оформляются шрифтомTimes New Roman Cyr, размер 10 пт, нормальное начертание. Для изменения установок по умолчанию выбирают командуФормат  Шрифт , после чего все последующие символы будут набраны с учетом новых установок.

Команда Формат  Шрифт открывает диалоговое окноШрифт . На вкладкеШрифт можно выбрать шрифт, размер, начертание, цвет символов, варианты подчеркивания и некоторые эффекты (зачеркивание, двойное зачеркивание, с тенью, контур, приподнятое, утопленное и т.д.). На вкладкеИнтервал можно изменить интервал между символами (например, установить разреженный или уплотненный) или задать смещение символов (выше или ниже относительно строки). Кроме того, на этой же вкладке можно установить переключатель кернинг. Кернинг шрифта применяется для автоматического подбора интервала между символами. Установка переключателя Кернинг позволяет располагать символы ближе друг к другу, не изменяя при этом их ширины. Эффекты анимации (вкладкаАнимация ) используются только при подготовке электронных документов и не воспроизводятся при распечатке документов.

Чтобы изменить форматирование уже набранных символов, необходимо их выделить и только затем применить команду Формат  Шрифт или использовать соответствующие кнопки на панели Форматирования. В этом случае изменения коснутся выделенных символов. Выделять можно как отдельный символ, так и целый текстовый блок, слово, строку, несколько строк.

Абзац – это элемент оформления любого документа. Каждый заголовок документа тоже рассматривается как отдельный абзац. Например, в меню Формат  Абзац имеется немало различных элементов управления, и выполнять их настройку для каждого абзаца отдельно – неэффективная и утомительная задача. Она автоматизируется путем использования понятиястиль .

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

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

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

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

Каждый стиль имеет имя. Имена некоторых стилей определяют их назначение. Например, абзацы, отформатированные стилями Заголовок 1 ,Заголовок 2 и т.д., автоматически включаются в оглавление, стильОбычный определяет формат набора обычного текста.

Для работы со стилями в Wordиспользуются:

команда меню Формат  Стиль , открывающая диалоговое окноСтиль ;

кнопка Стиль на панели инструментовФорматирование .

Щелчок по стрелке на кнопке Стиль позволяет раскрыть список имеющихся в активном документе стилей.

Особенностью текстового редактора MicrosoftWordявляется то, что он поддерживает два типа стилей:стили абзаца истили символов (знаковые стили).

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

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

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

Для оформления фрагмента текста выбранным стилем необходимо выполнить следующие действия:

выделить этот фрагмент;

ввести команду ФОРМАТ  Стиль или открыть список стилей на панелиФорматирование ;

щелкнуть по названию нужного стиля в раскрывающемся списке на панели инструментов или выбрать стиль в диалоговом окне Стиль и щелкнуть по кнопкеПрименить .

Стили можно изменять ,копировать ,удалять исоздавать новые (свои собственные –стили пользователя ). Для выполнения этих операций в диалоговом окнеСтиль имеются соответствующие кнопкиСоздать ,Изменить ,Удалить .

При этом необходимо иметь в виду следующее.

Если к элементам документа (например, к некоторым абзацам) применен определенный стиль, а позже в этот стиль внесены изменения, то все абзацы, к которым был применен этот стиль, изменятся в соответствии с новыми параметрами стиля.

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

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

Посмотреть содержание стиля и характер форматирования, примененного к выделенному абзацу, можно с помощью пункта меню СПРАВКА  Что это такое?

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

В диалоговом окне Тема , которое выводится на экран с помощью команды менюФОРМАТ  Тема , можно выбрать варианты оформления страниц документа в соответствии с определенной темой.

Щелчок по кнопке Библиотека стилей в диалоговом окнеТема выводит на экран диалоговое окноБиблиотека стилей , в котором можно выбрать шаблон, просмотреть стили этого шаблона и скопировать стили выбранного шаблона в текущий документ.

Пика равна 12 пунктам,что чуть меньше 1/6 дюйма (большинство людей округляет эту величину). Ширина и высота колонок и полос выражаются в пиках.

Пункт составляет 0,353 мм. Размер шрифта и расстояние между строками оценивают в пунктах.

Цицеро-это единица, принятая в большинстве стран Европы. Она примерно равна пике (5,62 цицеро равны 1 дюйму).

Термины круглая шпация, полукруглая шпация тонкая шпация характеризуют горизонтальные размеры шрифта. Они соответствуют ширине заглавных букв М, N и строчной буквы t.

Круглая шпация равна размеру шрифта, полукруглая шпация составляет 0,5 размера шрифта, а тонкая шпация - 0,25 размера шрифта. Другими словами, для 12-пунктового шрифта круглая шпация равна 12 пунктам, полукруглая шпация - 6 пунктам, а тонкая шпация - 3 пунктам. Ширина цифры показывает, сколько места на строке занимает цифра. Она равна полукруглой шпации (в большинстве шрифтов все цифры имеют одинаковую ширину, что особенно удобно при формировании числовых колонок в таблицах).

В следующей таблице приведены соотношения основных единиц измерения:

ОСНОВНЫЕ ТЕРМИНЫ

ШРИФТ

Шрифт-это набор символов определенного размера и рисунка (например, полужирный шрифт New Baskerville размером 10 пунктов).

Большую часть шрифтов можно разделить на четыре группы: шрифты с засечками, или антиква (serif), шрифты без засечек, или гротески (sans serif), декоративные (decorative) и рукописные (script).

Ниже приведены образцы некоторых широко распространенных в DTP шрифтов:

ГРУППЫ ШРИФТОВ

Для каждого шрифта существует несколько вариантов начертания: нормальное (plain), курсивное (italic), жирное (bold) и жирное курсивное (bold italic). Различные варианты начертания некоторого шрифта всех возможных размеров (кеглей) объединяются в одно шрифтовое семейство или гарнитуру.

Ниже приведен пример различных начертаний гарнитуры Таймс:

Times Plain
Times Italic
Times Bold
Times Bold Italic

Конечно, это далеко не все возможные начертания, однако эти начертания обязательно присутствуют во всех гарнитурах. Кроме них можно назвать такие широко распространенные начертания, как: светлое (light), суперсветлое (extra light), полужирное (demi bold), супержирное (extra bold), сжатое (compressed или condensed). Существует и множество других, для которых иногда даже нет общепринятого наименования.

ПРОПОРЦИИ ШРИФТА

В зависимости от пропорций знаков шрифт может быть сжатым (condenced), нормальным (normal) и широким (expanded). Реализация сжатого шрифта некоторой гарнитуры как отдельной разновидности в DTP-системах скорее исключение, чем правило. В подавляющем большинстве сжатые шрифты получаются средствами самой DTP-системы - путем пропорциональной деформации. Причем такая деформация может представлять собой не обязательно сжатие - строятся и растянутые начертания.

ОФОРМИТЕЛЬСКИЕ ЭФФЕКТЫ

Одной из интересных возможностей оформления любых шрифтов является построение контурных литер (Outline-эффект). В DTP-системах реализована также возможность создания теневого (Shadow) эффекта для любых шрифтов.

Эти и многие другие эффекты реализуются компьютером путем модификации стандартных шрифтов по определенным алгоритмам.

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

РАЗМЕР ШРИФТА

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

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

На следующей иллюстрации изображены несколько кеглей одной гарнитуры:

Существуют специфические наименования для отдельных кеглей, также «унаследованные из прошлого»: бриллиант (3 пункта), диамант (4 пункта), перл (5 пунктов), нонпарель (6 пунктов), миньон (7 пунктов), петит (8 пунктов), боргес (9 пунктов), корпус (10 пунктов), цицеро (12 пунктов), миттель (14 пунктов), терция (16 пунктов), текст (20 пунктов).

ЕМКОСТЬ И НАСЫЩЕННОСТЬ ШРИФТА

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

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

На рисунке ниже один и тот же текст набран одним кеглем, но имеет для разных шрифтов свою емкость и насыщенность:

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

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

Ниже приводятся несколько простых советов по использованию шрифтов:

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

Существует множество способов настройки размера шрифта 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. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
• 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt - 14 пунктов;
  • 22px - 22 пикселя;
  • 1vw - 1% от ширины окна браузера;
  • 1vh - 1% от высоты окна браузера;