Корпоративный веб-сайт на 100%. Требуйте от сайта большего! - Роман Овчинников

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

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

Как выбрать и грамотно использовать шрифт

♦ Необходимо минимизировать количество используемых на сайте шрифтов (желательно применять шрифты не более двух семейств)

♦ При выборе шрифта важно следовать общим требованиям фирменного стиля компании

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

♦ Шрифт должен быть контрастен по отношению к фону (лучший вариант – писать темно-серым по белому)

♦ Страницы сайта должны выглядеть корректно при любом размере системного шрифта

♦ В контенте веб-страниц желательно использовать только стандартные шрифты , поставляемые вместе с платформами Windows, Macintosh, Unix/Linux, чтобы избежать проблемы автоматической замены несуществующего шрифта браузером на какой-либо другой, не соответствующий по стилю и назначению

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

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

Современные браузеры масштабируют страницы, рассматривая их как своеобразные векторные изображения, сохраняя целостность макета

Масштабирование размеров шрифтов

Много дискуссий посвящено проблеме задания размеров шрифта , который может быть определен в абсолютных или относительных единицах (%, em, larger, smaller и др.).

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

При некорректном задании размеров целостность макета может быть существенно нарушена.

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

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

Особенно курьезно смотрятся «залитые» в графику тексты с грамматическими и орфографическими ошибками

Шрифты внутри иллюстраций

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

♦ Такие шрифты, как и любые растровые изображения, не масштабируются

♦ Текст, «залитый» в графику, не видят поисковые роботы

♦ Любое видоизменение такой надписи будет означать переделку иллюстрации , что обычно требует привлечения дизайнеров

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

35. Дизайн текста

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

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

Все новое – хорошо отформатированное старое. В том числе и эта книга

К сожалению, на таких сайтах часто весь текст публикуется в виде единого, абсолютно нечитаемого блока («дохлой рыбы»).

Не верите? Тогда просто вспомните, с какого количества веб-страниц вы ушли со словами: «Ой, тут совсем ничего не понятно!»

При публикации текстов на сайте мы советуем следовать следующим принципам:

♦ Следует ограничить, стандартизировать используемые способы форматирования , однозначно определить их с помощью CSS-стилей и сниппетов (шаблонов оформления), отказавшись, таким образом, от чрезмерного творчества публикаторов

♦ Важно соблюдать технические правила верстки (например, оформлять заголовки тегами <h1>, <h2>, <h3>, создавать пустые строки с помощью тега <p>, оформление «жирным» делать с помощью тега <strong> и т. д.)

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

♦ Необходимо обеспечить «воздушность» внешнего вида текста , предусмотреть поля и межстрочные интервалы достаточного размера

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

♦ Ширина текстового поля должна обеспечивать удобство чтения (по некоторым оценкам, это примерно 1,5–2,5 алфавита, набранного строчными буквами)

♦ Для отдельных материалов (например, статей, обзоров) необходимо указать их «выходные данные» – дату публикации/обновления, авторство, ключевые слова (теги)

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