Введение в web-типографику

Текст на web-странице, обладает свойствами, которые затрудняют контроль над его отображением со стороны дизайнера:

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

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

3 Разные платформы могут оперировать разными системами измерения. Одни и те же шрифты будут выглядеть по-разному на экранах PC и Macintosh.

Проблемы, существовавшие в начале развития web, в настоящий момент решаются с помощью новых технологий, таких, как CSS, но из-за того, что эти технологии могут поддерживаться не всеми браузерами абсолютным решением они не являются:

1. Гарнитура, которую хотел бы использовать дизайнер, может отсутствовать на компьютере пользователя, просматривающего страницу.

2. Язык разметки HTML не позволяет использовать возможности, принятые в типографском деле (интерлиньяж, кернинг, трекинг и т.д.).

Рассмотрим основные параметры шрифта, используемые в типографике, и средства управления ими в web-среде.

 Гарнитура — это рисунок символов шрифта. В web гарнитуры классифицируются двумя основными способами: шрифты с засечками (serif) либо без засечек (Sans-serif) и пропорциональные в которых все символы занимают одинаковое пространство. Основным способом определения гарнитуры в HTML является указание ее категории, а конкретную гарнитуру браузер пользователя подберет по своему. Можно указать конкретное семейство гарнитур, но это указание будет выполнено если такие гарнитуры присутствуют на компьютере пользователя. HTML позволяет задать несколько альтернативных вариантов:

<FONT face = “Gazeta Titul, Helvetica, Sans-serif”>

Эта инструкция предписывает оформатировать текст гарнитурой Gazeta Titul, в случае её отсутствия — гарнитурой Helvetica, а если нет и ее — использовать любую без засечек.

Microsoft разработала технологию OpenType, которая позволяет переслать требуемую гарнитуру вместе с самой страницей на компьютер пользователя. Инструкции по пересылке гарнитуры можно задать с помощью CSS стандарта CSS2. Однако эта технология поддерживается не всеми браузерами (даже последних версий).

 Стиль и насыщенность шрифта. Стиль может быть прямым и курсивным. Стиль может задаваться стандартными средствами HTML или с помощью CSS. Насыщенность определяет степень толщины штриха. HTML различает только простые и полужирные шрифты. CSS имеет параметр font-weight, который может иметь числовое значение от 100 до 900, или совпадать с одним из стандартных вариантов: bold, bolder, lighter, extra-bold, demi-bold и т.д. Далеко не все браузеры поддерживают эту возможность в полном объеме.

 Кегль (размер) шрифта. Размер текста измеряется от линии верхних выносных элементов до линии нижних выносных элементов. В HTML для указания размера используется своя единица (атрибут size тега FONT), которая может принимать значения от 1 (очень мелкий текст) до 7 (самый крупный). В CSS есть свойство font-size, дающее более широкие возможности. Абсолютный размер шрифта может быть задан в пунктах (pt), сантиметрах (cm), миллиметрах (mm), дюймах (in), пикселях (px) и значениях высоты буквы x (em). Относительные размеры задаются в процентных показателях.

 Выравнивание (выключка). По умолчанию в web используется выравнивание по левому краю с оставлением неровного правого, но как HTML, так и CSS позволяют и другие принятые в типографике варианты. С точки зрения восприятия вариант по умолчанию самый оптимальный. Другой удобный вариант — выравнивание по ширине — в web подходит не всегда из-за отсутствия автоматически расставляемых переносов, что может привести к «белым пятнам» в тексте.

 Интерлиньяж — расстояние между базовыми линиями соседних строк. Оптимальным считается 120% от кегля шрифта. Меньшее расстояние ухудшает разборчивость текста, большее — его связность. В HTML оно примерно совпадает с кеглем, что никак нельзя изменить. В CSS интерлиньяж задается с помощью параметра line-height.

 Трекинг и кернинг. Межбуквенное расстояние или трекинг можно варьировать средствами CSS, но не HTML.

 Длина строки. Оптимальная длина строки в печатном тексте должна составлять от 50 до 70 символов (или примерно от 7 до 15 слов), иначе удобочитаемость текста затрудняется. Чтобы регулировать длину строки на web-странице, необходимо воспользоваться таблицами HTML, либо помещать текст в блоки, ширина которых описана в CSS-стиле.