Чудеснов
молодой динамично развивающийся
16.04.2011 в 17:53
Пишет dead_mockingbird:

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

О веб-типографике. Основы


Сетевая типографика прошла долгий путь с тех пор, как Тим Бернерс-Ли щелкнул выключателем в 1991 году. В ту далекую эпоху царствования Интернет Эксплорера 1.0 хорошая веб-типографика была своего рода оксюмороном. Теперь все иначе. И дело не только в современных браузерах, которые поддерживают изображения (вздох), сегодня у нас на руках все возможности оживить наши веб-страницы при помощи великолепной типографики.
Во-первых, типографика – это не только выбор шрифта, и даже не умение отличать один шрифт от другого. Недавними экспериментами было доказано, что тренированные обезьянки способны правильно опознать Гельветику в 90 процентах случаев.


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

Контраст


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


Лично я не люблю читать длинные абзацы «инверсированного» текста (светлый шрифт на темном фоне). Задумайтесь, как часто вам приходится читать книги в подобном оформлении? Такой способ выделения подойдет для коротких абзацев на экране, хотя я нахожу утомительным читать инверсированные тексты любой длины.

Размер


После пришествия Web 2.0 я заметил один довольно раздражающий тренд, а именно – маленький шрифт. Я даже отправлял письма создателям сайтов с вежливыми предложениями увеличить размер шрифта по умолчанию. Я получил разнообразные ответы, начиная от грубых «купи себе очки» и заканчивая благодарными «спасибо, я никогда не задумывался, что мой шрифт может показаться мелким для обычного читателя». А однажды крошечный шрифт основных текстов защищали словами: «Он подходит к моему минималистичному дизайну», ну или что-то вроде того. До тех пор, пока у вас из читателей не останется один Супермен, забудьте о маленьком шрифте.


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

Иерархия


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


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

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


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


Запомните, это не правила, это скорее направляющие. Но соблюдайте контраст, размер, иерархию и пространство – и ваше типографика поднимется ввысь, как суфле Гордона Рамси. О, и на счет обезьянок я пошутил.

© статья была переведена с сайта ilovetypography.com/2008/02/28/a-guide-to-web-t...


URL записи

@темы: Репостинг, Дизайн