Материал: Форматирование текста

<CITE> . . . </CITE>: цитата;

<EM> . . . </EM>(emphasis - ударение): текст, имеющий большое значение;

<STRONG> . . . </STRONG> (сильный): сильное выделение текста;

<SAMP> . . . </SAMP>(sample - образец): образец сообщений, выводимых на экран;

<CODE;> . . . </CODE>(code - код): фрагмент исходного текста;

<VAR> . . . </VAR>(variable - переменная): имя переменной.

На веб-страницах иногда указывают аббревиатуру некоторого термина или понятия без его раскрытия, например, "ОЗУ" вместо "Оперативное запоминающее устройство". Чтобы поисковые системы в сети Internet могли осуществлять поиск термина не только по его аббреавитуре, но и по полному обозначению, а также в качестве подсказки для пользователя веб-страницы, используется тэг-контейнер <ACRONYM> аббревиатура </ACRONYM>с параметром TITLE, который раскрывает значение используемой аббревиатуры.

Таблица 3 - Замены специальных символов

В общем случае в HTML-документ можно вставить любой символ, зная его ASCII-код. Для этого вместо символа подставляется такая последовательность символов: &#XX, где XX - десятичное значение ASCII-кода символа.

К специальным символам можно отнести и символ "неустранимого пробела" - &nbsp; (no breaking space). Эти символы используются тогда, когда необходимо поместить на веб-странице несколько пробелов подряд, поскольку браузеры заменяют последовательности подряд идущих пробелов в HTML-документе одним пробелом при выводе документа на экран.

2. Форматирование текста с точки зрения веб-дизайна

2.1 Значение текстового оформления веб-страниц

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

Известно, что пользователи Интернет воспринимают тест с экрана компьютера гораздо хуже, чем с бумаги. И тогда получается парадоксальная ситуация: вроде бы на веб-сайте умещается во много раз больше текстовой информации, чем на буклете А4 (пусть даже с двух сторон), но ее читают в 2-3 раза менее внимательно. Посетители коммерческих сайтов редко вчитываются в то, что написано на большинстве сайтов, они ищут услугу или товар, а найдя его, звонят или делают заказ. Или не звонят. Мало кто желает вникать в то, что написано на сайте.

Исходя из исследований Eye Tracking, на веб-странице есть зоны, которые пользователь не замечает совсем. На рисунке 1 показаны зоны внимания различных типов страниц:

·   обычной текстовой страницы с услугой;

·   страница товара в Интернет-магазине;

·   страница выдачи поисковой системы Google.

В этих условиях тот объем текста, который пользователь легко воспринимал с корпоративного буклета, на веб-сайте элементарно не привлекает интерес пользователя.

Рисунок 1 - Зоны активного внимания посетителей сайтов

Почему у веб-разработчиков большинства сайтов никогда не доходят руки до дизайна текста? Чаще всего веб-студии делают только «оболочку» (дизайн сайта), а контент (кроме оформления заголовка и ссылки в тексте) никак не оформляют и в результате Рунет заполоняется огромным количеством ресурсов, сделанных по готовым шаблонам TemplateMonster, Joomla, WordPress за очень небольшие деньги.

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

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

2.2 Удобочитаемость, содержание и форма шрифта

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

·   форма шрифтовых знаков (рисунок или тип шрифта, размер, пропорциональность отношения ширины знака к его высоте, ритм формы, насыщенность, цвет);

·   шрифтовая композиция (длина строки (надписи) или ширина шрифтового поля (колонки), пробел вокруг строки или шрифтового поля, интервал между строками, шрифтовыми полями, форма строк, шрифтового поля, ритм строки и композиции текста, цветовое решение);

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

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

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

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

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

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

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

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

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

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

Как известно, цвет воздействует на зрителя своими физическими и психосубъективными качествами.

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

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

На выбор формы шрифта существенное влияние оказывает стиль - фактор, определяемый содержанием информации и авторским замыслом.

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

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

2.3 Подбор шрифта и верстка текста

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

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

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

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

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

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

Контрастность - один из основных признаков шрифта, выраженный отношением толщины соединительных штрихов к толщине основных штрихов знаков. Эта характеристика изменяется от неконтрастных до сверхконтрастных шрифтов (рис. 2).

Рисунок 2 - Пример контрастности различных гарнитур

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

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

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

Все гарнитуры делятся на гарнитуры с засечками и без них (рубленые).

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

Рисунок 3 - Пример шрифта без засечек

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

Рисунок 4 - Пример шрифта с засечками

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

Рисунок 5 - Пример декоративного шрифта

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

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

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

Теперь самые малоэффективные способы привлечения внимания к тексту.

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

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

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

Второе применение малой колонки (если приманок нет или они попросту не нужны) сводится к становлению навигации сайта. Там могут располагаться ссылки, новости, баннеры.