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

Итак, эта статья посвящена тем, кто потерялся в океане типографики.

Мы поговорим об основах типографики, о том, какие бывают шрифты и о структуре шрифтов.

Гарнитуры против шрифтов — в чём разница?

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

Гарнитура — это набор стилистически похожих символов, которые можно писать/печатать. Это цифры, буквы, символы. Шрифт — это более узкое понятие, которое определяется несколькими факторами, например, размером и стилем. Вообщем, Arial — это гарнитура, а Arial Bold — это шрифт.

Классификация

Шрифты можно разделить на несколько групп — с засечками (serif), без засечек (sans-serif), рукописные (script), акцидентные (display). Впрочем, есть и другие виды классификации.

Шрифты с засечками, Антиква (Serif)

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

У шрифтов с засечками довольно много подтипов — например, Old Style («Старый стиль» — так же их называют humanist, гуманистическая антиква) — самые первые шрифты этой классификации, они использовались аж в далёких 1400-х гг. Их отличительная черта — что та часть символа, которая расположена под наклоном, делается тонкой. Примеры шрифтов — Adobe Jenson, Centaur, и Goudy Old Style.

Transitional serifs (Переходная антиква) — использовались в 1700-х годах. Сюда входят такие шрифты, как Times New Roman и Baskerville, а так же Caslon, Georgia, и Bookman. У них разница между толстыми и тонкими частями букв более заметна, чем у Old Style, но менее заметна, чем у Modern.

Modern serifs (Антиква нового стиля) — используются уже после 1700-х годов, и имеют сильный контраст между толстыми и тонкими частями символов. Сюда входят такие шрифты, как Didot и Bodoni.

И, наконец, Slab serifs (Брусковые шрифты) — вообще имеют одинаковую толщину всех линий, и крупные засечки на концах

Рубленые шрифты, Гротески (Sans Serif)

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

Вот 4 основных вида рубленых шрифтов: Grotesque (Старый гротеск), Neo-grotesque (Новый гротеск), Humanist (Гуманистический), и Geometric (Геометрический).
Старые гротески — самые первые, они похожи на шрифты с засечками, но без засечек.
Например, Franklin Gothic и Akzidenze.

Новые гротески имеют упрощённый, по сравнению со старыми гротесками, вид. Очень многие из самых популярных ныне шрифтов это новые гротески, например, MS Sans Serif, Arial, Helvetica и Univers.

Гуманисты — более каллиграфичны, чем все остальные рубленые шрифты (то есть у них изменяется толщина линий). К ним относятся, например, Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande — их часто используют в наполнении тела сайта.

Геометрические основаны на правильных фигурах, например, «О» — это круг, и т.п.; считаются наиболее современными рубленными шрифтами. Примеры — ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Рукописные (Script)

Рукописные шрифты базируются на почерке. Существует две разновидности таких шрифтов — формальные (formal) и кежл (casual). Формальные как будто написаны от руки, они происходят из 17-18 вв. Некоторые шрифты основаны на почерках известных мастеров, таких, как George Snell и George Bickham. Как пример современного шрифты можно взять Kuenstler Script. Красив и элегантен, он не подходит для основного текста страницы.

Кежл-шрифты — это более современный вариант, зародился он в 20 веке. Он менее формальный, часто с жирной обводкой и с эффектом мазков кисти. К таким шрифтам относятся Mistral и Brush Script.

Акцидентные шрифты (Display)

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

Неалфавитные шрифты (Dingbats)

Неалфавитные шрифты — это те шрифты, которые вообще не содержат букв, но содержат символы и орнаменты.

Пропорциональные против моноширинных

В пропорциональных шрифтах символ занимает столько места, сколько требует его естественное написание. Например, Times New Roman является пропорциональным шрифтом. А вот у моноширинных шрифтов все символы одной ширины. К таким шрифтам относится, например, Courier New.

Настроение

Настроение шрифта очень влияет на то, уместно ли его будет использовать в той или иной ситуации. Довольно часто используются и контрасты — деловой стиль сочетается с неформальным, светлый с драматичным. К примеру, Times New Roman — строгий шрифт, и именно он так часто используется для деловой переписки. А вот, например, Helvetica вообще меняет своё настроение в зависимости от окружающих шрифтов.

Толщина и стиль

По толщине бывают шрифты: light, thin, regular, medium, bold, heavy, или black.

Есть три стиля шрифтов — italic, oblique, и small caps. Small caps обычно используются для заголовков.

Italic и oblique — взаимозаменяемы, хотя это различные стили. Оblique — наклонный вариант обычных шрифтов. Чтобы получить его, достаточно воспользоваться функцией Free Transform-distort в Photoshop. А вот Italic — это уже отдельный набор символов, который отвечает за наклонный вариант написания шрифта.

Структура шрифта

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

Линия шрифта (baseline) — воображаемая линия, на которой расположен текст. Иногда закруглённые шрифты немного отступают от линии шрифта.

Линия строчных (meanline) обозначает высоту большинства строчных букв, обычно определяется по высоте буквы «х». Отсюда же происходит и понятие x-height.

Верхняя линия прописных (Cap) — высота заглавной буквы «А».

На рисунке выше показано три общие части всех букв.

Основной штрих, Штамб (Stem) — основная вертикаль каждого символа, в том числе и наклонная.

Перекладина (Bar) — горизонтальная часть шрифта.

Овал (Bowl) — закруглённая часть шрифта.

Верхний выносной (Ascender) — торчащая вверх часть таких букв, как «d», «h», и «б».

Нижний выносной элемент (Descender) — торчащая вниз часть таких букв, как «p», «q» и «ф».

Засечки — отличительная черта шрифтов с засечками. У одних шрифтов они более ярко выражены, а у других — менее ярко.

Апертура (Aperture) — обозначает зазор у открытых символов, таких, как “A”, “с” или “m”.

Ухо (Ear) это декоративное дополнение символа, как, например в букве “g” на примере выше.

Соединительный штрих (Hairline) это тончайшая часть шрифта с засечками.

Перекладина (Crossbar) — горизонтальная линия, как, например, в символах “A” и “H”.

Капля (Terminal) — круглое или овальное (каплевидное) окончание штриха в рисунке некоторых знаков шрифта.

Петля (Loop) бывает только на некоторых буквах “g” нижнего регистра, и может быть целиком закрыта или частично закрыта.

Шип (Spur) — крошечная зазубринка на некоторых буквах, например, на “G”.

Присоединение (Link) соединяет верхнюю и нижнюю часть буквы “g”.

Спина (Spine) — центральная кривая, которая есть у буквы “s”.

Хвост буквы (Tail) — декоративная линия , например, на букве “R” или “Q”.

Концевой элемент (Terminal, Finial) — окончание штриха без засечки.

Заплечико (Shoulder) — закруглённая линия, которая отходит от основного штриха.

Источник