Использование шрифтов

Количество шрифтов

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

Беда этого особенного сайта состоит в том, что текст на нем используется в качестве декорации. Создатель сайта оптовой торговли свадебными товарами настолько вдохновился свадебной темой, что слишком увлекся рукописными и декоративными шрифтами. Можно выбрать один шрифт, который будет утон­ченно подчеркивать настроение, однако использовать шрифт в качестве деко­рации — глупо. Если вам не жаль своего времени и усилий на реализацию по­добных «концепций», такой декоративный подход — первый шаг к тому, чтобы сайт выглядел дешево. Старайтесь не применять такой подход.

Когда вы определите два или три шрифта, которые вы будете использовать для сайта, ознакомьтесь со следующей традицией, которой обычно следуют типографские и Web-дизайнеры: выберите шрифт с засечками, такой как Times или Georgia, для текста, а шрифт без засечек, такой, как Verdana, Helvetica или Arial для заголовков и элементов навигации. (Однако не забывайте о пробле­мах, описанных ниже, см. определения в рамках.) При желании вы можете сде­лать наоборот: шрифт без засечек используйте для текста, шрифт с засечками -для заголовков. В умеренных дозах можно использовать декоративный шрифт при оформлении логотипа.

Определение    

Шрифт с засечками (Serif Typeface). Шрифт с засечками отличается наличием под­строчного элемента литеры — короткой угловой линии, которая отходит от верхнего и ниж­него концов линий буквы. Шрифты с засечками, которые также называются прямыми (roman) шрифтами, хороши для многих целей в печатном мире, особенно для больших фрагментов текста. Впрочем, на экране монитора они могут выглядеть как бы с зазубри­нами — из-за низкого разрешения по сравнению с печатной страницей. Для хорошего монитора шрифты с засечками становятся неплохим решением применительно к любому элементу Web-сайта; хотя на данный момент я предпочитаю использовать их в таких эле­ментах страницы, как заголовки и названия рубрик. Впрочем, улюбого правила есть свои исключения: шрифт с засечками от Microsoft под названием Georgia специально был раз­работан для хорошего отображения на компьютерных экранах с низким разрешением, он установлен по умолчанию на большинстве операционных систем Windows и Macintosh. Примеры шрифтов с засечками — Times New Roman, Georgia и Palatino.

Определение    

Шрифт без засечек (Sans Serif Typeface). Sans по-французски означает «без». В шриф­те без засечек отсутствуют линии подстрочного элемента литеры, исходящие из концов ее линий. То, что правильно в печатном мире, необязательно верно на экране компью­тера. В печати шрифты без засечек обычно используются для заголовков и выносок. В сети их четкие, простые линии чрезвычайно читабельны, поэтому они отлично подхо­дят для основного текста. Запомните, что из всех приведенных ниже примеров Verdana -наиболее разборчивый и простой для восприятия, особенно при небольших величинах кегля. Подобно шрифту Georgia, Verdana был создан специально для экранного отобра­жения дизайнером Мэтью Картером (Matthew Carter), и он доступен на большинстве компьютеров Windows и Macintosh. Impact, который также поставляется с большинством компьютеров Windows и Мае, может эффектно выглядеть в заголовках, но не подходит для основного текста. (В CSS установите обычное начертание для Impact, чтобы избе­жать «двойной жирности», так как это уже полужирный шрифт.) Примеры шрифтов без засечек — Arial, Verdana и Impact.

Определение    

Декоративный и рукописный шрифт (Decorative and Script typeface). Вданномслу-чаеярассматриваюдекоративный и рукописный (насленгеназываемый скриптовым) шрифты как одно и тоже. Помните, однако, о том, что декоративные шрифты — от­дельный случай, который окончательно не вписывается в какую-либо другую катего­рию шрифтов. Их цель соответствует названию: украшать. Рукописные шрифты ими­тируют написание от руки, и, подобно декоративным, лучше всего их использовать в мал ыхдозах. Зона использования декоративных и рукописных шрифтов должнаогра-ничиваться написанием логотипов и небольшихбрендов;основнойтексти навигация, набранные этим шрифтом, слишком тяжелочитаются.

Примеры декоративных и рукописных шрифтов — Bickham Script, Bermuda LP и HoboStd.

Последовательное использование шрифтов

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

  • какой самый важный элемент сайта на рис. 5.1? Название компании? Те­матическая строка? Может, здесь больше чем одна тематическая строка? Является ли строка Wholesale Wedding Bands, Where you pay for the ring, not the saleman’s commission! (Оптовая торговля свадебными товарами там, где вы оплачиваете кольцо, а не комиссию продавца) тематической? Это сообщение очень важно, но из-за неудачно подобранного шрифта сила его заметно уменьшилась;
  • что является элементами навигации сайта? Как их организовать и подо­брать шрифт таким образом, чтобы посетителю было сразу понятно, что это — элементы навигации, а не основной текст или подписи?

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

Ваше руководство по стилю может выглядеть так, как в табл. 5.1. Обратите внимание, что я выбрала три шрифта: шрифт с засечками для заголовков, на­званий рубрик и особых частей текста; шрифт без засечек для навигации и ос­новного текста; декоративный шрифт для логотипа и названия бренда. Каждый шрифт будет использовать по-разному. Разнообразие создаст контраст, необхо­димый пользователям для того, чтобы различать элементы страницы. Основ­ной текст, ссылки и навигация слева и наверху будут написаны одним и тем же шрифтом, однако цвет, начертание и размер будут различными.

Заметьте также, что я сделала столбец справа под названием «Правило CSS».

Таблица 5.1. Образец руководства по стилю               
    Шрифт*    Размер    Цвет**    Начертание   Правило CSS       
Заголовок/ Название рубрики    Georgia, Times New Roman, Times, с засечками    Заголовок 1:18 пт Заголовок 2:16 пт Заголовок 3:15 пт Заголовок 4:13 пт    #330066 (пурпурный)    Полужирный       
Навигация наверху    Verdana, Arial, Helvetica, без засечек    14 пт    #000066 (синий)    Полужирный       
Навигация слева    Verdana, Arial, Helvetica, без засечек    12 пт    #000066 (синий)    Полужирный       
Логотип/ Бренд    Zapfino    18 пт, слабое сглаживание    #6633СС (бледно-лиловый)    Обычный       
Выделенные части текста    Georgia, Times New Roman, Times, с засечками    14 пт    #330066 (пурпурный)    Полужирный       
Основной текст    Verdana, Arial, Helvetica, без засечек    12 пт    #000033 (темно-синий)    Обычный       
Ссылки в основном тексте    Verdana, Arial, Helvetica, без засечек    12 пт    #6633СС (бледно-лиловый)    Полужирный, подчеркнутый    

* В графе «Шрифт» я указала несколько гарнитур. Это потому что в различных операционных сис­темах и браузерах шрифты проявляют себя по-разному. Подробнее мы остановимся на этом по­зднее, в разделе «Реализация оформления текста».

** Для цветов приводятся не только их названия, но и их шестнадцатеричные значения. Так я сделала потому, что большинство цветов в языках разметки выражены в шестнадцатеричном виде. Благодаря руководству по стилю вам будет легко не запутаться в этих шестизначных чис­лах.

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

Posted in Экономичный Web-дизайн.