Анатомия гарнитуры

Гарнитуры бывают разного вида и формы. Основные группы — с засечками (serif) и без засечек (sans-serif), но в каждой группе есть множество стилей. Стили шрифтов с засечками: old style, transitional, neoclassical, slab, clarendon, glyphic. Стили шрифтов без засечек: grotesque, square, humanistic, geometric.

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

Изображение 1: Анатомия гарнитуры

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

Наиболее заметны типографический подъемы и спуски. Они определяют формы букв и сами буквы.

Восходящие (Ascenders) — типографический подъем, координаты верхней линии шрифта. Соответствует размещению верхней границы кегельной площадки. Это часть букв, которая находится за линией x-высоты (x-height).

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

Высота шапки (Cap height) — отмечает самые высокие части заглавных букв.  Обратите внимание, что восходящие идут дальше этой линии. Также заметьте, как некоторые буквы немного выходят за пределы базовой линии и линии x-высоты.

Цвет и вес шрифта

В предыдущих уроках я говорил про цвет шрифта. Если вы помните, я написал, что в типографике под цветом шрифта мы не имеем ввиду реальный цвет. Мы говорим о том, насколько тяжелым выглядит черный шрифт на светлом фоне. Давайте проведём экспресс-тест. У нас есть 2 гарнитуры: Merriweather и Georgia. Оба — прекрасные гарнитуры с засечками. Давайте сделаем их размером 16 пикселей, применим тёмно-серый цвет и поместим их на светлый фон. Давайте поместим их рядом, чтобы мы могли легко сравнить их.

Изображение 2:  Параграфы в гарнитурах Merriweather Georgia расположены рядом друг с другом.

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

Теперь давайте сделаем шаг назад и посмотрим на более длиные абзацы. Для обоих гарнитур установлен вес regular, одинаковый размер и высота строки. Тем не менее, они выглядят очень по-разному. У Georgia контраст выше, чем у Merriweather, что делает его более светлым. Это, совместно с другими особенностями (высота и размер букв) даёт Gerogria меньше пространства на странице. Это то, что мы имеем в виду, когда говорим «цвет шрифта» в типографике.

Изображение 3:  Контраст также является основным фактором, влияющим на то, насколько «тяжелой» выглядит гарнитура. Merriweather — гарнитура с малым контрастом, тогда как Bodoni — гарнитура с высоким контрастом.  Посмотрите поближе на штрихи каждой буквы. Разница очевидна.  

X-высота

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

Изображение 4:  Merriweather кажется тяжелее и больше, чем текст такого же размера в Georgia.

Давайте сравним признаки обеих гарнитру. Уделите несколько минут, чтобы разглядеть и сравнить их. Готово? Хорошо, давайте посмотрим. Нарисуем линии: базовую линию, х-высоту, высоту шапки и линию, где заканчиваются спусковые. Давайте сделаем это только для гарнитуры Merriweather, чтобы было проще заметить разницу.

Изображение 5:  X-высота Merriweather больше, чем у Georgia.

Базовая линия лежит прямо у нижнего края строчной буквы x, а линия x-высоты находится прямо на вершине этой буквы, откуда и получила название x-высоты. Я нарисовал линии достаточно длинными, поэтому они проходят через буквы Georgia. Вы уже заметили разницу? Буквы одного и того же слова, одного и того же размера, но в гарнитуре Georgia не касаются x-высоты, которая идет от такого же слова в Merriweather. X-высота Georgia будет короче, чем у Merriweather. Взгляните на линию высоты шапки и вы заметите то же самое. Высота букв в Georgia, заглавных и строчных, короче, чем такие же буквы в Merriweather. Поэтому гарнитура Merriweather выглядит выше, чем Georgia.

Мы измеряем размер шрифта в вебе в конкретных размерах. Будь то пиксели, EM или REM — мы всегда получаем набор типов с определенным размером, установленным в пикселях. Но эти пиксели не имеют большого значения в типографике. Все зависит от х-высоты шрифта.

Гарнитуры с большей x-высотой считаются современными и более удобными для чтения. Merriweather, Roboto Slab и Freight Text — отличные примеры современных сертифицированных шрифтов с большой x-высотой.

Гарнитуры с меньшей х-высотой считаются менее современными и классическими. Лучшие примеры таких гарнитур — Garamond, Baskerville и Bodoni.

Мы вернемся к x-высоте в уроке, посвященном сочетанию шрифтов.

Уроки

1/10 — Введение в типографику

2/10 — Равносторонний треугольник идеального абзаца

4/10 — Выбор гарнитур

 

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

По материалам https://betterwebtype.com/