текст как базовый элемент

№2 Текст как базовый элемент

Этот пост, набор главных на мой взгляд тезисов Артема Горбунова из Бюро.

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

текст как базовый элемент

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

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

Кегль экранного текста обычно лежит в диапазоне 12…16 пикселей, а интерлиньяж — 120…150% от значения кегля:

вертикальный ритм
16px, 150%

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

Интерлиньяж в тексте
12px, 120% \ 14px, 140%

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

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

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

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

многоколоночная верстка текста в веб странице

Интересное по теме…

Набор иконок: дизайн и удаленная работа Набор из 20 значков для дизайнеров и фрилансеров. Бесплатный набор для дизайнеров Включает основные инструменты проектирования: инструмент обрезки, значок пипетки и мольберт. Подходит для проектов связанных с дизайном. Экономия времени Эти бесплатные векторные иконки сэкономят время при разработке веб-дизайна или мобильно...
5 принципов хорошего дизайна Юрий Ветров (Руководитель портальной дизайн-команды Mail.Ru Group) рассказал, по каким критериям надо оценивать дизайн в первом уроке программы «Дизайнер интерфейсов» https://youtu.be/aFPT0v44BHw Урок Юрия Ветрова: По каким критериям надо оценивать дизайн По этому докладу я подготовил визуальную презентацию с тезисами, которые озвучил Юрий...
№1 Заголовок как базовый элемент Этот пост, набор главных на мой взгляд тезисов Артема Горбунова из Бюро. Заголовок задает конструкцию и вносит смысл. Плохой заголовок — формальное резюме текста. Хороший заголовок привлекает внимание и подогревает интерес к теме. Правильно организованная структура заголовков помогает читателю, подобно оглавлению ориентироваться в те...
№0 Базовые элементы верстки Этот пост, набор главных на мой взгляд тезисов Артема Горбунова из Бюро. К базовым элементам относятся: заголовок текст иллюстрация элементы управления ссылка подпись. Главная задача верстки — видеть и различать эти элементы, а затем аккуратно их размещать. Хаотично перемешанные элементы верстки, в бюро называют «верстк...

Оставить комментарий

avatar
  Подписаться  
Уведомление о
В сети
printerest icon
Behance icon
CodePen icon
GitHub icon
© Roman Volgasov, 2018