CSS шрифты
Свойства CSS шрифта определяют семейство шрифтов, смелостью, размер и стиль текста.
Разница между засечками и без засечек шрифты
Семьи CSS Font
В CSS существует два типа имен семейств шрифтов:
- родовой семьи — группа семейств шрифтов с подобным взглядом (как «Serif» или «») шрифт фиксированной
- семейство шрифтов — специфический семейство шрифтов (например , «Times New Roman» или «Arial»)
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
«Sans» means without — these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
| Примечание: На экранах компьютеров, без засечек шрифты считаются более удобными для чтения , чем засечек шрифты. |
Семейство шрифтов
Семейство шрифтов текста задается с помощью font-family собственности.
font-family свойство должно содержать несколько имен шрифта в качестве системы «запасного варианта». Если браузер не поддерживает первый шрифт, он пытается следующий шрифт, и так далее.
Начните с шрифта, который вы хотите, и заканчиваются общей семьей, чтобы браузер выбрать аналогичный шрифт в общей семье, если никакие другие шрифты не доступны.
Примечание: Если имя семейства шрифтов больше , чем одно слово, оно должно быть заключено в кавычки, как: «Times New Roman».
Более одного семейства шрифтов указывается в списке через запятую:
Для наиболее часто используемых шрифтов комбинаций, смотрите на нашем Web Safe сочетаний шрифтов .
Стиль шрифта
font-style свойство в основном
«Какие существуют виды шрифтов в CSS?» – Яндекс.Кью
Навязчивая реклама или не навязчивая, в случае с сайтам, это скорее вопрос не к качеству дизайна или композиции, а к расположению на самих сайтах.
Например у вас есть страница, на ней справа расположены баннеры. Они даже «прокручиваются» вместе с пролистыванием страницы. Если эти баннеры не мешают читать, мало вероятно, что они и вызовут дискомфорт. А значит пользователь не сочтет их навязчивыми. Даже если они довольно скверно нарисованы, и про отступы никто не слышал.
С другой стороны на том же сайте мы читаем чудную статью, и увлеклись процессом. Но тут все «соскакивает», половина текста куда-то уезжает, мы теряем место, где читали. А всему виной баннер, встроенный в текст, который не просто пролистывается, а «материализуется» в момент чтения в нужном месте…
Мы перевели дух и нашли место, где остановились, но тут снова неожиданность — поверх всего вылезает всплывающее окно с «уникальным предложением!». И снова мы не знаем, где остановились, а процесс чтения уничтожен на корню. А самое важное, что мы скорее всего даже не заметим, что в обоих случаях это были шикарнейшие баннеры, созданные высококлассными дизайнерами и сами по себе они неплохо продают продукцию.
Эти примеры хорошо иллюстрируют, что навязчивость и дискомфорт от рекламы на сайтах в первую очередь связан с их расположением и подходом к показам. Тонкая грань между расположением «так, чтобы пользователь точно посмотрел» и уничтожением процесса работы с контентом сайта (и это не обязательно чтения) как раз и ведет к навязчивому результату. И на это никак не может повлиять дизайн самих баннеров.
Но если говорить именно о внешней эстетики баннерной рекламы, то тут стоит следовать такому подходу, он поможет сделать хороший баннер (или приблизить его к идеалу):
Избегайте кислотных цветов. Они безусловно привлекут внимание (и это хорошо с точки зрения рекламы), но могут «испортят» дизайн сайта, а также «тянуть одеяло на себя» и отвлекать от контента.
Отступы — не панацея. Можно сделать красивый дизайн, расположив текст «в упор» к краям. Однако нужно использовать «сетку» четко выверять визуальное сочетание размеров и стилей шрифтов и надписей на баннере.
Минимализм — нет ничего хуже баннера, на котором мелким шрифтом расположена уйма информации. Часто люди очень волнуются, что их потенциальный покупатель что-то упустит. В результате дизайнера заставят: написать о компании, преимуществах, текущем товаре, торговое предложение, слоган с логотипом, а в конце 5 телефонов (потому, что один же мало), e-mail и десять социальных сетей… Конечно такой подход приведет не то, чтобы к навязчивости, но точно убьёт баннер с эстетической точки зрения. И такое творчество будет смотреться инородно на любом хорошем сайте.
Что тут можно посоветовать — будьте кратки. Красиво расположенное короткое предложение (которое заинтересует и запомнится, но не более), будет ценно и с точки зрения маркетинга, и с точки зрения дизайна. А все остальное (включая сферу деятельности) можно показать за счет изображения.
- Органичные цвета. И при использовании фото-изображений, и при внедрении графики в баннер, стоит обращать внимание на цветовую гамму. Она должна быть органичной, идеально сочетаться со шрифтом, и доставлять удовольствие. Тогда такой баннер будет и не навязчивым, и одновременно запомнится, и не испортит общее впечатление от сайта.
шрифты — расширенные возможности свойства font-variant
Современные технологии шрифтов поддерживают множество расширенных типографских и языковых функций. Используя их, один шрифт может предоставлять глифы для широкого спектра лигатур, контекстных и стилистических альтернатив, табличных и старых символов, маленьких прописных, автоматических дробей, штрихов и альтернатив, специфичных для данного языка.
Чтобы позволить авторам контролировать эти возможности шрифта, свойство font-variant было расширено для CSS3. Теперь оно функционирует как сокращение для набора свойств, которые обеспечивают контроль над стилистическими функциями шрифта.
Рис. 1. Один символ, множество вариаций глифаРасширенные возможности свойств шрифтов
1. Кернинг: свойство font-kerning
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 33, 29 -webkit-
Safari: 9.1, 7 -webkit-
Opera: 20, 16 -webkit-
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 4
Кернинг — это контекстная настройка межглифевого интервала. Свойство font-kerning позволяет избирательно изменять интервал между символами в зависимости от их формы. Для шрифтов, которые не содержат данных кернинга, это свойство не будет иметь видимого эффекта.
Свойство наследуется.
| font-kerning | |
|---|---|
| Значения: | |
| auto | Указывает, что кернинг применяется по усмотрению пользовательского агента на основе ряда факторов: размера текста, скриптов или других факторов, влияющих на скорость обработки текста. Значение по умолчанию. |
| normal | Указывает, что кернинг применяется. |
| none | Указывает, что кернинг не применяется. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
font-kerning: inherit;
font-kerning: initial;
Рис. 2. Соседние буквы без кернинга и с кернингом2. Лигатуры: свойство font-variant-ligatures
Поддержка браузерами
IE: 10
71
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android:
Samsung Internet: 5, 4 -webkit-
Лигатуры и контекстные формы — это способы объединения глифов в один знак-глиф для создания более гармоничных форм. Свойство font-variant-ligatures определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов.
Свойство наследуется.
| font-variant-ligatures | |
|---|---|
| Значения: | |
| normal | Указывает, что общие функции по умолчанию включены. Для шрифтов OpenType основные лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры — нет. Значение по умолчанию. |
| none | Указывает, что все типы лигатур и контекстных форм, охватываемых этим свойством, явно отключены. В ситуациях, когда лигатуры не считаются необходимыми, это может повысить скорость рендеринга текста. |
| common-ligatures | Включает отображение общих лигатур (функции OpenType: liga, clig). Для шрифтов OpenType общие лигатуры включены по умолчанию. |
| no-common-ligatures | Отключить отображение общих лигатур (функции OpenType: liga, clig). |
| discretionary-ligatures | Включает отображение дискреционных лигатур (функция OpenType: dlig). Какие лигатуры являются дискреционными или необязательными, определяется конструктором типов, поэтому авторам нужно будет обратиться к документации данного шрифта, чтобы понять, какие лигатуры считаются дискреционными. |
| no-discretionary-ligatures | Отключает отображение дискреционных лигатур (функция OpenType: dlig). |
| historical-ligatures | Включает отображение исторических лигатур (функция OpenType: hlig). |
| no-historical-ligatures | Отключает отображение исторических лигатур (функция OpenType: hlig). |
| contextual | Включает отображение контекстных альтернатив (функция OpenType: calt). Хотя эта функция не является строго лигатурой, как и лигатуры, она обычно используется для согласования форм глифов с окружающим контекстом. Для шрифтов OpenType эта функция включена по умолчанию. |
| no-contextual | Отключает отображение контекстных альтернатив (функция OpenType: calt). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures; font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures; font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures; font-variant-ligatures: contextual; font-variant-ligatures: no-contextual; font-variant-ligatures: inherit; font-variant-ligatures: initial;
Рис. 3. Варианты лигатур3. Подстрочные и надстрочные формы: свойство font-variant-position
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: —
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: —
Chrome for Android: —
Samsung Internet: —
Свойство font-variant-position используется для включения типографских и надстрочных глифов. Это альтернативные глифы, разработанные в том же блоке, что и глифы по умолчанию, и предназначенные для размещения на той же базовой линии, что и глифы по умолчанию, без изменения размера или изменения положения базовой линии. Они разработаны таким образом, чтобы соответствовать окружающему тексту и быть более читаемыми, не влияя на высоту строки.
Свойство наследуется.
Рис. 4. Подстрочные глифы (вверху) против типичных синтезированных индексов (внизу)| font-variant-position | |
|---|---|
| Значения: | |
| normal | Означает отсутствие включенных функций. Значение по умолчанию. |
| sub | Включает отображение вариантов нижнего индекса (функция OpenType: subs). |
| super | Включает отображение надстрочных вариантов (функция OpenType: sups). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
font-variant-position: inherit;
font-variant-position: initial;
Рис. 5. Верхний индекс альтернативного глифа (слева), синтезированный верхний индекс глифов (в середине) и неправильная смесь двух символов (справа)4. Преобразование в заглавные буквы: свойство font-variant-caps
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: —
Opera: 39
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 52
Samsung Internet: 6
Свойство font-option-caps контролирует использование альтернативных глифов для заглавных букв.
Свойство наследуется.
| font-variant-caps | |
|---|---|
| Значения: | |
| normal | Означает отсутствие функций преобразования. Значение по умолчанию. |
| small-caps | Включает отображение маленьких заглавных букв (функция OpenType: smcp). Глифы маленьких заглавных букв обычно используют форму заглавных букв, но уменьшены до размера строчных букв. |
| all-small-caps | Позволяет отображать заглавные буквы как заглавными, так и строчными буквами (функции OpenType: c2sc, smcp). При использовании обычных маленьких заглавных букв любой заглавный символ отображается в полном верхнем регистре, а строчные — меньше. Однако при использовании этого ключевого слова эти заглавные буквы отображаются с меньшим размером. |
| petite-caps | Включает отображение миниатюрных заглавных букв (функция OpenType: pcap) Если шрифт не поддерживает миниатюрные заглавные буквы, свойство ведет себя так, как будто вместо него было задано small-caps. |
| all-petite-caps | Позволяет отображать маленькие заглавные буквы как в верхнем, так и в нижнем регистре (функции OpenType: c2pc, pcap). В противном случае ведет себя так, как будто вместо него было задано all-small-caps. |
| unicase | Включает отображение сочетания маленьких заглавных букв для прописных букв с обычными строчными (функция OpenType: unic). |
| titling-caps | Предназначен для заголовков и названий в тексте (функция OpenType: titl). Включает отображение специальных заглавных букв для заголовков, с менее жирным начертанием, чем у обычных заголовков. Если шрифт не поддерживает эту функцию, ключевое слово не имеет видимых действий. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: inherit;
font-variant-caps: initial;Доступность этих глифов зависит от того, определена ли данная функция в списке возможностей шрифта. Для обратной совместимости с CSS 2.1, если указаны small-caps или all-small-caps, но глифы small-caps недоступны для данного шрифта, браузеры должны имитировать шрифт small-caps, например, взяв обычный шрифт и заменив глифы для строчных букв масштабированными версиями глифов для заглавных букв по аналогии с text-transform: uppercase (заменить глифы как для заглавных, так и для строчных букв в случае all-small-caps).
Если для шрифта, который не поддерживает эти функции, указано petite-caps или all-petite-caps, свойство ведет себя так, как если бы small-caps или all-small-caps были указаны соответственно.
Если для шрифта, который не поддерживает эту функцию, указано unicase, свойство ведет себя так, как будто small-caps применлся только к заглавным буквам в нижнем регистре.
Рис. 6. text-transform: uppercase и font-variant-caps: small-caps5. Форматирование цифр: свойство font-variant-numeric
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: 9.1
Opera: 39
iOS Safari: 9.3
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 6.2
Свойство font-variant-numeric контролирует использование альтернативных глифов для чисел, дробей и порядковых маркеров.
Свойство наследуется.
| font-variant-numeric | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| lining-nums | Выравнивает все цифры по базовой линии текста (функция OpenType: lnum). |
| oldstyle-nums | Отображает некоторые знаки (3, 4, 7, 9) таким образом, чтобы они уходили нижним краем под базовую линию текста (функция OpenType: onum). |
| proportional-nums | Включает отображение пропорциональных чисел (функция OpenType: pnum). |
| tabular-nums | Включает отображение табличных чисел — одинаковой ширины, которые легко выравниваются, как в таблицах (функция OpenType: tnum). |
| diagonal-fractions | Включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой (функция OpenType: frac). |
| stacked-fractions | Включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой (функция OpenType: afrc). |
| ordinal | Включает отображение буквенных форм, используемых с порядковыми номерами — специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском (функция OpenType: ordn). |
| slashed-zero | Включает отображений нулей перечеркнутыми косой линией (функция OpenType: zero). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-numeric: normal;
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: oldstyle-nums stacked-fractions;
font-variant-numeric: inherit;
font-variant-numeric: initial;
Рис. 7. Примеры значений свойства font-variant-numeric6. Визуализация восточноазиатского текста: свойство font-variant-east-asian
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 63
Safari: —
Opera: 50
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 63
Samsung Internet: —
Свойство font-variant-east-asian позволяет контролировать замену и размер глифов в восточноазиатском тексте.
Свойство наследуется.
| font-variant-east-asian | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| jis78 | Включает рендеринг форм JIS78 (функция OpenType: jp78). |
| jis83 | Включает рендеринг форм JIS83 (функция OpenType: jp83). |
| jis90 | Включает рендеринг форм JIS90 (функция OpenType: jp90). |
| jis04 | Включает рендеринг форм JIS2004 (функция OpenType: jp04). |
| simplified | Включает рендеринг упрощенных форм (функция OpenType: smpl). |
| traditional | Включает рендеринг традиционных форм (функция OpenType: trad). |
| full-width | Включает рендеринг символов одинаковой ширины, квадратной формы (функция OpenType: fwid). |
| proportional-width | Включает рендеринг символов разной ширины (функция OpenType: pwid). |
| ruby | Включает отображение глифов вариантов ruby (функция OpenType: ruby). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-east-asian: normal;
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
font-variant-east-asian: ruby;
font-variant-east-asian: ruby full-width jis83;
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
Рис. 8. Пример вывода текста с font-variant-east-asian: jis787. Общее сокращение для рендеринга шрифтов: свойство font-variant
| font-variant | |
|---|---|
| Значения: | |
| normal | Сбрасывает все подсвойства вариантов шрифтов к их начальному значению. Значение по умолчанию. |
| none | Устанавливает для font-variant-ligatures значение none и сбрасывает все остальные свойства шрифта на значение по умолчанию. |
| значения отдельных свойств вариантов шрифта | Определяет ключевые слова и функции, относящиеся к конкретному свойству. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство font-variant является сокращением для всех подсвойств вариантов шрифта. Не сбрасывает значения font-feature-settings.
Синтаксис
font-variant: normal;
font-variant: none;
font-variant: small-caps;
font-variant: common-ligatures small-caps;
font-variant: inherit;
font-variant: initial;8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Свойство font-feature-settings обеспечивает низкоуровневый контроль над функциями шрифтов OpenType. Оно предназначено для предоставления доступа к функциям шрифтов, которые не используются широко, но необходимы для конкретного случая использования. Авторы обычно должны использовать font-variant и связанные с ним подсвойства, когда это возможно, и использовать это свойство только в особых случаях, когда его использование является единственным способом доступа к определенной редко используемой функции шрифта.
Свойство наследуется.
| font-feature-settings | |
|---|---|
| Значения: | |
| normal | Значение означает, что из-за этого свойства не происходит никаких изменений в выборе или позиционировании глифа. Значение по умолчанию. |
| строка и/или целое число/on/off | Строка представляет собой тег OpenType. Целое число, если присутствует, указывает индекс, используемый для выбора символа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для логических объектов значение 1 включает функцию. Для объектов, не являющихся логическими, значение 1 или больше включает объект и указывает индекс выбора объекта. Значение on является синонимом 1, а off является синонимом 0. Если значение опущено, принимается значение 1. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-feature-settings: normal;
font-feature-settings: "smcp", "swsh" 2;
font-feature-settings: "dlig" 1;
font-feature-settings: "smcp" on;
font-feature-settings: "c2sc";
font-feature-settings: "liga" off;
font-feature-settings: "tnum", "hist";
font-feature-settings: "tnum" "hist";
font-feature-settings: "PKRN";
font-feature-settings: inherit;
font-feature-settings: initial;По материалам CSS Fonts Module Level 3
Как правильно подобрать шрифт для сайта
Создание потрясающих шрифтовых композиций – это скорее искусство, чем наука. Действительно, красота шрифтов не имеет границ. И хотя нет абсолютных правил их сочетания между собой, все же хорошо следовать лучшим практикам веб-типографики. В данной статье показаны лучшие приемы сочетания шрифтов, а также традиционные ошибки.
1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)
Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.
Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.
2. Избегайте шрифтов одного класса
Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.
А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.
3. Присвойте шрифтам разные роли
Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.
Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!
4. Контрастная насыщенность шрифтов
Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну.
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.
Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.
5. Создайте на странице различную тональность текста
В типографии тональность достигается различными способами – толщиной, размером, шириной строк, кернингом и пр. Самый простой способ «увидеть» тональность – смотреть на макет не прямо, а боковым зрением. Посмотрите на пример внизу, направив взгляд немного справа или слева от картинки, так, чтобы вы уже не могли читать текст, но могли видеть его общий тон. При таком взгляде вы заметите, что пример слева сливается в один серый блок текста, немного темнее внизу. А вот пример справа отчетливо сохраняет свою визуальную иерархию. Как бы далеко вы не находились от текста, у вас не возникает сомнений по поводу того, где находится заголовок, и куда ваш взгляд перейдет потом.
Умное использование текстовой тональности усиливает визуальную иерархию на странице, что напрямую связано с передачей смысла сообщения.
6. Не смешивайте настроения шрифтов
Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.
Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.
7. Сочетайте яркое с нейтральным
Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.
Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon, который относится к классу Old style, но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.
8. Избегайте несоизмеримых сочетаний
Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.
Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.
9. Будьте проще – не используйте более двух шрифтов
Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.
Как добиться всего этого без лишних усилий? Во-первых, если вы возьмете шрифты из одной и той же гарнитуры, то наверняка получите отличную визуальную совместимость даже не задумываясь над этим. Во-вторых, мы выбрали проверенную временем комбинацию – сочетание нейтрального заголовочного шрифта и опять же нейтрального шрифта для текста. И Helvetica Neue, и Garamond обладают выраженной, но нейтральной личностью, и они могут сочетаться в сложных макетах друг с другом, потому что мы изначально заложили строгую иерархию. Следование правилам при использовании правильных шрифтов помогает достичь высоких результатов без лишних затрат энергии.
10. Используйте различные размеры шрифта
Самый простой принцип мы оставили напоследок: используйте разные размеры шрифта для достижения контраста между ними. На примере слева заголовок и текст сливаются в один серый кирпич. Используйте боковое зрение — прием, описанный выше, — чтобы взглянуть на оба примера. В то время как левый текст сливается, в правом примере наблюдается огромная разница между заголовком и содержимым.
Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.
В заключение
Не существует жестких и быстрых правил комбинирования шрифтов, поэтому процесс принятия правильных вариантов отнимает много времени и, возможно, оказывается даже немного утомительным. Тем не менее, хорошо иметь под рукой удобный набор принципов и правил подбора шрифтов, а также понимать результаты некоторых типографских ситуаций, чтобы избежать ошибок и направить процесс в русло достижения нужного результата.
(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine (в ред. автора)