Типографика и верстка

Артём Горбунов

Как собрать крепкую и визуально интересную страницу сайта: базовые элементы, верстка текста и иллюстраций, микроформаты.

Основные понятия

Теория близости. Правило внутреннего и внешнего

Модульная верстка. Якорные объекты

Формат и выбор полей. Длина строки и интерлиньяж

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

Базовые элементы

Заголовок

Текст

Иллюстрация

Подпись

Гиперссылка

Элемент управления

Верстка блока

Верстка текстовых блоков:

Список и ширина колонки · Игорь Штанг

Привязка к левому верхнему углу · Игорь Штанг

Порядок чтения

Доминирующая и вспомогательная иллюстрации

Space in Design Systems · Натан Кёртис
Контрпространство в дизайне

Верстка страницы

Сборка из модулей

Вёрстка текстовой страницы

Вёрстка главной страницы сайта и раздела

Уши, цитаты, фактоиды, врезки, авторы и социкнопки

Контраст формы, цвета и движения · Ярослав Шуваев
См. часть 2 статьи

Выход из прямоугольника

Дополнительное чтение

Optical Adjustment · Люк Джонс
Оптическая компенсация РУС

Thinking with Type · Эллен Люптон
Бесплатная онлайн-книга о типографике и сетках

A More Modern Scale for Web Typography · Джейсон Пэментел
Единая шкала кеглей и интерлиньяжей для печати, десктопа, планшета и телефона

Подписывайтесь на рассылку об интерфейсах без шелухи