Мультимедийный лонгрид — это не просто «статья, которую придётся долго читать», а сложный организм.
Этот жанр возник на стыке традиционной журналистики и веб-дизайна, став ответом на потребность в глубоком, но при этом визуально привлекательном и интерактивном контенте.
Давайте рассмотрим анатомию лонгрида, разобрав его на составные части. Мы изучим, как различные элементы — от заголовка до мультимедийных вставок — работают вместе, создавая единое повествовательное пространство.
Обложка и титульный блок
Первое свидание с вашим контентом, первый боевой контакт. Здесь либо искры полетят, либо читатель сбежит.
1. Заголовок должен быть как первый удар в драке — короткий и сильный. Если ваш заголовок не заставляет читателя хотя бы приподнять бровь, вы делаете что-то не так. Сделайте его большим и жирным. Используйте шрифт размером минимум 32pt, а лучше больше. 2. Подзаголовок — это ваш шанс объяснить, почему читатель должен потратить следующие 20 минут своей жизни на ваш текст. Не упустите его. Подзаголовок должен быть немного меньше и изящнее, чем заголовок. Используйте хорошо читаемый на экране шрифт. 3. Автор, чтобы было, с кого спрашивать. Чтобы за текстом ощущалась авторская субъектность. 4. Дата, чтобы читатель знал, насколько устарела информация к тому моменту, как он до неё добрался. 5. Изображение или видео, потому что мы знаем: одна картинка стоит тысячи слов. Обязательно высокое качество для титульного образа — если только lo-fi не является сознательно используемым вами приёмом. Используйте оверлей с тончайшим градиентом для улучшения читаемости текста.
6. Лид — это не просто вступительный текст, это сжатый до нескольких строк лонгрид.
Хороший лид должен быть достаточно конкретным, чтобы читатель понял, о чём пойдёт речь, но достаточно загадочным, чтобы у него возникло неодолимое желание прочитать дальше.
Помните: ваш лид — это обещание. Обещание интеллектуального приключения, эмоционального путешествия или, по крайней мере, нескольких минут, которые читатель не потратит на просмотр видео с котиками.
Идеальный лид должен быть не длиннее твита и не короче хайку.
Основной текст
Это мясо, это субстрат, это медиум — а medium, как писал Маршалл Маклюэн, is the message.
7. Параграфы. Держите их короткими. Представьте, что каждый параграф — это твит.
8. Заголовки второго, третьего (и т. д.) уровней. Это как указатели на долгой дороге: «Эй, ты всё ещё не заблудился!»
9. Шрифт выбирайте с умом. Очень подробно принципы подбора шрифтов и шрифтовых сочетаний разобраны в наших лекциях.
10. Размер шрифта — минимум 16pt, а для больших экранов — не меньше 20pt.
11. Межстрочный интервал — примерно 1.5–1.6. Удобно делать межстрочные интервалы для разных текстовых стилей кратными 8pt.
12. Длина строки — в районе 60–85 символов (30–40 для мобильной версии). Не бойтесь пустого пространства по бокам на широких экранах. Лучше иметь узкую колонку, чем строку от края до края.
13. Абзацы. Используйте «швейцарский абзац» — отбивку между абзацами вместо красной строки. Швейцарскую отбивку лучше делать путём установки нижнего маргина параграфа равным межстрочному расстоянию.
Дополнительные элементы
14. Врезы это как глоток воздуха в духоте текста. Сколько бы вы ни старались «не душнить», некоторую гипоксию (читай: скуку) ваш читатель будет ощущуать всегда. Для фона используйте контрастный цвет или паттерн. Врез должен выделяться. Можно использовать другой шрифт или начертание. Сделайте его заметным, но не кричащим. Это акцент, а не вопль. Размер — как правило, крупнее основного текста, но не настолько, чтобы конкурировать с заголовками. Ключевые мысли выделите так, будто от этого зависит жизнь вашего текста, а текст живёт лишь тогда, когда его читают.
15. Цитаты. Сделайте цитаты заметными. Большие кавычки, другой шрифт, может быть даже другой цвет фона. Читатель должен отчётливо понять, что «тембр голоса» рассказчика изменился — слово передали кому-то другому. Всегда указывайте источник.
16. Разделители — это могут быть линии, иконки, цифры, заголовки, маленькие иллюстрации. Что угодно, лишь бы читатель понял, что мы переходим к новой теме. Добавьте достаточно воздуха вокруг разделителя. Это как пауза в разговоре — она нужна, чтобы осмыслить сказанное. Тут важна консистентность. Используйте одинаковые разделители по всему тексту. Не устраивайте читателю визуальный сюрприз на каждом повороте (если такие сюрпризы — это не сознательно используемый вами приём, о котором вы знаете, чем он оправдан).
17. Карточки — это маленькие, аккуратные порции данных для тех, кто на информационной диете. Делайте их визуально привлекательными. Представьте, что каждая карточка — это мини-постер. Краткость — сестра таланта. Если вы не можете объяснить идею в карточке, может, это не такая уж хорошая идея?
18. Фактоиды — это слово, вообще говоря, означает «фактообразный», имеющий вид факта, но фактом не являющийся, то есть «газетная утка», информационный симулякр. Американский писатель Норман Мейлер определил этот термин как «факты, не существовавшие до того, как они появились в журнале или газете». Со временем значение термина расширилось, и в английском языке он также может обозначать незначительный, но интересный факт.
По неведомой нам причине в современной российской практике веб-дизайна этим словом обозначается любой врез или вынос, содержащий крупное число. Людям нравятся числа — всё, что поддаётся точному исчислению, кажется правдой (иногда лучше работают «волшебные числа» вроде 3, 7, 12, 666 — а иногда, наоборот, более сильное впечатление производят числа «неправильные». Например, автор этих строк пережил религиозный опыт, узнав, что, согласно М-теории, в пространстве Калаби-Яу — 11 измерений: это так странно, что не может быть человеческой выдумкой, а только художественным хулиганством Творца).
Фактоиды — это как информационные конфетки: возможно, не очень полезные, но все их любят. Но убедитесь, что они связаны с основным текстом — либо, наоборот, привносят элемент абсурдистской иррелевантности (если в этом ваш приём).
19. Иллюстрации. Иногда (а вообще говоря, очень часто, особенно в наше время) картинка действительно стоит тысячи слов. Используйте высокое разрешение и хорошее качество (если lo-fi не является, опять же, вашим сознательным приёмом).
Футер и выходные данные
Даже самое увлекательное путешествие когда-то заканчивается.
20. Информация об авторе: дайте читателю знать, кто виноват в том, что он только что потратил час своей жизни.
21. Ссылки на источники: покажите, что вы провели фактчекинг или хотя бы умеете гуглить.
22. Призыв к действию: предложите читателю что-то сделать. Подписаться на рассылку, прокомментировать, или, может быть, просто задуматься о смысле жизни.
23. Фон — немного темнее или контрастнее основного фона. Это как занавес в конце спектакля.
24. Типографика — мельче основного текста, но все ещё читаемая.
25. Социальные иконки. Если они есть, сделайте их заметными, но не навязчивыми. Ваша визитная карточка должна быть доступна вашему собеседнику, но вы не пытаетесь всучить её каждому встречному.
Механика чтения
Саккады и фиксации
Наши глаза не плавно скользят по тексту, а совершают серию быстрых движений (саккад) и остановок (фиксаций). Это похоже на то, как если бы вы читали книгу во время езды на американских горках — рывок, остановка, рывок, остановка.
Урок для нас: создавайте ритм в вашей типографике. Используйте пробелы, отступы и разбивку на абзацы, чтобы дать глазам естественные точки для фиксации. Это как расставлять указатели на скоростном шоссе — они помогают ориентироваться и не пропустить нужный поворот.
Парафовеальное превью
Наш мозг начинает обрабатывать следующее слово ещё до того, как мы на него посмотрели. Это как если бы у нас в голове был встроенный спойлер-генератор. Пока мы фиксируемся на одном слове, наше периферическое зрение уже сканирует следующие.
Урок для нас: используйте это знание при создании макета. Оставляйте достаточно «воздуха» вокруг текста, чтобы не перегружать периферическое зрение, и чтобы было достаточно пространства для «резонанса».
Располагайте ключевые слова так, чтобы они попадали в поле парафовеального зрения. Это как хороший клиффхэнгер в сериале — вы уже видите начало следующей сцены, и это заставляет вас переходить к новому эпизоду.
Узнавание слов по форме
Мы не читаем буквы по отдельности, а распознаем слова целиком по их форме. Вот почему мы можем читать текст, где буквы перемешаны, но первая и последняя остаются на месте.
Урок для нас: выбирайте шрифты с чёткими очертаниями слов — то есть с достаточно длинными выносными элементами. Избегайте использования ВСЕХ ПРОПИСНЫХ в длинных текстах — это нарушает привычную форму слов и замедляет чтение.
Субвокализация
Многие люди при чтении «проговаривают» текст во внутреннем голосе. У вас в голове словно сидит крошечный диктор, который читает все, что вы видите.
Урок для нас: учитывайте ритм и звучание текста, особенно в заголовках и ключевых фразах. Используйте аллитерации и ритмические конструкции для создания «липких» фраз, которые легко запоминаются. Но не переусердствуйте (хотя по своему опыту знаю, что остановиться очень трудно — в какой-то момент понимаешь, что деловое письмо превратилось в стихотворение в прозе).
Регрессивные саккады
Иногда наши глаза возвращаются назад к уже прочитанному тексту. Представьте, что вы едете по автостраде и вдруг думаете: «Погодите-ка, я точно не пропустил нужный поворот?»
Урок для нас: создавайте ясную иерархию в тексте. Используйте заголовки, подзаголовки и выделения, чтобы читатель мог легко найти нужное место, если потерялся. Это как создавать хорошую систему навигации в городе — даже если вы заблудились, вы всегда сможете найти главную площадь.
Влияние контекста
Наш мозг использует контекст для ускорения процесса чтения и понимания (предсказывая следующее слово примерно по тому же принципу, по которому работают Т9 и большие языковые модели).
Урок для нас: Создавайте когерентный контекст. Используйте соответствующие изображения, иконки и цветовые схемы, которые поддерживают смысл текста. Это как создавать хорошую атмосферу в ресторане — правильное освещение и музыка могут сделать еду вкуснее.
Скимминг
По морям, по волнам, нынче здесь, завтра там — но не погружаясь. Как говаривал наш приятель: «Я тебя не вполне понимаю, но я качаюсь на волнах твоих мыслей». Или, если хотите более изящную метафору, это как дегустация вин — вы пробуете понемногу, чтобы решить, стоит ли выпить целый бокал.
Ещё одна гастрономическая метафора — скимминг (буквально «снятие сливок») — это беглое чтение текста с целью быстрого выявления основных идей. Это как если бы вы были шпионом, который быстро просматривает секретные документы, выхватывая ключевую информацию, прежде чем охрана вернётся.
В мире, где количество информации удваивается каждые 18 месяцев (или это уже устаревшие данные?), скимминг стал стал не просто навыком, а стратегией выживания в мире, перенасыщенном контентом.
Каким бывает скимминг? Обычно его разновидности определяют через разные «паттерны чтения», то есть через описание хореографии читательского взгляда.
F-паттерн
Читатели часто сканируют страницу в форме буквы F — сверху вниз по левому краю, с несколькими горизонтальными движениями, которые инициируются, если в начале строки встртилось что-то привлекающее внимание — аватарка, иконка, буквица, иллюстрация.
Почему это важно? Потому что это показывает нам, что пользователи, как ленивые студенты, читают только начало «параграфа» и первые несколько слов каждой строки.
Как использовать:
- Начните с сильного, привлекательного заголовка. Это как первый удар в боксе — он должен впечатлять. - Используйте подзаголовки, которые сами по себе рассказывают историю. Представьте, что кто-то читает только их — поймёт ли он суть? - Начинайте параграфы с ключевых слов. Это как расставлять приманки для рыбы — читатель должен «клюнуть» на первые слова. - Используйте маркированные списки для важных моментов. Это как создавать островки внимания в море текста. - Размещайте самую важную информацию в первых двух параграфах.
Z-паттерн
На некоторых страницах (особенно на тех, структура которых формируется не полотном текста, а, например, иллюстрациями, и где лучше проявлена визуальная иерархия) взгляд движется по траектории, напоминающей букву Z.
Как использовать:
- Разместите логотип или название издания в верхнем левом углу. Это точка входа для глаз читателя. - Используйте верхний правый угол для важной дополнительной информации — например, время чтения или категорию статьи. - Создайте визуальный элемент, ведущий глаз по диагонали вниз. Это может быть графика, иллюстрация или просто умело расположенный текст. - Закончите нижним правым углом, где можно разместить призыв к действию или ссылку на следующую статью.
Диаграмма Гутенберга
Диаграмма Гутенберга (другая концептуализация того же Z-паттерна) делит страницу на четыре квадранта: верхний левый (первичная оптическая область), верхний правый (сильная область), нижний левый (слабая область) и нижний правый (терминальная область).
Глаза естественным образом следуют по траектории от верхнего левого угла к нижнему правому, с паузами в каждом квадранте.
Как использовать:
- В верхнем левом квадранте разместите самую важную информацию — это может быть краткое резюме или ключевой тезис статьи. - Верхний правый квадрант идеален для дополнительной, но важной информации — например, цитаты или ключевые факты. - В нижнем левом квадранте можно разместить менее важные, но интересные детали или сайдбар с дополнительной информацией. - Нижний правый квадрант — отличное место для заключения или призыва к действию.
Пинбол-паттерн
Глаза пользователя «отскакивают» от одного привлекательного элемента к другому, как шарик в пинболе.
Как использовать:
- Создайте серию визуальных «станций», между которыми будет «прыгать» взгляд читателя. Это могут быть иллюстрации, цитаты, врезки или инфографики. - Обеспечьте визуальную связь между этими элементами. Используйте цвет, форму или стиль, чтобы создать ощущение единства. - Не забывайте о «потоке» — должна быть логичная последовательность, по которой читатель может следовать от одного элемента к другому.
Пятнистый паттерн
Пользователи быстро сканируют страницу, останавливаясь на отдельных элементах, которые привлекают их внимание.
Как использовать:
- Создайте визуальные «якоря» по всему лонгриду. Это могут быть иллюстрации, инфографики, цитаты или просто ярко оформленные факты. - Используйте пустое пространство стратегически. Помните, что в музыке паузы так же важны, как и ноты. - Варьируйте размер и стиль элементов. Это как создавать визуальный ритм — чередование крупных и мелких элементов удерживает внимание.
Паттерн слоёного пирога
Пользователи читают заголовки и подзаголовки, пропуская остальной текст. Это как есть только крем с торта, игнорируя коржи.
Использование паттерна слоёного пирога: - Создайте чёткую иерархию заголовков и подзаголовков. - Сделайте так, чтобы каждый уровень заголовков нёс смысловую нагрузку. Читатель должен получить представление о содержании, даже если он прочтёт только заголовки. - Используйте различные стили для разных уровней заголовков — это создаст своего рода визуальную карту контента.
Паттерн доверительного сканирования
Пользователи начинают со сканирования, а затем переходят к более внимательному чтению, если контент их заинтересовал. Это как пробовать еду в ресторане: сначала вы нюхаете, потом пробуете кусочек, и если вкусно — съедаете всё.
Как использовать:
- Начинайте с привлекательных визуальных элементов и заголовков. - Постепенно увеличивайте глубину и сложность контента. - Начните с сильного визуального элемента — это может быть большая иллюстрация или инфографика. - Постепенно увеличивайте плотность текста. Начните с коротких, легко сканируемых параграфов и постепенно переходите к более глубокому контенту. - Используйте «приманки» для углублённого чтения — интригующие врезки или подписи к изображениям, которые заставят читателя захотеть узнать больше.
Как дизайнеры могут оптимизировать контент для скимминга?
Подведём итог, собрав все рекомендации в одном списке. - Используйте информативные заголовки. Они должны быть как хорошие рекламные слоганы — краткими и содержательными. «Как сэкономить миллион» звучит интереснее, чем «Финансовые стратегии для долгосрочного планирования в условиях нестабильной экономики», не так ли? - Примените принцип перевёрнутой пирамиды. Размещайте самую важную информацию в начале. Это как если бы вы рассказывали анекдот, начиная с панчлайна. - Используйте маркированные списки. Они позволяют быстро схватить основные пункты. - Выделяйте ключевые слова. Жирный шрифт, курсив, подчёркивание — используйте их, но с умом.
- Используйте подзаголовки. Они разбивают текст на удобоваримые кусочки. Это как делить пиццу на слайсы — её легче есть, и вы можете выбрать лучшие кусочки. - Пишите короткими абзацами. Большие блоки текста пугают скиммеров. Это как смотреть на гору, которую нужно покорить, — чем она выше, тем меньше желания начинать восхождение. - Используйте изображения и инфографику. Визуальная информация обрабатывается мозгом быстрее, чем текст. Это как если бы вы давали читателю карту сокровищ вместо длинных письменных инструкций. - Создавайте «точки входа». Используйте цитаты, врезки, боковые панели. Это как создавать множество дверей в ваш контент — читатель может войти там, где ему удобно.
«Принцип биллборда» Стива Круга
Стив Круг предложил простую, но революционную по тем временам идею: веб-страница должна быть настолько ясной, чтобы пользователь мог понять её суть за долю секунды, как если бы он проезжал мимо неё на скорости 100 км/ч.
Мгновенное понимание
Ваша веб-страница должна быть понятна быстрее, чем пользователь успеет моргнуть.
Иерархия важности
Самая важная информация должна быть самой заметной.
Ясность превыше красоты
Круг настаивает, что ясность важнее эстетики.
Минимум умственных усилий
Пользователь не должен «думать».
Как учитывать «принцип биллборда»
Заголовки-чемпионы
Ваши заголовки должны быть как боксеры-тяжеловесы: сильные, прямолинейные и бьющие точно в цель.
Визуальная иерархия
Используйте размер, цвет и расположение, чтобы показать, что важно.
Убийство священных коров
Будьте готовы пожертвовать красивыми, но бесполезными элементами дизайна.
Тестирование на скорость
Покажите ваш дизайн кому-нибудь на 5 секунд. Если они не могут сказать, о чем ваш сайт, начните все сначала.
Используйте конвенции
Логотип слева вверху, навигация сверху или слева — не время изобретать велосипед. Это как если бы вы решили поменять местами руль и педали в автомобиле. Технически возможно, практически — катастрофа.
Бездна — ваш друг
Не бойтесь пустоты.
Критика и ограничения «принципа биллборда»
Чрезмерное упрощение
Не все сайты могут (или должны) быть сведены к уровню биллборда. Некоторые идеи требуют глубины и нюансов. Это как объяснять квантовую физику через эмодзи — можно попытаться, но есть более эффективные способы.
Потеря индивидуальности
Слишком строгое следование этому принципу может привести к однообразию дизайна. Это как если бы все рестораны подавали только гамбургеры, потому что их легко понять.
Недооценка пользователя
Иногда мы недооцениваем способность и желание пользователей разобраться в сложном интерфейсе. Это как если бы мы давали пользователям только книжки-раскраски, когда они готовы читать «Улисса».
Гигиена вёрстки
Выравнивание текста
Выравнивание текста может сделать ваш текст элегантным и утончённым или превратить его в растрёпанное пугало.
Выравнивание по левому краю
Это классика. Такое выравнивание создаёт чёткую линию слева, давая глазу точку опоры. Это идеально для длинных текстов, потому что облегчает переход от строки к строке.
Самая естественная для письма слева направо выключка — по левому краю.
С левой стороны блок текста организован вертикалью, с правой строчки заканчиваются, как получится, более или менее одинаково по длине. Левая выключка демократична и отчасти небрежна. Это, собственно, и не выключка. Это текст как таковой, его природное состояние в эпоху прямоугольных носителей информации. Левая выключка — самая тихая форма осознанной свободы.
Выключка влево, за редкими исключениями, не предполагает переносов. Особенно в широких колонках.
Текст, выключенный влево, как бы слегка затухает к концу строки вместе с выдохом и возобновляется на новой строке вдохом. Выключенный влево текст по-русски легче читать при не очень большой длине строк и в не слишком большом объеме. Левый текст, как ни странно, в естественном состоянии плотнее и монотоннее расключенного.
Юрий Гордон
Преимущества
- Естественно для латиницы и киррилицы. - Улучшает читабельность. - Гарантирует консистентный ритм набора. - Создаёт неформальный, современный вид.
Недостатки
- Может создавать «рваный» правый край.
Выравнивание по правому краю
Это как ходить спиной наперёд — технически возможно, но зачем? Используйте его только для коротких фрагментов текста или для создания контраста.
Самый неестественный способ сверстать текст — выключить его вправо. Для удобства чтения начало строки — важнейший элемент. Если строки начинаются с разных позиций, глаз каждый раз спотыкается при переходе на ступеньку ниже.
Длинные строки бессмысленно выключать вправо — широкий флаг не так эффектен, как узкий. Длинный текст с правой выключкой никто не захочет читать, потому что это издевательство над чтением слева направо. Значит, вправо имеет смысл выключать только короткие тексты с небольшой длиной строки. Например, эпиграфы, которые принято ставить справа и вправо же выключать.
При чтении правой выключки строка стартует неуверенно, как бы с одышкой. Потом разгоняется — и в конце бац лбом о стенку. Особенно странно смотрится в этой точке перенос — тупой тычок с сильным возвратом. Отлетев от монолитного края, глаз шмякается на строку ниже, стараясь не пропустить ее начало. Опирается, пошатываясь, чуть медлит и опять начинает разгон головой в твердое. Какое количество информации при этом пропадает и сколько усилий тратится на поддержание темпа чтения — кто знает.
Юрий Гордон
Преимущества
- Создаёт интересный визуальный эффект. - Хорошо работает для подписей к изображениям справа.
Недостатки
- Затрудняет чтение длинных текстов. - Может создавать ощущение неустойчивости.
Выравнивание по центру
Это как галстук-бабочка — отлично смотрится в особых случаях, но не стоит носить каждый день. Идеально для заголовков, цитат и коротких блоков текста.
В выключке по центру слова перестают читаться слева направо и начинают читаться вот так. И чем короче строка по центру, тем сильнее значение каждого слова, которое там есть. То есть выключка по центру стремится превратить текстовое сообщение в бросаемый в лицо снаряд.
У меня есть много лет назад найденная история, что все таблички наших учреждений выключены по центру и написаны прописными. Потому что это начальственный окрик. Сверху вниз.
Точно так же, как на плакатах на демонстрации, если кто-то против чего-то протестует, он тоже пишет заглавными. Потому что это тоже… Эй, начальник! Ты нас видишь? Снизу вверх, но тоже крик. А демократия в этой стране настанет в тот день, когда первое министерство наберет себя с выключкой влево с заглавной буквы строчными.
Юрий Гордон
Преимущества
- Создаёт формальный, элегантный вид. - Неплохо работает для коротких текстов.
Недостатки
- Затрудняет чтение длинных текстов. - Может создавать «рваные» края с обеих сторон.
Выравнивание по ширине (юстификация)
Оно как утягивающее бельё для вашего текста — выглядит гладко и аккуратно, но может вызвать проблемы с «дыханием». Создаёт ровные края с обеих сторон, но может привести к неестественным пробелам между словами.
Правый край расключенного текста служит читателю, как стенка бассейна пловцу: дошел до края, оттолкнулся, и к началу следующей строки… Скорее всего, поэтому расключенный текст легче читается в длинных строках и большими объемами.
При левой выключке строка как бы слегка струится. Расключенная строка натянута, как струна, за оба конца…
Строки расключенного текста читаются намного стремительней, чем при любой другой выключке. Глаз легче разгоняется вдоль строки, зная, где она обрежется краем набора. В конце строки не происходит торможения, как при левой выключке — глаз отскакивает на следующую строку, как шарик от стенки.
Зато, в отличие от выключенной влево строки, расключенная не имеет вектора движения. Строка ведет себя как рельс: буквы стоят, глаз катится.
Выключка влево — живой текст, а расключенный набор есть текст вымуштрованный. Он не словесен или строчковат — скорее, он абзацен. Единица ритма расключенного текста не строка, а абзац. Абзацный отступ здесь — важнейший элемент распознавания. Именно абзац служит мерой дыхания.
Юрий Гордон
Преимущества
- Создаёт чистый, организованный вид. - Хорошо работает в многоколоночных макетах.
Недостатки
- Может создавать «реки» из пробелов. - Требует тщательной настройки переносов.
Правило близости в типографике
Это один из так называемых гештальт-принципов, о которых подробно рассказывается в этой нашей лекции: элементы, расположенные в непосредственной близости друг от друга, воспринимаются как более тесно связанные, нежели те, которые разделены значительным расстоянием.
В приложении к типографике можно пользоваться другой его формулировкой, авторство которой принадлежит Артёму Горбунову: «Типографический объект любого уровня состоит из других объектов: буквы из штрихов, слова из букв, строки из слов, абзацы из строк. И для того чтобы объект имел самостоятельное значение, то есть буква, слово, строка и абзац отделялись от соседних, его внутренние расстояния должны быть меньше внешних».
Группировка связанных элементов
Располагайте связанные элементы ближе друг к другу. Рассаживая гостей за свадебным столом, вы же не посадите невесту и жениха в разных концах зала, верно?
Иерархия информации
Используйте близость для создания явной иерархии. Заголовок должен быть ближе к своему параграфу, чем к предыдущему разделу.
Согласованность в расстояниях
Будьте последовательны в использовании отступов. Если вы решили, что между параграфами будет 92pt, придерживайтесь этого. Согласованность создаёт гармонию.
Близость ≠ скученность
Помните, что близость не означает отсутствие пространства. Элементы должны «дышать».
Контраст в расстояниях
Используйте разные расстояния для создания контраста между группами. Больше пространства между несвязанными элементами, меньше — между связанными.
Адаптивность
Помните, что правило близости должно работать на всех устройствах. То, что выглядит прекрасно на десктопе, может превратиться в хаос на мобильном.
Оформление абзацев
Буквица
Это как маяк, горящий во мгле — эффектно и привлекает внимание.
Как применять:
- Увеличьте и выделите первую букву абзаца (и, возможно, ещё несколько слов). - Используйте для начала важных разделов или глав.
Почему это работает:
- Создаёт сильный визуальный акцент. - Добавляет привкус традиционной типографики в ваш веб-дизайн.
Маркированные списки
Иногда вашим абзацам нужно немного дополнительной структуры и порядка.
- Используйте маркеры для выделения ключевых пунктов. - Экспериментируйте с различными стилями маркеров (кружки, квадраты, кастомные иконки).
Почему это работает?
- Разбивает длинный текст на удобные для восприятия части. - Помогает читателям быстро сканировать текст взглядом.
Правила выделения текста
Выделение текста подобно специям в кулинарии — правильное количество может превратить простое блюдо в кулинарный шедевр, но добавьте их слишком много — и вы рискуете всё испортить.
Полужирное начертание (Bold)
Оно кричит: «Эй, посмотри на меня! Я имею особое значение!»
Когда использовать: - Для ключевых слов и фраз. - В заголовках и подзаголовках. - Для выделения важной информации в списках. Почему это работает: - Создаёт сильный контраст с обычным текстом. - Легко заметить при быстром сканировании страницы.
Курсив (Italic)
Курсив шепчет, многозначительно подмигивая: «Псст, парень, обрати на меня внимание, у меня есть секрет».
Когда использовать:
- Для выделения цитат. - Для названий книг, фильмов, произведений искусства. - Для введения новых терминов. - Для создания тонкого акцента.
Почему это работает:
- Добавляет визуальное разнообразие без резкого контраста. - Придаёт тексту элегантность и утончённость.
Подчёркивание (Underline)
В веб-дизайне это знак «Здесь можно кликнуть!» (нет, здесь нельзя — О. П.). Используйте его с осторожностью.
Когда использовать:
- Преимущественно для ссылок. - В редких случаях — для сильного акцента, когда другие методы уже использованы.
Почему нужно быть осторожным:
- Может ухудшить читабельность текста. - Часто ассоциируется со ссылками, может вызвать путаницу.
Цвет
Цвет (как и выделение другой гарнитурой или начертанием) — это интонация. Он может привлечь внимание, создать настроение или установить иерархию.
Когда использовать:
- Для выделения ключевых элементов. - Для создания визуальной иерархии. - Для акцентирования ссылок.
Почему это работает:
- Цвет быстро привлекает внимание. - Может передавать эмоции и ассоциации.
Изменение размера
Увеличенный текст словно говорит: «Смотри, я ближе к тебе и важнее для тебя, чем остальной текст».
Когда использовать:
- Для создания иерархии в заголовках. - Для выделения ключевых цитат или фактов. - Для создания контраста в дизайне.
Почему это работает:
- Естественно привлекает внимание к большему тексту. - Помогает структурировать информацию.
Прописные
Римское капитальное письмо
Прописные буквы — типографские стимуляторы, которые могут как придать вашему тексту имперскую величественность, так и превратить его в крикливого уличного зазывалу.
Эрик Булатов. Всё не так страшно
Когда использовать прописные буквы:
- Акронимы и аббревиатуры. NASA, UNESCO, ШД НИУ ВШЭ — здесь прописные уместны и ожидаемы. - Логотипы и бренды: NIKE, IKEA, LEGO — многие бренды используют прописные для создания визуальной идентичности. - Короткие заголовки и подзаголовки. - Для создания визуального контраста. Небольшие вкрапления текста прописными буквами могут создать интересный визуальный ритм.
Почему нужно быть осторожным с прописными
- Потеря формы слова. Мы распознаём слова не по буквам, а по их общей форме. Прописные буквы лишают слова их уникальных «силуэтов».
- Потеря иерархии. Если всё выделено, то ничего не выделено. Использование прописных для всего текста — это как пытаться сделать всех в армии генералами. Кто тогда будет выполнять приказы?
- Эмоциональное восприятие. ТЕКСТ В ПРОПИСНЫХ ЧАСТО ВОСПРИНИМАЕТСЯ КАК КРИК!!! Разговаривать с кем-то, кто постоянно повышает голос — утомительно и страшновато.
Межбуквенное расстояние
Прописные буквы часто требуют увеличения межбуквенного расстояния (трекинга).
Текст, набранный прописными буквами без должной разрядки, читается медленнее на 13–18%. Причина кроется в самой природе дизайна шрифтов.
Шрифты разрабатываются с учетом традиционного использования — заглавная буква в начале и строчные далее. Межбуквенные интервалы (апроши) прописных букв изначально рассчитаны на соседство со строчными, а не с другими прописными. Это обеспечивает визуальную гармонию в обычном тексте, но создает проблемы при наборе текста только заглавными буквами.
Когда текст набран исключительно прописными, эти уменьшенные апроши приводят к визуальному слиянию букв. Глазу требуется больше времени и усилий, чтобы различить отдельные символы и слова.
Решением этой проблемы служит увеличение межбуквенного интервала, или разрядка. Это не излишество, а необходимость для восстановления правильных пропорций между буквами. Разрядка возвращает тексту удобочитаемость, позволяя каждой букве «дышать».
Более того, разрядка придает словам уникальный визуальный ритм. Вместо прямой линии текст приобретает характерный зубчатый силуэт. Эта особенность облегчает распознавание слов, позволяя читателю быстрее схватывать смысл.
Но имейте в виду: когда буквы стоят слишком далеко друг от друга, пользователю сложно собрать их в единое слово — особенно для узких начертаний, в которых мал внутрибуквенный просвет.
Капитель
Элегантный компромисс между прописными и строчными — буквы, имеющие пропорции строчных, но структуру прописных. Используйте их для аббревиатур в тексте или для создания тонкого акцента. Настоятельно рекомендуем при этом использовать такие шрифтовые гарнитуры, в которых есть настоящее капительное начертание: искусственная (созданная средствами графического редактора) капитель выглядит хуже.
Типографика и пунктуация
Тире и дефисы
- Дефис (-) — это короткая чёрточка, используемая для соединения частей слова. Пример: чёрно-белое. - Среднее тире (—) используется для обозначения диапазонов. Пример: 1346–1353 гг.. - Длинное тире (—) это знак пунктуации. Пример: Чёрное — это белое.
Кавычки
- «Ёлочки» — стандарт для русского языка. Элегантны и традиционны, как маленькое чёрное платье в мире пунктуации. - «Русские „лапки“» (9966) используются для закавычивание внутри закавыченного текста.
Пробелы
- Неразрывные пробелы используется между словами, которые нельзя разрывать при переносе строки. Например, между инициалами и фамилией. Кроме того, неразрывные пробелы ставят после коротких (одно- и двухбуквенных) слов, таких как союзы, частицы и предлоги, — чтобы они не висели в конце строки. - Перед знаками препинания в русском языке (кроме тире) пробел не ставится.
Многоточие (…)
- Используйте специальный символ многоточия (…), а не три отдельные точки (…). - Не ставьте пробел перед многоточием, но ставьте после.
Ёё
Буква «ё» присутствует более чем в 12 000 слов, начинает около 150 слов и завершает примерно 300. Более 2000 россиян и жителей постсоветского пространства носят фамилии с этой буквой. «Ё» также встречается в многочисленных географических названиях и иностранных именах. Будучи самой молодой буквой русского алфавита, «ё» отражает фонетическое изменение, произошедшее в XII–XIII веках на севере Руси и веком позже на юге. Это изменение заключалось в переходе ударного звука [э] в [о] между мягким и твёрдым согласными. Примечательно, что церковнославянский язык остался невосприимчив к этому изменению, что долгое время придавало «ёканью» оттенок просторечия.
Вопреки распространённому мнению, княгиня Екатерина Дашкова не является создательницей буквы «ё». Эта легенда, популяризированная в начале XXI века, не находит подтверждения в исторических документах. Согласно исследованиям, Дашкова предлагала ввести диграф «io», но эта идея не получила поддержки в Академии наук.
Первое документированное использование «ё» принадлежит Николаю Карамзину в 1797 году. В сборнике «Аониды» он применил эту букву для рифмы «слёзы-розы», объяснив в примечании её значение.
История официального статуса «ё» полна поворотов. После революции 1917 года её использование стало «желательным, но необязательным». В 1942 году, по легенде, из-за личного вмешательства Сталина, буква приобрела обязательный статус. Однако в 1956 году новые правила орфографии вновь сделали её употребление факультативным, за исключением случаев возможного неправильного прочтения или в специализированных изданиях.
Дебаты о необходимости «ё» продолжаются с момента её появления. Сторонники буквы, называющие себя «ёфикаторами», активно отстаивают её права, в то время как противники считают её излишней. Лингвистическое сообщество пока не пришло к единому мнению по этому вопросу. Несмотря на продолжающиеся споры, «ё» обрела культурное значение, выходящее за рамки лингвистики. В её честь установлены памятники и даже храмы, что свидетельствует о особом месте этой буквы в русской культуре и языковом сознании.
Памятник букве «ё» в Ульяновске (копия литеры, напечатанной в «Аонидах»)
Обязательное использование
- В именах собственных. Правильно: Пётр, Артём, Алёна. Неправильно: Петр, Артем, Алена. - В случаях, когда замена на «е» искажает смысл: Все/всё, небо/нёбо, с_овершенный/совершённый_.
Рекомендуемое использование
- В учебной литературе. Особенно важно для начальной школы и изучающих русский как иностранный. - В детской литературе. Потому что дети, как и буква «ё», заслуживают особого внимания.
Культурный контекст
- В официальных документах использование «ё» обязательно. Это как галстук на официальном приёме — без него вас могут не пустить. - В рекламе и брендинге можно экспериментировать, но помните о читабельности.
Консистентность
Следите за консистентностью. Если вы решили использовать «ё», используйте её везде в тексте.
Heävy Mëtal Umlaüt
Буква «ё» имеет неожиданного рок-н-ролльного родственника в латинице — это знаменитый heavy metal umlaut. Представьте себе: 1975 год, Лондон. Группа Motörhead только что придумала своё название, и кто-то (история умалчивает, кто именно) предложил добавить умлаут над «о» — не по каким-то лингвистическим соображениям, а просто потому что это выглядело «круто и злобно».
Этот тренд подхватили и другие группы: Mötley Crüe, Blue Öyster Cult, Queensrÿche, Mütiilation. Умлаут стал своего рода типографическим эквивалентом электрогитары — он добавлял «тяжести» и «металличности» любому слову.
В большинстве случаев эти умлауты были чисто декоративными и не влияли на произношение. Это как если бы наша «ё» вдруг начала появляться в словах «хёви мётал», просто чтобы выглядеть круче.
