Гид по веб типографике

Гид по веб–типографике | Основы основ

Типографика для веба прошла долгий путь с тех пор как Тим Бёрнерс-Ли (основатель интернета) щёлкнул выключателем в 1991 году. Ещё во времена IE 1.0, хорошая типографика была чем-то вроде оксюморона. Сегодня всё совсем иначе. У нас не только браузеры, которые поддерживают изображения (уф!), но и возможность оживить наши веб страницы прекрасными шрифтами.

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

helvetica-monkey

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

Контраст

Представьте себе бледно-розовый текст на бледно-синем фоне, возможно у вас есть такая футболка, но читать его на ней не очень удобно. Текст существует для того, чтобы быть прочитанным; убедитесь, что он достаточно контрастирует с фоном. Если вы неуверенны, что текст достаточно контрастен, тогда сделайте скриншот своего экрана, откройте свой графический редактор и переведите изображение в чёрно-белый режим. Так вы увидите достаточно ли контраста. Robert Bringhurst, непревзойдённый писатель о типографике пишет, — типографика нужна, чтобы придать особенность контенту. Делаем ли мы содержимое особенным, если мы конструируем наши страницы таким образом, чтобы текст, содержимое в целом, было трудно прочитать?

contrast-text

Лично я ненавижу читать длинные отрывки инвертированного текста (т.е. светлый текст на тёмном фоне); как часто мы видим книги подобные этой? Это может быть целесообразно коротким отрезкам текста на экране, но я нахожу подобное чтение в течение длительного времени достаточно утомительным.

Размер

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

big-enough-type

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

Иерархия

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

hierarchy

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

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

Позвольте вашему шрифту дышать. Не бойтесь превратить вашу страницу в пустое место. Это белое пространство может акцентировать внимание на тексте — и этот текст заговорит громче, позволяя себя слышать. Далее, помните про свойство line-height (интерлиньяж, межстрочный интервал текста); хорошо бы взять за правило брать line-height как минимум 140% от размера текста (помните, что речь идёт о веб-типографике). Хорошие шрифтовые дизайнеры проработают пустое пространство внутри каждой шрифтовой единицы. Они проводят бесчисленные часы, пытаясь достичь баланса между чёрным шрифтом и пространством, которое его окутывает. Подобным образом и нам нужно время, чтобы рассмотреть в белом макро пространстве, ту самую пустоту вокруг текста.

space

Помните, это не правила, а скорее рекомендации. Тем не менее, следуйте им — контраст, размер, иерархия и пространство — и ваша типографика взойдёт как одно из суфле Гордона Рамзи. О, кстати, я пошутил про обезьян 😉

Оригинал: A guide to Web typography

FacebookTwitterGoogle+VKПоделиться