Что такое «Типографика»

Типографика —

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

Ранее правила типографики активно применялась в вёрстке плакатов, книг, газет и журналов, теперь типографика используется ещё и для отображения контента на экранах мониторов и гаджетов.

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

Классификация шрифтов

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

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

шрифт с засечками

Шрифты без засечек (гротески)

шрифт без засечек

Рукописные шрифты

рукописный шрифт

Шрифты акцидентные (декоративные)

акцидентные шрифты

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

Начертание

Чаще всего в тексте используется начертание Regular, заголовки же могут быть с начертанием SemiBold//Bold.

  • Толщина: светлое (Thin, Light), нормальное (Regular), полужирное (DemiBold, SemiBold), жирное (Bold, Extra Bold).
  • Наклон: прямое, курсивное.
  • Ширина: узкое (Narrow, Condensed), нормальное, широкое (Wide, Extended, Expanded).

Гарнитура - это набор из одного или нескольких начертаний шрифта.

гарнитура


некоторые начертания из гарнитуры шрифта Roboto.

Выбор размера шрифтов

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

  • 1,000 : 1,618 = 1,618
  • 1,618 : 1,618 = 2,618
  • 2,618 : 1,618 = 4,236
  • 4,236 : 1,618 = 6,854
  • 6,854 : 1,618 = 11,089

Или же воспользоваться www.modularscale.com - системой индивидуальных соотношений шрифтов. Здесь есть различные соотношения, основанные на принципах геометрии, природы и музыки.

Где скачивать и покупать шрифты

Бесплатные

Достаточно большая библиотека бесплатных шрифтов у Google Fonts (fonts.google.com). Здесь шрифты уже адаптированы под сайты, их можно скачать или напрямую подключить к сайту.

На просторах www.behance.net так же можно найти авторские шрифты, но нужно внимательно читать условия их использования, далеко не все подходят для коммерции.

Платные

  • www.myfonts.com/WhatTheFont
  • www.paratype.ru/catalog
  • fonts.adobe.com
  • www.artlebedev.ru/type
Наталья Иванова
Наталья Иванова

UI/UX дизайнер