В этой статье мы кратко рассмотрим основные понятия в типографике, классы шрифтов, основные правила и рекомендации по работе с текстом, а также немного полезных фишек.
Типографика - это целая наука о шрифтах, овладеть которой не так-то просто и быстро, но если вы все же справитесь с этим - вас ждет повсеместная вечная боль и слезы. Вас станут раздражать шрифты в объявлениях, рекламных вывесках, телевизоре, сайтах, да где угодно.
К сожалению, бОльшая часть людей совершенно ничего не смыслит в шрифтах, а тем более не осознает всей мощи грамотно скомпонованного текста. Можно легко проверить, имеется ли у человека хотя бы базовая грамотность в типографике: попросите назвать хотя бы 5 его любимых шрифтов. А вы справились с заданием?
Начнем с классификации шрифтов:
Антиква - шрифт с засечками (serif)
Гротеск - шрифт без засечек (sans-serif)
Разница очевидна. Выше представлены два основных класса шрифтов, есть еще брусковые (характеризуются мощными угловатыми засечками) и рукописные (тут все очевидно из названия). Существуют и другие, но они не так популярны.
Что касается субъективных ощущений, то мне, в большинстве случаев, больше импонируют гротескные гарнитуры (о гарнитурах ниже), но это не означает, что в своем дизайне я не использую антиквенные.
У каждого шрифта есть свое чёткое предназначение, так например, для обеспечения наибольшей читаемости текста необходимо использовать антиквенные шрифты, поскольку они обеспечивают наибольший контраст, а засечки служат для того, чтобы благодаря ним человек в подсознании выстраивал весь текст в одну сплошную линию.
Вы никогда не замечали, что при длительном чтении шрифты с засечками позволяют не терять концентрацию? Да, не зря ведь подавляющее большинство книг использует именно их. Они меньше заставляют нас напрягаться при чтении благодаря той самой сплошной линии, о которой уже говорилось.
В свою очередь, гротескные шрифты выглядят более аккуратно и утонченно, и несомненно являются лидерами в цифровом пространстве на сегодняшний день.
Возвращаясь к теме удобочитаемости текста: если говорить о цвете, то самым читаемым будет черный текст на белом фоне. Если наоборот - черный будет сильно давить на глаза и привлекать внимание к себе. Почитав такой текст хотя бы пару минут у вас начнут дико рябить глаза.
Еще один совет - не используйте в вебе абсолютный черный цвет (#000000), по крайней мере для фонов. Такая рекомендация связана с тем, что в природе по сути нет такого абсолютно черного цвета, а также он является чрезмерно глубоким и может вызывать много ненужного внимания к себе. Попробуйте использовать чуть менее насыщенные черные цвета (#050505, #070707 и тд).
Основные понятия в типографике
Гарнитура (семейство шрифтов) - это шрифт или шрифты, которые имеют стилистическое единство начертания. Зачастую понятие "гарнитура" путают с понятием "шрифт" и это действительно очень грубая ошибка. Звучит сложно и совершенно непонятно, но легко объясняется на примере: есть гарнитура Helvetica, она включает в себя обычный, курсивный, жирный, средний и прочие шрифты. Надеюсь суть ясна.
Кегль - это высота буквы (включает все ее нижние и верхние выносные элементы). Зачастую под "размером" шрифта имеется ввиду именно кегль.
Интерлиньяж (межстрочный интервал) - расстояние между базовыми линиями строк.
Кернинг - расстояние между буквами. Делается вся эта процедура для повышения удобочитаемости, никому не нравится читать сжатый текст, это даже смотрится не эстетично (это же касается и пункта ниже).
Трекинг - межбуквенные пробелы, применяемые к группе символов. Грубо говоря это можно назвать массовым кернингом, хоть это и не совсем правильно. Трекинг позволяет "разрядить" текст или же наоборот, уплотнить его (сильно не увлекайтесь).
Еще немного советов и фишек
- Как я уже говорил в своем видео-обзоре, в вебе не рекомендуется использовать размер шрифта меньше 12 px. Порог комфортного чтения - 14 px, а также помните про людей с ограниченными возможностями;
- Не используйте больше двух-трех гарнитур шрифтов в пределах одной работы, будь то сайт, постер, баннер или еще что;
- Подходите грамотно и осознано к выбору шрифта. Например пресловутая гарнитура Lobster хорошо подойдет к кулинарной тематике, но Poiret One или Playfair Display - очень вряд ли.
- Старайтесь делать выравнивание текста по левому краю. В редких случаях - по центру, по правому краю - почти никогда. Это обусловлено удобочитаемостью и нашим восприятием в целом.
- Делайте акценты. Сделайте заголовок черным цветом, а основному тексту под ним поставьте непрозрачность в 70-90%. Так вы уменьшите визуальную нагрузку на читателя и его глаза не будут разбегаться при виде двух текстов визуально одинаковых по значимости.
- Понравился шрифт на каком-то сайте и очень захотелось его себе? Не проблема, расширение для браузера Fontface Ninja поможет вам в этом. Просто включите его и наведите курсор на текст, вы увидите название его гарнитуры, размер, начертание и даже цвет.
А на этом все, надеюсь вы узнали что-то новое для себя и готовы применять знания на практике, успехов!
Кстати
У меня есть ламповый телеграм-канал, где я регулярно пишу новости, разбираю работы подписчиков, постеры в метро своего города и другие интересные людям вещи (редизайн вДудь, худшие и лучшие логотипы студии Артемия Лебедева, новый логотип BlaBlaCar и т.д.) Также пишу статьи и делюсь полезными инструментами для дизайнеров. Иногда пишу на Хабре.