Все статьи

Текстовые эффекты, или Будьте проще - сядьте на пол

Не знаю, подтвердит ли статистика мою догадку, - но я уверен, что никак не меньше половины всех графических файлов на WWW представляют собой всевозможные надписи, подписи, заголовки, текстовые логотипы и тому подобные шрифтовые композиции. Вполне естественно, что WEB-дизайнерам приходится прибегать к графике всегда, когда нужно, чтобы текст выглядел хоть сколько-нибудь необычно (крайний случай - узел http://www.hd.ru/, где весь текст оформлен в виде gif-файлов). Как известно, html, хоть и является языком разметки текста, не слишком богат текстовыми эффектами. Однако его возможности в этой области не стоит и недооценивать. В этой статье я попытался дать обзор текстовых инструментов html и привести некоторые рекомендации по их эффективному и выразительному применению.

К счастью, не так уж редко встречаются в WWW страницы, демонстрирующие изобретательность и творческий подход в использовании таких простейших средств, как изменение кегля шрифта, цвета символов и т. п. Конечно, я не стану пытаться уговорить вас выбросить все ваши графические файлы и заменить их текстом. Однако применение текстовых эффектов HTML вместо графических файлов выгодно по многим причинам. Во-первых, при этом большая часть текста страницы попадает в поле зрения роботов, составляющих индексы WWW (таких, как ALTA VISTA); во-вторых, чем меньше на странице графики, тем быстрее она загружается из сети. Но и кроме этих практических преимуществ, "текстовый" дизайн обладает тем редким очарованием, которое свойственно всем произведениям искусства, созданным с помощью крайне ограниченного набора средств. (Кстати, именно это очарование, по-видимому, и объясняет неуменьшающуюся популярность ASCII-графики, единственным материалом для которой служит стандартный набор ASCII-символов.)

Цвет и кегль

Цвет символов текста и кегль шрифта, которым этот текст выводится, задаются с помощью атрибутов COLOR и SIZE тега <FONT>. Я хотел бы особо подчеркнуть, что какой бы цвет вы ни указали для шрифта, на экране он не будет подвергаться диффузии - в отличие от большинства цветов в изображени-ях. Таким образом, синтаксис COLOR="#RRGGBB" (где RR представляет собой шестнадцатеричную запись красной составляющей цвета, GG - зеленой и BB - синей) дает вам доступ к любому из 16 миллионов цветов палитры "истинного цвета" (TRUE COLOR) - конечно, при условии, что монитор и видеоплата компьютера в состоянии их отобразить.

Однако не надейтесь, что вам удастся обмануть судьбу и задействовать для своего текста на 256-цветном мониторе все 256 цветов без диффузии. Оказывается, броузер при этом попросту заменяет большинство цветов на другие, хотя и достаточно близкие к исходным, цвета. Причем - что самое интересное - ни малейшей закономерности, позволяющей предсказать, какой именно цвет будет заменен на какой, мне найти не удалось. NETSCAPE NAVIGATOR делит весь диапазон серых тонов на совершенно загадочное число (а именно - девять) неравных по величине промежутков, внутри которых все цвета приводятся к одному знаменателю. Ни величины этих промежутков, ни цвета ячеек в них не укладываются ни в какую разумную прогрессию (в частности, один из этих цветов представляет собой даже не оттенок серого, а скорее бледно-желтый - #FFFBF0). Тот же эксперимент с броузером Internet EXPLORER дает картину, вполне аналогичную по странности - но при этом, однако же, не совпадающую с версией NETSCAPE NAVIGATOR буквально ни в одном из цветов. (Желающие проделать эксперимент самостоятельно найдут ONLINE-версию этой таблицы по адресу http://www.design.ru/ttt/grays.html.)

Кегль шрифта, устанавливаемый атрибутом SIZE, также таит в себе кое-какие неожиданности. Этому атрибуту можно присваивать целочисленные значения в диапазоне от 1 до 7 - номера условных ступеней шкалы размера, реальный кегль которых высчитывается относительно некоего базового размера (ему соответствует SIZE=3). В NETSCAPE NAVIGATOR базовый размер устанавливается на вкладке FONT окна GENERAL OPTIONS, а в Internet EXPLORER 3.0 для этого служит кнопка на панели инструментов, каждое нажатие на которую увеличивает базовый размер шрифта на некоторую величину (а по достижении определенного предела возвращает его в минимум). Таким образом, базовый размер, установленный на компьютере пользователя, дизайнеру знать в принципе не дано. Вдобавок, те семь ступеней, одна из которых выбирается значением атрибута SIZE, не образуют ничего похожего на линейную прогрессию. В частности, разница между SIZE=6 и SIZE=7 гораздо больше (и в абсолютном, и в процентном выражении), чем между остальными ступенями шкалы.

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

Гарнитура шрифта

До недавнего времени HTML предоставлял на выбор только два типа шрифтов: пропорциональный (которому по умолчанию соответствует шрифт TIMES, в WINDOWS именуемый TIMES NEW ROMAN) и моноширинный (шрифт COURIER, в WINDOWS - COURIER NEW). Для выбора моноширинного шрифта чаще всего используется тег <TT>.

По иронии судьбы моноширинный шрифт, который создателями HTML предназначался для оформления фрагментов программ, имен переменных и тому подобных скучных вещей, привлек своей необычностью многих дизайнеров, которые стали использовать его для особого стиля заголовков, а иногда даже в качестве основы всего интерфейса узла. Если вы собираетесь заимствовать этот прием, вот вам два совета: во-первых, светлый COURIER имеет слишком тонкие штрихи, поэтому лучше пользоваться полужирным начертанием; и во-вторых, постарайтесь не особо увлекаться и ни в коем случае не набирайте моноширинным шрифтом основной текст ваших страниц. Кстати, этот шрифт, все символы в котором имеют одинаковую ширину, позволяет реализовать интересные эффекты с помощью некоего подобия ASCII-графики (пример - заглавная страница узла http://www.absolutvodka.com/).

С тех пор как NETSCAPE NAVIGATOR в версии 3.0 реализовал поддержку атрибута FACE тега <FONT> (введенного ранее броузером Internet EXPLORER), дизайнеры получили возможность использовать еще одну разновидность шрифтов, представители которой есть практически на любой компьютерной платформе, - рубленые (SANS SERIF) шрифты (в WINDOWS "рубленым шрифтом по умолчанию" является ARIAL). Если вы захотите воспользоваться этой возможностью, выйдя тем самым за пределы "библейского" HTML 2.0, вам предстоит услышать слабый отзвук непрекращающейся канонады с фронта войны между компьютерными платформами. Дело в том, что рубленые шрифты в разных операционных системах, хотя и практически неразличимы между собой по начертанию, называются по-разному - и если вы закажете для текста шрифт ARIAL, это будет иметь эффект только для пользователей WINDOWS. К счастью, синтаксис атрибута FACE позволяет обойти эту трудность. Написав <FONT FACE="ARIAL, HELVETICA, GENEVA"> вы можете быть почти на сто процентов уверены, что такой тег включит рубленый шрифт, будь то ARIAL (в WINDOWS), HELVETICA (в UNIX и на MACINTOSH) или же GENEVA (на MACINTOSH). Броузер читает такую спецификацию шрифта слева направо и задействует первый из встреченных шрифтов, который установлен на компьютере пользователя. Регистр букв в названиях шрифтов значения не имеет.

Рубленый шрифт принадлежит к самым базовым и употребимым типам шрифтов, и возможность использовать его на WEB-страницах стала важным пополнением инструментария дизайнера. Но на этом выгоды, приносимые атрибутом FACE, заканчиваются, поскольку три шрифта, с гарантией имеющиеся в любой графической операционной системе, - это и есть пропорциональный, моноширинный и рубленый. Разумеется, в теге <FONT> можно указать название любого шрифта, но обычно это не имеет большого смысла - ведь шрифт этот будет виден только тем пользователям, которые потрудились его приобрести и установить на свой компьютер. К примеру, если вы - поклонник шрифта GARAMOND, вы можете написать

При этом, если на компьютере пользователя есть шрифт под названием "GARAMOND", текст будет выводиться им; если же нет - будет использоваться пропорциональный шрифт по умолчанию.

В области действия тега <FONT> с атрибутом FACE, устанавливающим нестандартный шрифт, теги <I> и <B> дают ожидаемый результат - включают курсивное и полужирное начертание данного шрифта (конечно, при условии, что эти начертания существуют и установлены на компьютере пользователя). В то же время тег <TT> и его синонимы (<KBD>, <CODE>, <SAMP>) внутри нестандартного шрифта не действуют вообще, и чтобы переключиться в моноширинный шрифт из, к примеру, рубленого, вам придется обратиться к нему по имени:

Нестандартные шрифты еще больше осложняют использование (и без того не слишком изящного) механизма выбора кегля шрифта, о котором мы говорили выше. Не надейтесь, что, установив одно и то же значение атрибута SIZE для разных шрифтов, вы получите символы, одинаковые (или хотя бы близкие) по размеру. Эксперименты с таблицей, приведенной на рис. 2, показывают, что пропорциональный и моноширинный шрифты в разных броузерах и на разных операционных системах могут разниться на целую ступень - так, в Internet EXPLORER на моем компьютере моноширинный шрифт с SIZE=6 по высоте даже немного меньше, чем пропорциональный шрифт с SIZE=5. Разумеется, еще более вероятны подобные сюрпризы для нестандартных шрифтов. Столкнувшись с этим, вы, возможно, захотите изменить спецификацию размера для одного из шрифтов, чтобы он лучше соответствовал по видимой величине другому, - однако делать этого не следует, так как на соседнем компьютере разница видимых величин может быть прямо противоположной. Лучше всего придерживаться равных значений SIZE для тех шрифтов, которые должны быть одинаковыми по размеру.

Фоновый цвет

...Да, конечно, я имею в виду фоновый цвет для отдельных символов текста, а не для всего документа. Что вы говорите?! Вы не знаете, как это делается? Но ведь это так просто! Достаточно поместить один или несколько символов в ячейку таблицы без обрамления и установить нужный цвет с помощью атрибута BGCOLOR соответствующего тега <TD>. К сожалению, этот метод не годится для выделений прямо в тексте, так как таблица в HTML всегда начинает собой новый абзац. Однако прием этот удобен для разнообразных эффектов в текстовых заголовках, которые можно целиком поместить в таблицу. Цвет, указанный таким образом, никогда не подвергается диффузии, но на 256-цветном мониторе он, скорее всего, будет заменен на другой, достаточно близкий цвет.

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

Одним словом, возможность задавать цвет фона для ячеек таблицы, впервые введенная в броузере Internet EXPLORER, - ценный инструмент WEB-дизайнера, позволяющий создавать интересные композиции для заголовков, подписей к рисункам, врезок, буквиц и т. п. К сожалению, NETSCAPE NAVIGATOR реализует эту возможность только начиная с версии 3.0. А еще одно ценное нововведение Internet EXPLORER - фоновые изображения, которыми можно заполнять фон отдельных ячеек таблицы, - NETSCAPE не поддерживает до сих пор.

К вопросу о подмигивании

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

Стоит сказать пару слов и о печально знаменитом теге <BLINK>, заставляющем текст мигать. Я вполне разделяю (на удивление единодушное) неприятие этого "украшения" и готов присоединиться к призывам никогда и ни при каких обстоятельствах не пользоваться этим тегом - призывам, которые стали уже почти общим местом в многочисленных руководствах по HTML и WEB-дизайну. (Создатели Internet EXPLORER, похоже, даже ставят себе в заслугу то, что их броузер игнорирует тег <BLINK>.) Но с другой стороны, я все же могу представить себе ситуацию, в которой мигающий текст способен выполнять эстетические функции, не вызывая раздражения. Правило здесь простое: чем меньшее количество текста вы заставляете мигать, тем лучше. Один мигающий символ может быть забавен, одно мигающее слово может при определенных обстоятельствах быть приемлемо, - но когда мигают несколько слов подряд, такую страницу хочется поскорее убрать с глаз.

Ещё рекомендуем прочитать:

26 Советов по веб-дизайну
Рисунок сотен слов дороже нам
Что такое стильный web-сайт?
Основы цвета. Пространственное воздействие цвета
Шрифт в дизайне

Внимание!
Цитирование авторских материалов допускается только при условии прямой гиперссылки на «Introweb.ru»!