Введение в основы типографии

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

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

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

Напротив, она возможна, и даже более того - во многих случаях, возможности предлагаемые интернетом превосходят возможности традиционной типографии! И не потому, что у веб-дизайнера имеются более продвинутые средства по управлению параметрами текста и его позиционированием, но по причине того, что пользователи интернета имеют возможность настроить параметры отображения шрифтов «под себя».

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

1. Что означает «веб-шрифты»?

Сервисы, наподобие FontDeck упрощают скачивание большого количества шрифтов.

Раньше считалось, что если вы хотите чтобы ваши шрифты верно отображались на любом компьютере, то необходимо придерживаться использования горстки типовых шрифтов, общих для всех компьютеров и браузеров. Ваш выбор был ограничен шрифтами Helvetica (или Arial на PC), Georgia, Times, Verdana или несколькими версиями Courier. Ах да, чуть не забыл Comic Sans!

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

Но, благодаря таким сервисам, как Typekit, Google Web Fonts и FontDeck, несколько лет назад все кардинально изменилось.

Впервые, веб-дизайнерам стало доступно все многообразие шрифтов и веб-дизайн шагнул на новую ступеньку в своем развитии.

Но как правильно выбрать шрифт из свалившегося на голову разнообразия? Вот некоторые ориентиры и правила...

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

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

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

2. Понятия «leading», «tracking» и «kerning»

Понятие «leading» связано с направляющими горизонтальными линиями, относительно которых располагается текст, и идет еще из тех времен, когда текст печатался с помощью печатающих прессов.

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

Эти возможности, помимо всего прочего, включают в себя управление параметрами «leading» (расстояние меду линиями), «tracking» (пространство между группами символов или слов) и «kerning» (пространство между любыми двумя определенными символами).

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

В веб-дизайне, предусмотрены инструменты для управления параметрами «tracking» и «leading», а вот «kerning» настроить напрямую через CSS нельзя. Чтобы задать «leading», используйте CSS-свойство line-height.

Для задания «tracking», используйте свойство letter-spacing. Также, вы можете отредактировать значение пространства между словами, используя свойство word-spacing, позволяющее сделать ваш текст более «воздушным» без увеличения значения «tracking» до критических величин.

Использование тега <span>

Если вы хотите изменить параметр «kerning» для отдельных групп символов, то лучшим решением будет «оборачивание» их в тег <span>. Затем вы сможете применить к этому тегу CSS-свойства для управления величиной кернинга. Используйте данный прием умеренно, потому что при частом использовании вы будете тратить на это очень много драгоценного времени и сил!

Как и в случае с kerning, правила работы с leading и tracking из печатной типографии, почти полностью применимы для веб-типографии. Подумайте также над использованием сетки для выравнивания базовых линий ваших шрифтов, чтобы придать им четкость и улучшить визуальное восприятие дизайна.

3. Ширина колонок

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

Ширина колонки может очень сильно повлиять на её читаемость. В печатной типографии, столбцы обычно устанавливаются шириной от 45 до 75 символов (что соответствует примерно значению от 9 до 15 слов). Это ширина считается идеальной, позволяя читателю легко перемещать взгляд со строки на строку без потери внимания.

Такие же общие правила применимы и для веб-сайтов, поэтому устанавливайте ширину колонок не более 80 символов. Ширину колонок можно устанавливать в единицах em, для чего нужно использовать такой CSS-код: width:80em;

4. Выравнивание в типографии

Этот текст имеет ровную границу слева и рваную справа. Также как и в печатной, в веб-типографии вы можете задать для вашего текста как рваную границу справа, так и ровную. Используя свойство text-align, можно выбрать значение left для установки рваной правой границы и значение right, для рваной левой. Значение justify даст возможность выровнять текст с обеих сторон по ровным границам.

В CSS3 также появилось новое свойство - text-justify, которое позволяет более точно контролировать заполнение строки выровненным текстом. К сожалению, поддержка данного свойства браузерами на текущий момент еще оставляет желать лучшего.