Статьи / Веб-Дизайн / Шрифт в web-дизайне

  2008-11-03 17:25

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

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

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

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

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

Насыщенность шрифта определяется изменением толщины основных и соединительных штрихов одноименных знаков в различных начертаниях. В рамке одной гарнитуры насыщенность может изменяться от сверхсветлой до сверхжирной (light - ultra bold).

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




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

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

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

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

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


Гротески или рубленные
Это шрифты без зесечек, слабоконтрастные или без контраста.


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

Кодировка и типы шрифтов

Информация, включая текстовую, хранится в компьютере в виде двоичных чисел (кодов). Основа кодовых таблиц это ASCII - Американский Стандартный Код для Обмена Информацией. Код ASCII первоначально являлся семибитным и включал в себя символы с кодами 32 - 128, кодам 0 - 31 соответствовали неотражаемые, служебные символы-команды, типа код 10 - "перевод строки" и т.п. Для отображения символов национальных алфавитов, псевдографики и других служебных символов таблица ASCII-кода была расширена до 8 бит, получившийся код стал называться "расширенным ASCII-кодом". В зависимости от состава символов, включенных в верхнюю часть кодовой таблицы (128 - 255), и их расположения различают кодовые таблицы для разных систем и национальных языков. Кодовые таблицы идентифицируются названием и номером, например - Windows-1251, KOI-8, DOS-866 и т.п.

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

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

В настоящий момент принят еще один стандарт кодирования Unicode, разработанный Консорциумом Unicode для определения символов вне зависимости от национальной принадлежности. Этот стандарт использует 16-битное кодирование символов (в отличие от 8-битного в ASCII). Это позволяет определить 65536 разных символов (в ASCII- 256), что оказывается достаточным для всех существующих языков, математических, служебных символов и других знаков. Со временем к стандарту Unicode добавились свойства другого многобайтного стандарта - ISO 10646. Все индексы в стандарте разделены на группы и страницы, по 256 символов в каждой, причем часть индексного пространства оставлена для будущего развития. Первые 256 индексов полностью совместимы со стандартом ASCII. Unicode имеет достаточно хорошие перспективы, поэтому при создании своих шрифтов имеет смысл следить за их соответствием требованиям этого стандарта.

По технологии "внутреннего строения" компьютерные шрифты делятся на три типа: растровые (bitmap-шрифты), векторные и контурные. Первые два типа, в силу своей специфики, не представляют особого интереса для WEB-дизайнера. Более подробно остановимся на рассмотрении контурных шрифтов. Иногда их также называют векторными имея ввиду способ их "внутреннего" строения. В этом типе шрифта происходит описание только контура (границы) символа. Для описания кривых, очерчивающих контур символа, используют разбиение кривой (или ломаной) линии на отдельные участки и аппроксимацию получившихся фрагментов кривых полиномами второй (TrueType шрифты) или третьей (PostScript шрифты) степени.

TrueType шрифты.
Как уже было сказано выше, в зависимости от степени апроксимирующего полинома различают два типа контурных шрифтов. TrueType шрифты (иногда из называют Тип 2) используют для формирования контура символа кривые второго порядка. Каждый участок контура символа характеризуется, или задается двумя точками (границами участка) и направлением линии на каждой из границ. Часто для задания направления используется третья точка, лежащая на пересечении касательных к кривой на ее концах (см. рис.).
Элементарная кривая в TrueType шрифтах


PostScript шрифты
Шрифт в формате PostScript, или Типа 1, отличается от TrueType главным образом тем, что контур строится из кривой третьего, а не второго порядка, называемых иногда кривыми Безье. Пример фрагмента кривой третьего порядка с образующими его элементами приведен на рисунке справа. Использование кривых более высокого порядка обуславливает основные преимущества PostScript шрифтов перед TrueType. За счет большего числа степеней свободы PostScript-линия не имеет изломов в точках сопряжения фрагментов, тогда как для TrueType больший или меньший перелом в точке стыковки двух сегментов является почти неизбежным злом. Иначе говоря, символы PostScript шрифта являются более гладкими, чем TrueType.
Элементарная кривая в PostScript шрифтах


При возможности выбора между TrueType и PostScript шрифтами предпочтение безусловно должно быть отдано последним, что кстати и реализовано в последней версии графического пакета Adobe Photoshop 5.0.
Шрифтовое оформление в WEB-дизайне

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

Интернет-технологии накладывают специфические ограничения на использование шрифтов в оформлении WEB-документов. B частности межплатформенный характер Интернета не позволяет однозначно определять шрифт для вывода "тела" текстового документа на экран монитора клиента. Применение HTML тега <FONT FACE=[гарнитура шрифта]> не есть панацея для решения этой проблемы. На клиентской машине просто может не оказаться нужного шрифта, а замена его другим, выбранным системой по умолчанию, приведет к появлению нечитаемого документа. Поэтому считается правилом хорошего тона не применять вышеобозначенный тег при проектировании WEB-документов. Указанная проблема еще ждет своего корректного решения, которое, возможно, появится в скором будущем.

Это заставляет изыскивать другие пути для оформления "тела" документа. B частности выделение необходимых частей текста цветом, применением СТРОЧНЫХ символов, их курсивного и полужирного начертания, а также манипуляции с кеглем шрифта выводимого на экран клиента. Немаловажным для удобства восприятия информации оказывается цветовое соотношение текста и фона. Если предполагается передача клиенту достаточно большого объема информации, то с точки зрения удобочитаемости, желательно чтобы текст был выполнен темным цветом на светлом фоне и быть достаточно контрастным. Применение ярких подложек под текст (задний фон) является сильным выразительным средством, но необходимо помнить, что читать текст по яркому, а тем более пестрому, фону трудно, а иногда просто невозможно, так как символы теряются в пестроте подложки.

Одним из показателей удобочитаемости является ширина строки документа. С появлением мониторов поддерживающих большое разрешение экрана стало возможно "укладывать" в одну строку до нескольких сотен знаков, однако строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает значительно быстрее.

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

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

Автор: VM Studio