Атлас
Визуальное направление

Редакционный стиль

Editorial

Журнальная вёрстка в интерфейсе: антиква, колонки текста, буквицы, рубрики, подписи и выразительные заголовки.

Целостный характер интерфейса: настроение, типографика, цвет, формы и композиция вместе. Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация
Демонстрация, а не реальный проект: сайт в стиле «Редакционный стиль». Тексты и данные вымышлены и показывают структуру, типографику и характер элементов.

О стиле

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

Главное в стиле — работа с текстом как с материалом. Контраст между крупной антиквой заголовков и спокойным набором основного текста, внимательная иерархия (рубрика → заголовок → лид → подпись автора → текст) и ритм колонок создают ощущение редакторского отбора и авторитетности.

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

Основные признаки

  • Заголовки антиквой крупного кегля с выраженным контрастом штрихов, часто с курсивом для акцента.
  • Основной текст набран в колонки с удобной длиной строки и книжным интервалом.
  • Буквица в начале материала, выносные цитаты и лиды курсивом.
  • Рубрики, номера выпусков, даты и подписи авторов набраны мелким гротеском прописными.
  • Тонкие и двойные линейки разделяют разделы, как в газетной полосе.
  • Иллюстрации и фотографии с подписями и указанием автора.
  • Тёплый «бумажный» фон и глубокий чернильный цвет текста, один благородный акцент.
  • Шапка-«масштхед» с крупным названием издания как фирменный знак.

Композиция и визуальная иерархия

Композиция

  • Сетка из 6–12 колонок с асимметричными сочетаниями: главный материал на 8 колонок, боковая колонка на 4.
  • Тексты набираются в 2–3 колонки на широких экранах, на узких — в одну колонку 60–70 знаков.
  • Иерархия полосы: масштхед → рубрики → главный материал → второстепенные материалы → боковые колонки.
  • Иллюстрации занимают ширину целого числа колонок и всегда сопровождаются подписью.
  • Разделы отбиваются линейками и рубриками, а не цветными подложками.

Визуальная иерархия

  • Первый уровень — заголовок антиквой 48–96 px, вес 700–900 или светлый крупный курсив.
  • Второй уровень — лид курсивом 20–24 px и выносные цитаты.
  • Третий уровень — основной текст 17–19 px антиквой с интервалом 1.55–1.7.
  • Служебный уровень — рубрики, даты, авторы и подписи гротеском 11–13 px прописными с разрядкой.
  • Акцентный цвет — у рубрик, буквицы и ссылок, а не у больших площадей.

Цвета и примеры палитр

  • Основа — бумажный фон и чернильный текст: тёплый светлый фон и почти чёрный тёплый текст.
  • Один акцент благородного оттенка (бордо, глубокий синий, охра) для рубрик, буквиц и ссылок, не больше 5% площади.
  • Иллюстрации задают дополнительные цвета; интерфейс вокруг них остаётся сдержанным.
  • Линейки — того же тона, что текст, но заметно светлее; двойные линейки — для главных разделителей.

Палитры — примеры, а не обязательный набор. Нажмите на цвет, чтобы скопировать HEX-код.

Бумага и бордо

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

Газетная полоса

Белый фон и глубокий синий — для новостных и аналитических изданий.

Ночной выпуск

Тёмный режим чтения с охристым акцентом для культурных и вечерних изданий.

Типографика

  • Антиква для заголовков и текста, гротеск — для служебного слоя (рубрики, метаданные, интерфейс).
  • Контрастная дисплейная антиква в заголовках и спокойная текстовая антиква в основном наборе.
  • Курсив — полноценный инструмент: лиды, цитаты, акцентные слова в заголовках.
  • Основной текст 17–19 px, интервал 1.55–1.7, длина строки 60–72 знака, абзацный отступ или отбивка.

Все шрифты в примерах поддерживают кириллицу.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Playfair Display
    Текст
    Source Serif 4

    Контрастная дисплейная антиква для заголовков и спокойная текстовая антиква для длинного чтения.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Cormorant Garamond
    Текст
    Lora

    Изящная гарнитура в духе Гарамона для заголовков и тёплая, хорошо читаемая на экране Lora для текста.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Old Standard TT
    Текст
    PT Serif

    Старая журнальная антиква с характерной кириллицей и надёжный экранный PT Serif для основного набора.

Кнопки, поля, карточки и навигация

Кнопки

Кнопки сдержанные: прямоугольные или с минимальным скруглением, тёмная заливка или обводка, текст гротеском прописными с разрядкой. Текстовые ссылки — с подчёркиванием.

Поля ввода

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

Карточки

Карточка материала — иллюстрация, рубрика, заголовок антиквой, лид и автор; отделяется линейкой, без тени.

Навигация

Масштхед с названием издания и строка рубрик между линейками; активная рубрика — акцентным цветом или подчёркиванием.

Рекомендации по применению

Где подходит

  • Медиа, журналы, блоги, лонгриды и рассылки.
  • Бренды с историей и сторителлингом: рестораны, мода, путешествия, книжные проекты.
  • Образовательные и культурные платформы с большим объёмом текста.
  • Годовые отчёты и спецпроекты, где важна интонация рассказа.

Как применять

  • Начинайте с текста: хороший заголовок, лид и подписи важнее декоративных приёмов.
  • Держите две гарнитуры (антиква и гротеск) и выражайте разнообразие курсивом и кеглем.
  • Подписывайте каждую иллюстрацию — подпись делает изображение частью материала.
  • Используйте буквицу и выносную цитату один раз на материал, чтобы они оставались событием.
  • Проверяйте длину строки: на широком экране делите текст на колонки или ограничивайте ширину.

Ограничения и типичные ошибки

Ограничения

  • Плохо подходит для плотных рабочих интерфейсов с большим числом элементов управления.
  • Без качественного текста и изображений журнальные приёмы выглядят пустой декорацией.
  • Многоколоночный текст на узких экранах требует перестройки в одну колонку.
  • Контрастная дисплейная антиква теряет читаемость в мелком кегле.

Типичные ошибки

  • Набирать основной текст дисплейной антиквой с тонкими штрихами — она рассыпается в мелком кегле.
  • Растягивать текст на всю ширину экрана: строка в 120 знаков нечитаема.
  • Ставить буквицы и выносные цитаты в каждом абзаце.
  • Мешать три-четыре гарнитуры ради «журнальности».
  • Оставлять иллюстрации без подписей и авторов.
  • Делать кнопки и поля декоративными до неузнаваемости — интерфейс перестаёт быть понятным.

Сочетания с другими направлениями

Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

  • Минимализм

    Минимализм даёт воздух и сдержанность: редакционная типографика на спокойном поле выглядит дорого и ясно.

    Направление

  • Швейцарский стиль

    Швейцарская сетка придаёт журнальной полосе строгость: антиква в заголовках, гротеск и модульная сетка в остальном.

    Направление

  • Премиальное оформление

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

    Направление

  • Bento-компоновка

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

    Компоновка

Применить стиль «Редакционный стиль»

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

Использовать