Артём
4 августа 2014

Как верстать текстовые блоки?



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

Модульная страница состоит из смысловых блоков. Рассмотрим текстовые блоки без иллюстраций.

Эталонный модуль — это заголовок, который накрывает текст:

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

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


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


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

Ссылки для продолжения чтения логично встают в конец блока:

Жизнь и удивительные приключения Робинзона Крузо

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



Заголовок и главная ссылка могут быть объединены, если это не нарушит единообразие остальных блоков на странице:

Жизнь и удивительные приключения Робинзона Крузо

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



Если в блоке нет текста, но есть несколько ссылок, у него есть шанс вытянуться в строку:
Греческие буквы:   Альфа   Бета   Гамма   Дельта   Эпсилон


Или вовсе редуцироваться до отдельно стоящей ссылки:
Греческий алфавит для чайников


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

23 февраля

Греческий алфавит для чайников

Греческий алфавит для чайников

931 просмотр · 23 коментария

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

Так себе

Соседние элементы пестрят, текст изолирован и непонятен

Лучше

Блоки приобрели форму, смысл текста восстановлен

Направим мутации эталона в сторону усложнения. Текст в блоке может быть разбит подзаголовками по вертикали:

Робинзон Крузо

Жизнь

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

Удивительные приключения

Симулякр аннигилирует генезис свободного стиха, но языковая игра не приводит к активно-диалогическому пониманию.

Биография

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



Или по горизонтали — по колонкам:

Жизнь и удивительные приключения Робинзона Крузо

Жизнь

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

Приключения

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

Биография

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


По колонкам становятся и неоднородные элементы:

Сим-сим, откройся


Поэтика

Характер



Даже заголовок может свеситься в одной из колонок:

Жизнь и приключения

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

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

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


В такой конфигурации текст ничем не отделён сверху от соседних блоков и рискует «слипнуться» с их текстом. Но на простой странице это смотрится эффектно и «по-швейцарски»:

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

Жизнь и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

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

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

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

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

Комментарии и просмотры


Правило работает и в малых формах:


И в крупных блоках:


P. S.

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

P. P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Игорь Львов
17 марта 2015

>Если в блоке нет текста, но есть несколько ссылок, у него есть шанс вытянуться в строку:

Это разве плохо?


26 марта 2015

Что ж плохого?


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

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

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

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

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 1




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

Начальник считает, что перед встречей нужно обязательно разработать несколько вариантов предложений 6 4 Расскажите об обратной связи в интерфейсе 1 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2