Введение

В этом уроке мы сосредоточим внимание на важнейшей части любого веб-сайта — это текстовое оформление.

Почему именно тексту отдается приоритет в вопросе разработки веб-страниц? Да по той причине, что, несмотря на мощнейшее развитие средств мультимедиа в вебе, он — веб

— остается преимущественно текстовой средой. Истоки развития всемирной паутины — в реализации обмена текстовой информацией (вспомните первый урок). Примерно две трети информации, которая расположена в вебе сегодня, приходятся на текст.

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

непосредственно на сайте, чаще всего очень не хотят!

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

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

Оптическая читабельность, в свою очередь, складывается из следующих моментов, которые мы подробно рассмотрим:

Выбор гарнитуры, начертания.

Выбор метрик шрифта: высота кегля, интерлиньяж, ширина абзаца и т.д.

Обеспечение должного уровня контраста между фоном и текстом.

Адаптация текстового массива под беглое чтение, т.е. работа над структурой и содержанием.

Здесь нас ожидают вопросы, наименее «дизайнерские». По-большей части, это — вопросы редакторов сайта, его авторов. Тем не менее, эта область тесно связана с дизайном и, еще более тесно, с пользовательским опытом, т.е. UX. А это — область ответственности вебдизайнера.

Применение общей типографики в вебдизайне и ограничения типографики в браузере.

Когда в 1991 году Тим Бернерс-Ли создавал всемирную паутину — единое информационное пространство на основе гипертекста, типографика существовала уже сотни лет. Выдающиеся деятели этой сферы, разработали принципы текстового оформления на все случаи жизни. Детально рассматривать эти вещи мы, конечно же, не будем; для этих целей вы изучали предмет «Основы типографики» в прошлом семестре.

Создание всемирной паутины привело к появлению еще одного средства передачи текстовой информации. Была ли какая-то специфика в этом? На первый взгляд, не было. Поэтому базовые понятия, такие как абзац

(параграф) и заголовок вошли в число первых тегов HTML.

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

Тем не менее, не лишним будет еще раз перечислить теги, которые создают элементы текста веб-страницы. Другими словами, давайте вспомним из чего сделан текст вебстраницы согласно спецификации HTML 5:

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h5>, <h5></h5>, <h6></h6> — заголовки 6 уров-

ней. Основное средство создания структуры в тексте.

<p></p> — абзац, т.е. обособленная по смыслу, самостоятельная, законченная часть текста. «Рабочая лошадка» вебтипографики.

Самое время вспомнить то, что изучалось в курсе «Основы типографики». Загляните в конспекты или уроки по этому курсу. Освежите знания терминологии. Повторите, пожалуйста, прежде всего терминологию типографики и классификацию шрифтов. Все это очень пригодится нам здесь.

<blockquote></blockquote> — крупная (блочная) цитата. Т.е. фрагмент текста, представляющий собой высказывание какого-либо автора, либо заимствовано из другого документа. Может состоять из нескольких абзацев.

<ul></ul>, <ol></ol>, <dl></dl> — списки, т.е. перечисления каких-либо сущностей. Могут быть многоуровневыми.

<address></address> — любая информация, которая может быть отождествлена

с адресом.

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

Как вы, надеюсь, знаете, перечисленные

теги создают блочные элементы. Текст, расположенный в этих блоках, может делиться на относительно небольшие фрагменты, которые можно назвать строчными элементами. Стоит перечислить теги и строчных элементов также (это не все строчные элементы, предусмотренные в спецификации HTML 5! ):

<em></em> — выделение участка текста, т.е. слова, которые должны привлечь внимание, поскольку содержат какую-то важную информацию.

<strong></strong> — сильное выделение. Т.е. то же, что и <em>, но с более сильным действием.

<small></small> — текст, набранный «маленьким шрифтом», т.е. примечания, сноски, копирайты и т.д.

<q> — используется для создания небольшой цитаты в пределах предложения.

<cite> —используется для указания названия книги, фильма, проекта и т.д., упомянутого в тексте, а также, автора цитаты или источника, из которого она взята.

<abbr> — аббревиатура.

<i></i> — отрывок текста, который пред-

полагает несколько другую интонацию или смысловую нагрузку. Это, к примеру, идиоматические фразы из другого языка, транслитерация, мысли и др.

<b></b> — аналогично <i></i>, но предполагает более серьезные отличия в интонации и подаче текста.

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

Теперь давайте посмотрим на тот арсенал возможностей по настройке внешнего вида перечисленных элементов, которые предоставляет нам CSS. Почему именно CSS? Потому, что оформление — это и есть задача CSS, а не задача HTML.

Свойства CSS по форматированию текста условно можно поделить на две группы:

Работа с настройками шрифтов:

•font-weight — устанавливает насыщен-

ность шрифта. Мы можем сделать начертание полужирным (bold) или обычным (normal). Также поддерживается возможность указания величины жирности, но это должно поддерживаться гарнитурой.

• font-size — определяет размер шрифта элемента, т.е. кегль. Измеряется во всех доступных в CSS единицах измерений.

Кстати, во всех почти современных браузерах, значение по-умолчанию равно 16px. Это можно изменить, но чаще всего это именно так.

• font-style — определяет начертание шрифта — обычное, курсивное или наклонное, т.е. доступны значения normal, italic, oblique.

• font-variant — определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Значения: normal, small-caps.

• font-family — устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Это важнейшее свойство CSS именно для веб-дизайнера. О нем подробнее чуть ниже.

Работа непосредственно с текстом

•text-transform — управляет преобразо-

ванием текста элемента в заглавные или прописные символы.

• text-indent — управляет абзацным отступом;

• text-align — управляет выравниванием текста в абзаце

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

• word-spacing — устанавливает межсловный интервал

• letter-spacing — устанавливает межбуквенный интервал

• text-shadow — оформляет эффект тени, которую отбрасывают символы

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

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

Другими словами, несмотря на общность

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