Приведём рекомендации по вёрстке экранной текстовой страницы со статьёй, заметкой, книжной главой или текстом о компании.

В отличие от модульной страницы, состоящей из отдельных блоков‑атомов, текстовая страница представляет собой поток для последовательного чтения — например как эта лекция. Подобно длинной молекуле полимера, текстовая страница включает в себя разнообразные элементы в свободном порядке: подзаголовки, списки, таблицы и иллюстрации.

Модульная страница
Текстовая страница

Основной текст

Колонка основного текста занимает 60⁠—70 % ширины окна. В «резиновой» вёрстке ширина текстовой полосы уменьшается или увеличивается с изменением размера окна или экрана. Но разрешение экранов постоянно растёт, поэтому имеет смысл ограничивать максимальную ширину колонки текста, чтобы строки не становились чрезмерно длинными, а страница — трудной для чтения.

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

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

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

Подзаголовки

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

Кегль заголовков второго уровня обычно увеличен по сравнению с основным текстом. Перед такими заголовками пропускают примерно две строки, после делают отступ, равный обычному абзацному — как у надписи «Подзаголовки» в этом разделе.

Заголовки третьего уровня

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

Подзаголовок в подбор к основному тексту. Ещё один способ избежать лишних отступов на странице.

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

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

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

Списки

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

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

В «Справочнике издателя и автора» Аркадия Мильчина приведены подробные рекомендации по оформлению разных видов списков. Ниже — самые употребительные варианты.

Нумерованные и упорядоченные

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

Для успешной работы дизайнеру необходимо:

  1. Понимать принципы работоспособного дизайна.

  2. Разбираться в типографике и иметь навыки вёрстки.

  3. Знать основы проектирования пользовательского интерфейса и представления информации.

  4. Уметь управлять задачами, проектами, исполнителями и собственным временем.

  5. Освоить информационный стиль и основы редактуры.

  6. Понимать юридическую сторону дизайна.

  7. Быть готовым к переговорам и работе с ожиданиями клиента.

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

Особенности Школы бюро:

  • 1) дистанционное обучение;

  • 2) беспощадная система отбора и отсева на всех ступенях;

  • 3) бесплатные места для лучших студентов;

  • 4) рабочие места для выпускников;

  • 5) чистая радость познания.

Если элементы списка простые, то есть состоят из нескольких слов без знаков препинания внутри, допустимо ставить между элементами запятую. Если простые элементы не содержат ссылок, то можно не увеличивать расстояние между элементами.

Обратить внимание:

  • а) на правильность,

  • б) однородность,

  • в) целесообразность.

Ненумерованные списки

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

Элементы списков обозначаются:

  • арабскими цифрами с точкой;

  • арабскими цифрами или русскими строчными буквами с закрывающей скобкой;

  • графическими маркерами или наборными знаками;

  • втяжкой.

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

Элементы списков обозначаются:

  • арабскими цифрами с точкой;

  • арабскими цифрами или русскими строчными буквами с закрывающей скобкой;

  • графическими маркерами или наборными знаками;

  • втяжкой.

Обратить внимание:

  • на правильность,

  • однородность,

  • целесообразность.

Таблицы

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

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

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

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

Ниже приведён пример оформления таблицы с заголовком и поясняющим текстом:

Употребление кофе в Коворкафе осенью 2013 и 2014 годов
Показано количество выпитых чашек без учёта кофе‑брейков на курсах бюро.
Данных за ноябрь пока нет.

Эсп.рессо Капуч.ино Лате Амер.икано Всего
2013
Сентябрь 61 20 70 61 212142
Октябрь 68 29 56 60 213157
Ноябрь 70 21 13 17 121108
2014
Сентябрь 54 65 28 35 182154
Октябрь 59 77 51 53 240189

Особые элементы текста

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

Ссылки на файлы оформляются как обычные ссылки. Текст внутри ссылки и рядом с ней должен сообщать, что именно содержится в файле, какого он типа и размера. Размер должен указываться по‑русски (МБ, КБ). Название файла допустимо, но необязательно:

Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru

Иллюстрации

Отдельные внутритекстовые иллюстрации завёрстываются по левому краю, центру или, лучше всего,— по ширине полосы набора:

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

После иллюстрации (с подписью или без) оставляется увеличенное вертикальное расстояние.

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

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

Типографика в вебе
Отправить
Поделиться
Запинить

Рекомендуем другие советы