Типографика для Web прошла долгий путь развития с 1991 года. Во времена существования IE 1.0 хорошая веб типографика была чем-то непонятным и противоречивым. Сегодня все изменилось: наши браузеры не только поддерживают изображения, но мы получили возможность оживить наши веб-странички с помощью замечательной типографики.
Начнем с того, что типографика определяется не только выбором шрифтов и даже не различием гарнитур шрифтов.

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

Контраст

Бледный розовый текст на бледном голубом фоне, возможно, подойдет к вашей футболке, но будет абсолютно не читабельным. Текст существует для того, что бы его можно было читать; убедитесь, что он достаточно контрастен по отношению к вашему фону. Если вы не уверены в контрасте, тогда сделайте скрин вашей страницы и откройте изображение в фотошопе или любом другом редакторе и переведите его в grey-scale. И вы сразу увидите достаточно ли контраста. Роберт Брингхёрст, превосходный мастер типографики писал: «Типографика существует, что бы славить контент». Славим ли мы его, если создаем дизайн странички, текст на которой сложно прочитать?

Black fon

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

Размер

С рождением Web 2.0 я заметил очень раздражающую модную тенденцию,  а именно использование маленьких размеров шрифтов. Я даже писал авторам сайтов и вежливо просил увеличить размер шрифта. Получал разнообразные ответы, от жестких: «купи себе очки»; до благодарности: «даже не подумал, что мой тип шрифта мог показаться маленьким для среднестатистического читателя». Смешно, но слышал в защиту крошечного текста: «Он подходит моему минималистическому стилю дизайна» — или что-то подобное. Похоже это отображает нечто иное… Ну если у вас все читатели Пауэр герлы и Супермены со зрением в 20/20, тогда мелкие шрифты для вас.

очень мелкий шрифт

Не устанавливайте размер шрифта ниже 10 или 20px для основного контента, а если возможно, сделайте его больше. Помните, то, что на вашем 65 inch плазменном мониторе смотрится читабельно, на 15 inch MacBook возможно не будет. Если вы сомневаетесь, то сделайте размер больше. Размер текста на ILT установлен 16 px.

Иерархия

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

Иерархия так же может быть достигнута другими путями. Мы отметили всего лишь разнообразие размеров шрифтов, но так же можно использовать различные стили; например, all-caps или использование курсива для подзаголовков. Так же, Serif и sans serif гарнитура может быть смешана для получения хорошего эффекта.

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

Позвольте вашему тексту дышать. Не бойтесь оставлять пустое пространство на ваших страницах. Белое пространство позволит сфокусировать внимание на тексте, который говорит громче всего, так позвольте ему быть услышанным. Следующий момент, не забывайте о line-height CSS, межстрочный интервал по меньшей мере должен составлять 140% от вашего размера текста (помните, что речь здесь идет о веб-типографике). Лучшие разработчики шрифтов прилагают очень много усилий в создание белого микро пространства внутри шрифта. Они проводят бесконечное количество часов в попытках достигнуть баланса между между черным цветом букв и окружающим их белым фоном.

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

Источник статьи