Skip to content

Основы типографики для разработчика

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

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

Технические термины

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

Шрифт против Гарнитуры

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

Serif против Sans Serif

Мы можем смело выделить наличие двух основных типов классификаций шрифтов — с засечками (serif) и без засечек (sans serif). Шрифты с засечками обычно выполнены в чуть более классическом стиле, часто с небольшими резкими засечками на концах букв.

sans-vs-serif

Примеры serif-шрифтов — Times New Roman, Baskerville и Georgia. Шрифты без засечек выглядит более современными. Примерами шрифтов без засечек могут послужить Helvetica, Arial и Futura.

Из чего состоят символы?

Кратко рассмотрим анатомию букв.

Асцендер

Асцендер является любой частью строчной буквы, которая располагается выше x-высоты (x-height) буквы. Асцендер, в основном, имеют латинские буквы, такие как b, d, f, h, k, l. В русском алфавите асцендер есть у буквы б.

ascender

Десцендер

Десцендер — это любая часть строчной буквы, которая расположена ниже x-высоты буквы. Примеры: на латинице g, j, p, q, y; на кириллице у, р, д, ц.

descender

Апертура

Апертура — это изогнутое закрытое (или частично закрытое) пространство внутри буквы. Вот пример на латинице: b, d, e, o, s. Вот пример на кириллице: я, о, ь, ю, ф.

counter

Засечки

Как мы уже упоминали, засечки — это дополнительные украшения, когда мы рассматривали различия между гарнитурами serif и sans serif.

serif

Базовая линия

Базовая линия — воображаемая линия, на которой «сидят» все знаки.

baseline

Высота знака

Высота знака — это расстояние от базовой линии до самой верхней части заглавной буквы.

cap-height

X-высота

X-высота (x-height) — это высота основной части строчной буквы. Эта высота не включает в себя высоту асцендера и десцендера.

x-height

При работе с типографикой …

… Вы должны подумать о следующем:

Размеры

size

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

С каждым трендом в дизайне к нам приходит и тренд в типографику о том, какой размер текста использовать: маленький или большой. Подумайте, например, о целевой аудитории. Ваш сайт посещает молодые или взрослые люди, будут ли они нуждаются в большем размере текста?

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

Контраст

readability-and-contrast

Контрастность чрезвычайно влияет на читабельность блока текста. Когда мы говорим о контрасте есть две ключевые вещи, которые надо иметь в виду.

Во-первых, вам надо обеспечить контраст между цветом текста и фона. Если вы не уверены, действительно ли ваш текст будет достаточно контрастен, используйте инструмент Contrast Ratio от Lea Verou.

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

Пространство

space

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

Контент — это король любой странице. Именно он необходим пользователям. Поэтому не бойтесь отдать больше места для содержания.

Не стоит также забывать и о пространстве вокруг каждой части вашего текста. Задайте щедрую высоту строки (line-height), чтобы текст не теснился и легче читался. Как правило высота строки должна быть по крайней мере 140% до 160% от размера текста. Не стесняйтесь поиграть с данным свойством, чтобы получить хороший баланс для вашего текста.

Иерархия

hierarchy

Иерархия типографики относится к изложению содержимого на странице.

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

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

Web-шрифты

Мы еще будем обсуждать веб-шрифты более подробно в рамках данной серии уроков, но у вас должно быть твердое представление о возможностях веб-шрифтов.

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

Помимо того, что вы можете использовать собственные шрифты с помощью @font-face, Есть много онлайн-сервисов, которые помогут вам использовать больше веб-шрифтов, например:

и многие, многие другие. Даже такие сайты, как FontShop или MyFonts, которые раньше ограничивается продажей только шрифтов для рабочего стола, в настоящее время выходят на рынок веб-шрифтов, предлагая вам загружаемые шрифты, которые можно использовать с техникой @font-face.

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Работа с брендбуком компании

Улучшаем планировку с вертикальным ритмом