Отзывчивый размер шрифта. Как задать нужный размер шрифта

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

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

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

Коротко о viewport-зависимых единицах

100vw равно ширине (100vh - высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc() ). 100vmax - равно большему из пары высота/ширина, 100vmin - меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.

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

Задача

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px , а при 1280px - 24px .

Путь к решению

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

На оси X - ширина окна браузера, на оси Y - наш размер шрифта. Получаем уравнение с двумя неизвестными:

y - наш неизвестный размер шрифта, x - текущий размер экрана. x 1 - минимальное значение шрифта, x 2 - максимальное значение шрифта. y 1 и y 2 минимальное и максимальные значение ширины экрана соответственно.

А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:

font-size: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании - оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):

font-size: calc((100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem :

font-size: calc((100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);

Используем Sass/SCSS

Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

Получим функцию:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(16, 48, 480, 1280); }

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

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(1, 3, 30, 80, rem); }

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

@function strip-unit($number) { @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); }

Расширяем возможности нашей функции

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

Например, мы хотим фолбек для старых браузеров:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

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

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { font-size: $f-min; @media (min-width: $w-min) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } @media (min-width: $w-max) { font-size: $f-max; } } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px , после 480 он станет резиновым, а после 1280px всегда будет 24px .

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); }

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

Размер шрифта в 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.

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

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

Шрифт представляет собой набор характеристик символов в одной гарнитуре (однотипного начертания), такой, как Arial, Times New Roman или Courier. Знаковый состав большинства шрифтов включает в себя прописные и строчные буквы, цифры, знаки препинания, а также дополнительные символы из расширенного набора.

Размер (кегль) шрифта измеряется в пунктах :1 пункт равен 1/72 дюйма .

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

В меню Формат выберите командуШрифт (рис. 10.8).

Установите необходимый шрифт, размер, цвет, стиль начертания.

Изменение цвета текста

Выделите текст, который требуется изменить, и выполните одно из следующих действий:

В рамке Видоизменение можно установить флажки:

з

Рис. 10.9.

ачеркнутый – зачеркивание текста одинарной линией;

двойное зачеркивание – зачеркивание текста двой­ной линией;

верхний индекс – размер символов умень­шается, текст располагается выше;

нижний индекс – размер символов умень­шается, текст располагается ниже;

с тенью – рядом с символами появляется тень;

контур – показывается только контур симво­лов;

приподнятый – символы изображаются при­под­нятыми над поверхностью листа;

утопленный – символы изображаются уто­п­ленными в поверхность листа;

малые прописные – строчные буквы становятся заглавными, но меньшего размера;

все прописные – строчные буквы становятся заглавными;

скрытый – делает текст непечатаемым.

В поле Образец показан фрагмент текста с выбранными параметрами.

Если необходимо изменить межзна­ко­вый интервал , нужно:

В меню Формат выбрать командуШрифт , а затем перейти на вкладкуИнтервал и выполнить одно из следующих действий (рис. 10.10):

Кернинг регулирует интервалы между отдельными парами букв. При выборе параметровРазреженный илиУплотненный между всеми буквами устанавливаются одинаковые интер­ва­лы.

Изменение масштаба документа

Бывает нужно уменьшить масштаб документа таким образом, чтобы он весь помещался на экране. В этом случае с документом можно работать как с листом бумаги. И наоборот, часто бывает нужно увеличить масштаб изображения, например, чтобы рассмотреть или отредактировать мелкие детали графического объекта. При изменении масштаба изменяется только представление документа на экране, а не размер текста и графики, используемый для вывода на печать.

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

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

Примерно те же параметры масштабирования (но быстрее) можно задать и с помощью поля Масштаб на стандартной панели инструментов (рис. 10.12).

Как уже говорилось ранее, размер шрифта измеряется в пунктах. Она учитывается по размеру заглавных букв каждой гарнитуры. Вот поэтому разные шрифты одного размера выглядят неодинаково. Для большинства документов используется размер 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. Методика измерений и расчетные формулы. Деформация - это изменение формы и/или размеров тела без изменения массы под действием внешней силы

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

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