Дизайн текста: Оформляем текст так, чтобы его прочитали

Содержание

Оформляем текст так, чтобы его прочитали — Дизайн на vc.ru

Роман Худоногов, сооснователь и директор продукта в Setka Editor, поделился гайдом по оформлению текста. Из статьи вы узнаете, как сделать так, чтобы ваши тексты читали дольше 15 секунд.

28 099 просмотров

Роман Худоногов на конференции ContentSense «Как контент решает задачи бизнеса»

Роман разобрал:

Типографику.
Структуру текста.
Подбор иллюстраций.
Верстку страниц.

В России 20 млн человек ежемесячно сталкиваются с проблемами чтения с экранов — это очень много, столько же живет в Москве и Московской области. Эти 20 млн каждую неделю посещают один сайт — «Википедию».

В статье на «Википедии» сказано, что длина строки может напрямую влиять на скорость чтения. Если строка слишком длинная, приходится долго возвращаться к началу следующей строки, если же короткая, глаза устают постоянно «скользить» по тексту.

Удобно читать, когда в строку помещается от 35 до 95 символов. Первая строка в статье, если открыть на 15-дюймовом мониторе, вмещает в себя 205 символов.

«Википедия» нарушает основополагающие принципы типографики

Хорошая новость: вы, в отличие от «Википедии», можете влиять на дизайн своего продукта. Чтобы избежать большинства проблем, нужно придерживаться правила: «Сделай работу за своего читателя». Давайте разберемся, как именно вашу статью будут читать и с какими проблемами могут столкнуться.

Типографика

В строку должно помещаться 35−95 символов, как мы уже знаем из «Википедии». Количество символов и размер шрифта определяют максимальную ширину строки. Удобный для чтения с экрана шрифт (кегль) — 18–19 пикселей.

Межстрочное расстояние (интерлиньяж) должно быть таким, чтобы глазу было понятно, куда «перепрыгивать». Интерлиньяж соотносится с кеглем в пропорции 3 к 1, то есть если у вас кегль 20, то межстрочное расстояние — 26.

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

Еще стоит учитывать количество строк в абзаце. Идеально — пять строк.

Если абзац слишком большой, читатель устает. Конечно, есть технические блоги, аналитические статьи, где в пять строк не уложиться, но лучше учитывать размер абзаца. Если абзацы слишком дробные (как в примере справа на картинке), читателю непонятно, о чем вы рассказываете.

Шрифт должен быть контрастен к фону — иначе читать неудобно. Коэффициент контрастности рассчитывается исходя из разницы в яркости (интенсивности излучаемого света) между двумя смежными цветами на экране. Диапазон значений — от 1 до 21 (обычно указывается как 1:1 – 21:1). Чем больше значение, тем выше контраст. Существует множество инструментов для вычисления коэффициента контрастности двух смежных цветов, например этот калькулятор.

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

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

Хорошо, если подзаголовки отличаются от заголовков по начертанию и размеру: так понятнее, где вложенный кусочек, а где — основная часть.

Структура текста

Исследователи из Nielsen Norman Group заявляют, что 8 из 10 человек быстро пролистывают материал и прочитывают в нем только 28% слов. Это называется скимминг: например, я достаю телефон и проскроливаю страницу, чтобы понять, стоит ее читать или нет.

Поэтому структура текста должна быть понятной, а в самом тексте должны быть расставлены акценты. Если человек прочитал не всю статью, но нашел в ней ответ на свой вопрос, — это означает, что вы хорошо сделали свою работу. Доскроллы — это важно, но не нужно на них зацикливаться.

Статья о Бали на сайте Here Magazine разбита на понятные главы: где остановиться, где поесть, как долететь. Если человек ни разу не был на Бали, он захочет прочитать статью полностью. Если был и собирается снова, его может заинтересовать конкретный раздел — например, где остановиться.

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

Статья большая, но комментарий выделен, потому что это эксперт со специализацией и фото. Такой комментарий вызывает доверие, и тут в самый раз кнопка с call-to-action.

Если у вас большая статья, сделайте содержание, чтобы читатель мог сам выбрать интересный раздел.

Аналогичный прием — дать заключение с выжимкой поста. У The Bell классно выстроен мостик от выводов к форме сбора имейлов.

Иллюстрации

Люди рассматривают картинки на 10% дольше, чем читают текст. Четыреста тысяч лет назад мы были охотниками-собирателями, поэтому наш мозг хорошо обрабатывает графическую информацию, а чтение — недавнее изобретение. При этом огромное количество важных идей и задач одними картинками не выразить, поэтому нам приходится рассказывать их с помощью текста.

Большие обложки привлекают внимание. Бывает так, что вы открываете сразу много вкладок? Я постоянно так делаю: читаю что-то новое, потом перехожу по ссылке в статье, а потом вспоминаю, что хотел прочитать недавнюю статью об Uber. Я быстрее найду эту статью, если при переключении между вкладками увижу большую обложку с заголовком.

Вас запоминают благодаря фирменным иллюстрациям. Если вы издаете бренд-медиа, ваша задача не только донести что-то до читателя, но и построить четкую ассоциацию, что полезной информацией поделились именно вы.

Сможете вспомнить, статьи из каких изданий вы прочитали на этой неделе? Если да, то эти издания проделали большую работу по брендингу. Один из способов помочь читателю вас запомнить — использовать единый стиль иллюстраций. Использование цветов и брендовых элементов увеличивает запоминаемость бренда на 80%.

DigitalOcean — облачная платформа, которая помогает быстро запустить блог или наладить инфраструктуру. Они публикуют хелпы и гайды, пишут статьи о том, как поднять MySQL или пропатчить KDE. Статьи для них — один из основных каналов привлечения. Придумывать иллюстрацию для каждого материала сложно, поэтому они выбрали абстрактный стиль.

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

Фотография — то же самое, что иллюстрация. В журнале For hims все фотографии сделаны на оливковом фоне, герои всегда в футболках одного цвета. Стиль узнаваемый — в голове выстраивается мостик.

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

Полотна текста читать не интересно. Статьи с визуальными элементами, вставленными через каждые 75−100 слов, получают вдвое больше лайков и шеров. Если в статье много картинок, ее легче читать. Картинки во всю ширину подойдут, если вы рассказываете о путешествиях или машинах. Где не обойтись одним текстом — поставьте большую картинку.

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

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

Иллюстрация списков. Список из 10 пунктов приятнее рассматривать, если есть визуальные якоря. Глаз быстрее зацепится за иллюстрацию, чем за текст: “Use tools in tandem” — две милые курочки.

Карточки. Если вы пишете гайд «Как приготовить салат “Цезарь”», вам не обойтись без разделов о посуде и продуктах. Эта статья будет длинной пошаговой инструкцией: «Возьмите курицу, порежьте салат». Используйте текст в карточке: его проще найти на странице, запомнить содержание и пойти готовить.

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

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

Call-to-action в сайдбаре помогает решить performance-задачи. Например, если вам нужно, чтобы читатель, который зашел на статью, скачал PDF-книгу. Так вы получите его email.

Цифры и факты в сайдбаре. Например, только 1% жителей РФ переболел острыми кишечными инфекциями. Выходит, есть с пола можно, потому что 1% — это мало. Наверно, этот факт можно поставить в текст, но там он потеряется, потому что читатели быстро скролят страницы.

Цифры и факты в основной колонке текста. Один из самых действенных приемов — это дать срез по цифрам в истории, которую вы рассказываете. Например, как это делают Inc. в статьях о конкретном бизнесе. Если раскидать эти цифры по абзацам, не факт, что кто-то их увидит. А так получается что-то вроде карточки: «Вау, эта компания похожа на мою по обороту — наверное, их советы будут полезны». Этот прием позволяет создать контекст.

Главное из этой статьи

В типографике важны:

Ширина строки.
Размер шрифта.
Межстрочное расстояние.
Расстояние между абзацами.
Количество строк в абзаце.
Контраст.

Структура текста будет понятнее, если есть:

Деление на главы.
Акцент на важном.
Содержание.
Заключение.

Чтобы иллюстрации работали на бренд, нужны:

Большие обложки.
Брендинг.
Единый стиль фотографий.
Медиаэлементы через каждые 75−100 слов.
Картинки во всю ширину экрана.

Верстка будет лучше, если показать:

Несколько фотографий в одном экране.
Ссылки на релевантные посты.
Подходящие товары.
Цифры и факты.

Посмотрите полное выступление Романа Худоногова — там еще много лайфхаков для грамотного оформления текста.

Конференция ContentSense по контенту для бизнеса — один из проектов команды ProductSense. Мы делаем расшифровки докладов с наших конференций и пишем по ним статьи.

Благодарим за подготовку статьи редактора Асю Челован.

восемь правил типографики, которые спасут любой текст — Дизайн на vc.ru

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

34 840 просмотров

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

Начнём!

Исходный текст

Я специально создал этот небольшой ужас, чтобы прогнать его по всем правилам из шпаргалки. Прошу заметить, что данный текст не несёт никакой смысловой нагрузки. Представим его манекеном для тренировок.

1\Интерлиньяж

Добавьте воздуха тексту. Интерлиньяж (межстрочное расстояние) текста должен быть равен примерно 100–110% от размера шрифта для заголовков и 120–140% для обычного текста. Если размер заголовка 60 pt, то интерлиньяж должен быть равен примерно 66 pt. Это правило не строгое, потому что многое зависит от размера шрифта, его гарнитуры, ширины колонки и т.д.

Иногда для заголовков приходится делать интерлиньяж даже меньше кегля шрифта.

2\Тире и дефис

Соблюдайте правила русского языка, правильно расставляйте запятые, отличайте тире от дефиса. Тире на клавиатуре (Windows)— Alt + 0151.

3\Висячие предлоги

Если предлог стоит в конце строки, он называется «висячий». Если визуально кажется, будто он небрежно «торчит» из строки, то переносите его на следующую, а тире наоборот переносить не нужно.

4\Кавычки-ёлочки

Используйте кавычки «ёлочки» вместо кавычек „лапок”. Лапки используйте только внутри ёлочек, если нужны кавычки внутри кавычек.

Пример: «… „…”… »

5\Висячая пунктуация

Знаки, как скобки и кавычки с левой стороны выносите за линию текста. Если текст выровнен и справа, то справа также выноси запятые, точки, кавычки, скобки. Тире и дефисы в таком случае переносятся на треть или наполовину.

На самом деле это правило спорное, и я больше склоняюсь к тому, чтобы пользоваться им крайне редко и не во всех случаях. Подробнее об этом у Игоря Штанга.

Неверный пример

Скорее всего, это не должно выглядеть так, как выше. Более правильным кажется не полное вынесение пунктуацию за линию, а частичное: на четверть или на треть.

6\Буква «ё»

Никогда не игнорируйте буквы «ё» и «й». Они имеют равно те же права на существование, что и остальные буквы.

7\Оишбки

Всегда проверяйте макет на ошибки, удаляйте двойные пробелы.

8\Кернинг

Пользуйтесь кернингом, чтобы поправить расстояние между символами там, где это выглядит неровно. Для проверки: площадь пространства между символами должна быть одинаковой.

Финал

Спасибо за прочтение, но и вы выразите благодарность:)

Чтобы выразить её, перейдите и подпишитесь на мои соцсети.

Мои блоги в ВКонтакте и на Facebook о дизайне;
Моё портфолио;
Статьи для недизайнеров и владельцев бизнеса.