Типографика: что важно для сайта
5 мин.
Сложно представить интернет-ресурс, который не наполнен текстовым контентом. Вариантов масса: полезные статьи, описания товаров, тексты в анонсах и на кнопках. Каждый текст, невзирая на объем, размещают по заданным правилам, иначе пользователь откажется читать.
Регулярно заказчики, «играя» с дизайном интернет-ресурса, предлагают поиграть со шрифтами. Что из этого выходит, читайте в этой статье. Когда идею нестандартного шрифта отвергают, логичным решением становится форматирование.
Проведена масса исследований о восприятии человеком текстовой информации. Правила позволяют разметить информацию оптимальным для чтения образом. В противном случае теряется информативность, падает скорость чтения и в итоге — потеря интереса и клиентов. Для того чтобы этого избежать пользуются методами типографики.
Типографика — это механизм оформления текстовой информации, использующий ресурсы верстки и учитывающий правила текущего языка. Хотя типографика кажется непосвященному человеку сложным действом, на деле большую часть верно выполняют интуитивно.
Разберем главные моменты.
Разделение на абзацы
Логичный и центральный момент в форматировании текстов — это разделение на абзацы. По сути абзац — это часть текста, которая выражает конкретную мысль. Не рекомендуют размещать в абзаце несколько мыслей или выполнять чрезмерно объемными. Это усложняет чтение.
Небольшие, логично разделенные абзацы легко читаются пользователями и упрощают восприятие информации.
Визуально абзацы на интернет-ресурсе предпочтительно отделять расстоянием большим, чем стандартное междустрочное. При этом увеличение этого параметра чрезмерно приводит к пустоте на странице и вызывает негативные эмоции. Так же как и слишком короткие абзацы.
Вторым отрицательным моментом считают нестабильное расстояние между словами. По аналогии с типографикой физических носителей в веб-среде используются схожие схемы, например, растягивание или сжимание текста, в зависимости от выбранного формата (выравнивание по правому или левому краю, по ширине и проч.). При просмотре сайта со стационарного устройства — это не бросается в глаза, а вот для мобильных гаджетов неравномерный текст — частая проблема. Поэтому не рекомендуем выполнять специальное форматирование текстов в абзацах, особенно если интернет-ресурс посещает достаточное количество «мобильных» пользователей.
Обратите внимание, что в текстах регулярно встречаются сочетания, которые разделять на строки нежелательно. Например, «и т. д.». При публикации таких сочетаний на интернет-ресурсах используют неразрывный пробел.
Главное: при оформлении абзацев убедитесь, что разделения происходят естественным образом посредством стилей и оформления сайта, а не «вручную». Например, добавление лишних пустых строк для большего разделения абзацев или задваивание пробелов для увеличения расстояния между словами нежелательно.
Заголовки
Отдельно упомянем заголовки. Короткие словосочетания вида, определяемого уровнем заголовка, повысят качество восприятия текста.
Главное: настроить автоматически стили для заголовков. Попытки сделать «вручную» с использованием увеличения размера и жирного шрифта приводят к ухудшению восприятия текста, ведь отображение на различных устройствах и платформах разнится, да и технически скорость обработки информации падает.
Работа с текстом
Для повышения понятности текст также нуждается в дополнительном форматировании.
Стандартные приемы выделения текста: жирный шрифт, курсив и подчеркивание. Последний вариант в веб-среде не прижился, т. к. подчеркивание — стандартный вид ссылок. Поэтому если встречается в тексте без перенаправления, то вызывает подсознательное раздражение.
Курсив или наклонное начертание используют для выделения цитат, прямой речи и кратких справок. Такой стиль в веб-сфере выглядит недостаточно органично в силу упрощения отображения, поэтому размещать внутри текста визуально некрасиво. Отдельным смысловым блоком — пожалуйста.
Часто используемый прием — выделение жирным шрифтом., но тут главное не переусердствовать. Слишком большое количество «жирных» слов и фраз ухудшают восприятие, потому что рассеивают внимание.
Иногда текст пишут прописными буквами. Но по статистике это вызывает до 30% потерь читабельности.
В статьях типа «Блог» или при добавлении юмористического содержания допускается использование перечеркнутых элементов текста.
В остальном для повышения читаемости текст «разбавляют»:
- изображениями;
- таблицами;
- списками;
- столбцовым форматированием и проч.
Формирование списков
Отдельным пунктом размещения текстов идет добавление списков. Внося ясность, систематизируем:
- Маркированные списки.
Встречаются с наибольшей частотой. Красиво выглядит, если в виде маркера выступает особый элемент, разработанный дизайнером. - Нумерованные списки.
Стандартная разметка веб-страниц предусматривает только маркировку цифрами. Добавление букв и иных символов усложняет обработку информации на страницах и ухудшает общий вид. Заметим, что обычным видом списка с номером является круглая скобка после цифры. Веб-формат этого не допускает: после цифры только точка. - Многоуровневые списки.
Это сложные списки, которые характеризуются уровнем вложенности больше двух. Причем возможны сочетания как только маркированных, там и частично нумерованных.
Главное, что требуется для интернет-ресурса — это соблюдение единообразия. Даже при условии дизайнерского решения о стиле отображения списков, рекомендуем использовать преимущественно один вид. Например, каждая строка маркированного списка начинаются с маленькой буквы и заканчивается точкой с запятой. Или наоборот: строка — это полноценное предложение с большой буквой и точкой в конце. Сочетая различные виды, ухудшаете визуальное единообразие интернет-ресурса.
Запомните: независимо от стиля и вида содержимого в конце списка ставится точка.
Специфические элементы
Стандартные знаки препинания и специальные символы в тексте (точка, запятая, двоеточие, точка с запятой, кавычки, скобки и проч.) пишутся неразрывно с последним словом текста.
На интернет-ресурсах отдают предпочтение кавычкам в виде французских елочек («»). Допускается использование немецких лапок (""), но только в варианте вложенности кавычек во фразе.
Зачастую проблемы возникают с написанием следующих схожих символов:
- минус (-) — элемент в формуле;
- дефис (–) — знак между частями слова;
- тире (—) — используют между словами в предложении.
Для интернет-ресурсов зачастую связывают символ тире с неразрывным пробелом, чтобы не возникало переносов при отображении на различных устройствах.
Кратко иные спорные моменты:
- инициалы пишутся через пробел: И. И. Иванов;
- дата ставится в формате с точками без указания буквы года: 01.04.2022;
- знак процента слипается с цифрой: 10%;
- градусы Цельсия разделятся с цифрой пробелом: 35 °С;
- единицы измерения и валюты пишутся с пробелом независимо от того, ставится ли после обозначения точка или нет: 1 мл, 2022 г.;
- цифры разделяются пробелами по 3 знака: 1 000 000;
- формат телефонного номера выбирается для сайта единый и нежелательно использовать иные варианты.
Заключение
Правильный формат текста — залог успешного прочтения пользователями. Нечитаемые статьи или излишнее форматирование вызывают негатив у посетителей. Это приводит к потере клиентов и репутации.
Рекомендуем разрабатывать стандартные стили для интернет-ресурса на этапе проектирования, чтобы в дальнейшем использовать автоматически. Контент-менеджеру или сотруднику компании не придется каждый раз выдумывать сложные стили заголовков, списков, элементов. Достаточно использовать стандартные теги для придания тексту желаемого вида.
Интернет-агентство U-sl+Мирмекс поможет в формировании текстового единообразия вашего сайта и сделает каждую информацию удобной для чтения.
