5.4. Особенности отображения текста в Web
5.4. Особенности отображения текста в Web
Подходы к текстовому дизайну, рассмотренные в предыдущей главе, в общем случае применимы и к Web-страницам. Но тщательно продуманное шрифтовое оформление иногда «плывет», так как существуют некоторые технические проблемы: на разных мониторах размер шрифтов может меняться, невозможно отрегулировать межстрочный интервал, шрифты с одним названием выглядят на разных компьютерах по-разному и т. д. Один из способов избежать этих неприятностей – перевести текст в формат графики, но при этом возникают другие проблемы:
? увеличивается объем данных и страницы медленно загружаются;
? при изменении разрешения экрана шрифт плохо читается;
? трудно обновлять или редактировать информацию, так как текст больше не редактируется;
? возникают серьезные проблемы, если браузер не поддерживает отображение графики;
? такой текст игнорируется поисковыми системами.
Пожалуй, применение текста, преобразованного в формат графики, оправдано только в заголовках, кнопках в специальных эффектах.
Если же работать с наборным текстом, нужно учитывать некоторые особенности.
По умолчанию браузеры поддерживают два типа шрифтов: пропорциональный (Times) и моноширинный (Courier). Пропорциональный шрифт более удобен для восприятия. Моноширинный чаще всего используется для отображения компьютерного кода или технических данных. Если вы хотите использовать другие гарнитуры, придется проделать несколько дополнительных операций, чтобы выбрать шрифты, поддерживаемые браузером. С помощью команд HTML-кода можно регулировать интерлиньяж, выключку, расстояние между символами и словами, определять стиль заголовков и подзаголовков. Для форматирования текста используются буквицы, линейки, колонки, врезки. Есть возможность создавать таблицы.
Наиболее целесообразно использовать на одной странице три шрифта: для основного текста, для заголовков и для системы навигации. Применение большего числа разных гарнитур нежелательно. Для заголовков и навигации выбираются обычно гарнитуры без засечек.
Колонки помогают структурировать текст, но их длина не должна превышать 300 пикселов. Хорошо смотрится страница, на которой колонка с основным текстом располагается по центру страницы, левая колонка используется для системы навигации, правая – для дополнительной информации или цитат.
Низкое разрешение большинства мониторов и мерцание делают чтение электронных документов довольно сложным процессом. Воспринимать текст с экрана гораздо труднее, чем с листа бумаги, поэтому очень важно использовать различные приемы структурирования текста: пустые области, крупный шрифт, большое расстояние между строками.
Ниже приведены некоторые рекомендации и описаны возможностей форматирования текста с помощью HTML-кода.
? Пустое пространство особенно важно для содержательных страниц. На них рекомендуется оставлять свободными от 40 до 60 процентов поля экрана.
? По умолчанию для Web текст выравнивается по левому краю, но возможно программирование других вариантов. Выключку по формату лучше не использовать, так как в этом случае возможно возникновение белых «коридоров».
? При разметке текста можно задавать длину строк и отделять одну область текста от другой. Длина строки должна составлять от 50 до 70 символов или от 7 до 15 слов.
? По умолчанию HTML-текст отображается в том стиле, который определил браузер, при этом расстояние между строками близко к одинарному интервалу. Для улучшения восприятия текста интерлиньяж можно увеличить.
? Для структурирования информации применяются заголовки и подзаголовки. Нужно, чтобы они явно отличались друг от друга.
? Различные по значимости части текста выделяются гарнитурами, размером, цветом, яркостью.
? Имеется возможность задавать двойные интервалы между абзацами для улучшения восприятия текста на экране.
? Буквицы, выступающие инициалы или начальная буква, выступающая за левый край текста, хорошо структурируют текст, но их применение связано с дополнительными операциями. Целесообразно применять эти эффекты для выделения достаточно больших разделов.
Данный текст является ознакомительным фрагментом.