x
 
Артём
30 июня 2014

Что нужно знать о тексте как базовом элементе?



Текст — базовый элемент вёрстки.

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

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


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

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

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

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

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля:

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

16 п. / 20 п.

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

12 п. / 15 п.

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

14 п. / 20 п.
Точка, линия и прямоугольник

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

Генеративная поэтика основывается на парадоксальном совмещении.

11 п. / 13 п.

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

11 п. / 17 п.

Формат — это модуль, плашка или страница, на которых набран текст. По «правилу внутреннего и внешнего» поля вокруг текста должны быть больше межстрочных просветов. Поэтому если формат слишком маленький, кегль и интерлиньяж не должны быть слишком большими — для больших полей не останется места.

Выбор полей и интерлиньяжа

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

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

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

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.


Вёрстка трёх анонсов

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

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

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

Кегль 12 п., интерлиньяж 16 п., между абзацами 8 п. Поля больше межстрочных просветов, содержат поправку на гравитацию и дополнительный воздух справа: сверху 18 п., снизу 32 п., слева 13 п., справа 24 п.

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

Совет смешать комки
Типографика и вёрстка — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Сергей Конаков
30 июня 2014

Между чем и чем измеряется просвет между абзацами? В последнем примере он 8 п, а поле слева — 13 п. На взгляд кажется, что просвет между абзацами больше левого поля.

Александр Колодько́
30 июня 2014

А если создать такой вариант с горизонтальным скроллом и колонками? Или слишком непривычно? На планшетах может прижиться.

Глеб Хорунжий
24 августа 2014

Александр, это уже сделали, например Микрософт в приложении News для Виндоус 8.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

4 Расскажите о том, как сделать хорошую модульную сетку 3 Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8




Недавно всплыло

Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Как вы верифицируете оценку сроков от сотрудника? 1 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 Как вести себя с человеком, который Джима Кемпа не читал и вину не признаёт? 2