17 апреля 2009

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

Статьи

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

ТИПОГРАФИКА — художественная графика, использующая полиграфические средства и оформительские элементы: линейки, орнаменты, знаки и, главное, наборные шрифты. Т. решает задачи оптимального восприятия текста читателем.

И разговор в этой статье пойдёт не о том, как правильно выбрать шрифт. Тем более, что выбор шрифтов для сети невелик и стандартизирован: Arial, Book Antiqua, Century Gothic, Comic Sans MS, Courier New, Franklin Gothic Medium, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Palatino Linotype, Sylfaen, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Wingdings.

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

Контраст

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

Контраст

Лично я, как и англоязычный автор этой статьи, не люблю читать большие отрезки текста в реверсированном виде (т.е. светлый текст на тёмном фоне). Как часто мы видим подобные книги? А человеку удобно то, к чему он привык. (как немцам и латышам удобно было читать текстуру) Маленькие отрывки текста могут неплохо выглядеть на тёмном фоне, но очень утомительно читать такой текст сколь-нибудь долго.

Размер

С появлением Web 2.0 возникла одна раздражающая тенденция: очень мелкий шрифт.
«Это соответствует моему минималистичному дизайну»
Можно исходить из здравого смысла, заботы о посетителях сайта, стремления донести свою информацию до кого-то, а можно…даже не знаю из чего. Из какого-то абстрактного понятия «дизайна», которое потеряло связь со своей первопричиной. Ведь дизайн – это не искусство, это вещь прикладная и служить должна удобству людей. В общем это вам решать, а автор этой статьи (типограф) советует не ставить размер шрифта меньше 10 или 12px и по возможности делать его больше. Если сомневаетесь, сделайте больше.

А автор другой похожей статьи (дизайнер) говорит: «если сомневаетесь, делайте меньше» :) (тут её перевод)

Размер

Иерархия

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

web-typography3

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

1 из 12 мужчин и 1 из 200 женщин страдают дальтонизмом. Поэтому выделение чего бы то ни было только цветом не гарантирует, что это будет замечено.

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

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

web-typography4

Также добавлю, раз уж речь идет именно о веб-типографике, что забывать не стоит и о таких CSS аттрибутах, как:
letter-spacing (межбуквенное расстояние)
font-weight (жирность текста; она может задаваться численно!)
line-height (высота строки)
font-style (курсив/жирный)
text-transform (все строчные/все заглавные)

Вообще, таким вещам хорошо учиться следующим образом:
Заходишь на сайт с хорошей типографикой, нажимаешь кнопку «Просмотр исходного кода страницы», находишь там строчку типа
Если прибавить /wp-content/themes/blabla/style.css к адресу сайта, то откроется css файл, в котором описаны все стили сайта. И так, сравнивая значения разных аттрибутов с тем, что видно на сайте, можно учиться у великих.

Помните, это не правила, а только указания. Следуйте им – контраст, размер, иерархия и пространство – и на ваши сайты приятно будет смотреть.

Список литературы:
I love Typography

Знаете, что ещё добавить к этой статье?

Рубрики: ,

[ Написать комментарий ]

Написать комментарий