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

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

Модульная страница

Текстовая страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Списки

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

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

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

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

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

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

1. Понимать принципы работоспособного дизайна.
2. Разбираться в типографике и иметь навыки вёрстки.
3. Знать основы проектирования пользовательского интерфейса и представления информации.
4. Уметь управлять задачами, проектами, исполнителями и собственным временем.
5. Освоить информационный стиль и основы редактуры.
6. Понимать юридическую сторону дизайна.
7. Быть готовым к переговорам и работе с ожиданиями клиента.

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

• Особенности Школы стажёров:
• 1) дистанционное обучение;
• 2) беспощадная система отбора и отсева на всех ступенях;
• 3) бесплатные места для лучших студентов;
• 4) гарантия трудоустройства;
• 5) чистая радость познания.

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

• Обратить внимание:
• а) на правильность,
• б) однородность,
• в) целесообразность.

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

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

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

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

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

• Элементы списков обозначаются:
• арабскими цифрами с точкой;
• арабскими цифрами или русскими строчными буквами с закрывающей скобкой;
• графическими маркерами или наборными знаками;
• втяжкой.

• Обратить внимание:
• на правильность,
• однородность,
• целесообразность.

Таблицы

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

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

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

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

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

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Показано количество выпитых чашек без учёта кофе-брейков на курсах бюро. Данных за ноябрь пока нет.

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

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

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

• Ссылки на файлы оформляются как обычные ссылки. Текст внутри ссылки и рядом с ней должен сообщать, что именно содержится в файле, какого он типа и размера. Размер должен указываться по-русски (МБ, КБ). Название файла допустимо, но необязательно:
• Коллекция редких файлов конца двадцатого века ЗИП, 1,2 МБ
• Макеты для печати ЕПС в архиве ЗИП, 52 КБ
• Инструкция: manual.pdf 0,7 МБ

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

Иллюстрации

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

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

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

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