Контент-маркетинг
Мария Сердечная
0
7.8K

Делаем красивые лендинги, картинки, баннеры и рассылки. Базовые правила верстки и типографики для авторов, редакторов и SMM-специалистов

Делать классные изображения может каждый, и для этого необязательно быть дизайнером. Авторы, контент-менеджеры, email-маркетологи и SMM-специалисты часто сами оформляют лендинги, картинки для социальных сетей и письма для рассылок. Мария Сердечная, Senior SMM-дизайнер маркетингового агентства Demis Group, рассказала в Pressfeed.Журнале о простых правилах дизайна для непрофессионалов. Они помогут постичь искусство верстки текста и сделать ваш визуал по-настоящему крутым. 

верстка текста

Иллюстрация Nata Blackthorn

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

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

Шаг №1. Прежде чем приступить к дизайну, проанализируйте текст. Определите его структуру и смысловые блоки. Это поможет организовать информацию логично и последовательно.

Шаг №2. Подумайте о том, как ваш текст будет восприниматься. Какие визуальные элементы помогут выделить ключевые сообщения? Используйте заголовки, подзаголовки и выделения, чтобы сразу же привлечь внимание к важным словам и фразам. 

Шаг №3. Прочитайте текст с точки зрения дизайна: какие акценты нужно расставить, как распределить информацию по визуальным блокам. Даже если вы не являетесь дизайнером, важно понимать, как он будет выглядеть в макете.

Шаг №4. Убедитесь, что текст легко читается. Используйте подходящие шрифты, размеры и цвета, чтобы сделать его более доступным. Разбивайте текст на абзацы и используйте списки, улучшая его восприятие. Применяйте жирный шрифт, курсив или цветовые акценты, чтобы привлечь внимание к важным элементам.

Скачать PDF-инструкцию «Где и как публиковать широкоохватные статьи бесплатно»

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

дизайн текста

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

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

типографика

Сравните два примера верстки лендинга ниже. Вариант справа переделан с учетом правил верстки — текст и визуал распределены более гармонично и легче читаются. 

правила типографики
Пример с сайта «ЖК Сказка шале»

Верстка текста состоит из нескольких задач:

  • выявление текстовых фрагментов и их размеров. Нужно четко понимать, какие части текста вы используете и какой они величины;
  • структура и иерархия текстов. Организуйте текст так, чтобы читателю было легко воспринимать информацию. Это касается в первую очередь заголовков, подзаголовков и абзацев;
  • настройка выравнивания (выключки) текста. Это процесс, когда вы корректируете текст, чтобы он хорошо вписывался в отведенное пространство, не теряя при этом смысла;
  • проработка переносов слов и «висячих» предлогов. Нужно следить за тем, чтобы переносы слов были правильными, а также избегать ситуаций, когда предлоги остаются на новой строке без других слов;
  • настройка интерлиньяжа (расстояния между строками), трекинга (расстояния между буквами) и кернинга (расстояния между конкретными буквами). Все это влияет на удобочитаемость текста;
  • соблюдение размеров различных шрифтов. Используйте шрифты разных размеров в зависимости от их роли в тексте, чтобы выделить ключевые моменты;
  • правильная расстановка знаков препинания.

А теперь поговорим о каждом пункте подробнее.

Настраиваем размер текста при верстке

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

  • вокруг текста было оптимальное количество свободного пространства;
  • величина текстового блока равнялась размеру текста.
как сверстать картинку

Выстраиваем структуру и иерархию текста

Далее нужно разбить текст на смысловые фрагменты: 

  • заголовок и подзаголовки, 
  • главный текст, 
  • основные акценты, 
  • подписи или заметки. 

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

Размеры подзаголовков, заголовков и других частей текста должны оставаться последовательными во всех макетах в рамках одного проекта

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

Чтобы получить бесплатное упоминание в СМИ, отвечайте на запросы по вашей теме. Полный список смотрите на Pressfeed
Показать еще
правила дизайна лендингов

Выравниваем текст

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

Вот несколько примеров выравнивания заголовков (по краю, по центру и по ширине поля).

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

Когда целесообразно использовать выравнивание по правому краю:

  • текстовый блок небольшой, не более 4 коротких строк;
  • строки одинаковой длины — чтобы край слева не выглядел слишком «рваным»;
  • нужно разнообразить макет. Например, если на изображении есть свободное место справа, то можно смело размещать на нем текст.

Выровнять текст по центру картинки стоит, когда:

  • текстовый фрагмент небольшой;
  • в одном абзаце от 5 до 7 коротких строк;
  • длина строк везде примерно одинаковая, края не выглядят «рваными». 

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

А есть еще пугающий для многих вариант — выравнивание по ширине поля. Такой подход удобен для периодических изданий, но имеет существенный недостаток. Большие интервалы между словами создают визуальные пробелы, затрудняющие чтение и нарушающие смысловую связь.

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

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

Выбирая выравнивание текста, опирайтесь на окружающий контент и свободные места в макете:

  • незанятая область слева — выравнивание по левому краю;
  • пустое место справа — используйте выравнивание по правому краю;
  • текст просится в центральную часть — применяйте выравнивание по центру.

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

Убираем висячие предлоги и переносы слов

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

«Мелочь, а 

расстраивает»

«Мелочь, а расстраивает»

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

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

правила расположения текста

Настраиваем интервалы между строками и буквами

Такие параметры, как интерлиньяж, трекинг и кернинг влияют на отступы между элементами, что, в свою очередь, определяет группировку и восприятие текста.

Интерлиньяж

Интерлиньяж — это межстрочное расстояние. Я рекомендую задавать его в процентах от размера шрифта. Это позволит автоматически подстраивать интервал под разную величину текста.

Для заголовков оптимальное значение интерлиньяжа — от 90% до 120%. Для основного текстового блока — от 120% до 150%. Точная цифра зависит от шрифта. Следите, чтобы строки не сливались и не были слишком разреженными.

интерлияж в тексте

Трекинг

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

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

трекинг в тексте

Кернинг

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

Кернинг помогает устранить визуальные пробелы между буквами, делая текст однородным. Обращайте на это внимание при составлении коротких акцентированных заголовков и логотипов. На скриншоте видно, что между Ю и Т большое расстояние. Поэтому нужно уменьшить интервал в этой паре букв.

кернинг в тексте

Выбираем размер шрифта и начертания

Эффективный контраст в дизайне достигается с использованием кратных величин — это оптимальный подход.

Заголовок делайте в 2-3 раза больше основного текста. Если размер заголовка окажется меньше, контраст будет неявным, а если больше — это приведет к чрезмерной выразительности. Рекомендуется использовать кратные значения, такие как 2 или 5. Например, если мы берем какую-то величину, например, размер шрифта 30, то остальные лучше делать кратно 10 соответственно (30, 40, 50). Если берем 35, то можно делать 45, 35, 55. Число может быть меньше или больше, но кратно одинаковому значению. Главное, чтобы это была одна цифра для одного макета.

Неудачный выбор размера шрифта: заголовок — 61 pt, основной текст — 43 pt, подписи — 28 pt. В этом случае отсутствует логическая связь между размерами.

Правильный размер шрифта: заголовок — 60 pt, основной текст — 42 pt, подписи — 26 pt. Здесь размеры более гармоничны и соподчинены друг другу.

как выбрать шрифт

Создаем контраст начертаний

Важно избегать как слишком слабого контраста, так и его чрезмерной выразительности. Оптимальный выбор начертаний — использовать их через один, особенно если шрифт предлагает множество вариантов. То есть должна быть выстроена определенная градация. Так, более яркий и жирный шрифт используется в главных заголовках. Далее — по нисходящей. Но не максимально жирный или максимально тонкий, важно соблюдать гармонию.

начертание текста

Также стоит помнить о различиях в пропорциях символов у разных шрифтов. Например, размер 60 pt может выглядеть совершенно по-разному в разных гарнитурах.

Когда вы хотите выделить определенные фразы или буквы в блоке, необходимо визуально уравновесить начертания и размеры. Например, буква «А» в слове «такая» меньше, поэтому ее надо уравновесить, увеличив шрифт.

межстрочное расстояние в тексте

Проверяем пунктуацию в тексте

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

Не советую использовать точки в заголовках. Вместо этого можно применять выразительные знаки препинания (?, ! или :), чтобы эмоционально окрасить текст. Точка же не выполняет этой функции.

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

В русском языке предпочтительно применять кавычки в виде елочек « », а не лапок “ ”. Маркеры списков (цифры, точки, тире) лучше выносить за пределы текстового блока.

Что в итоге?

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

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

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

Чтобы получить бесплатное упоминание в СМИ, отвечайте на запросы по вашей теме. Полный список смотрите на Pressfeed
Показать еще
Читайте также
Сторителлинг: что это такое, основные методы, техники и 6 советов24 Телеграм-канала о нейросетях: где искать обзоры сервисов, промты для ИИ, советы и лайфхакиКак публиковать статьи в СМИ и чужих блогах бесплатно. Руководство по гостевому постингуТоп-18 материалов о том, как писать статьи в разных форматах: приемы, различные техники и шаблоны
2
Мария Сердечная
Senior SMM Designer Demis Group.

Комментарии

Хотите получить полезные подборки материалов, которые помогут вам продвигать свой бизнес в СМИ бесплатно?
Подпишитесь на нашу рассылку, и мы пришлем их вам!
Зарегистрируйтесь на Pressfeed прямо сейчас в три клика!
И получите первую публикацию в СМИ уже через неделю!
И получите доступ к 120 000 экспертов
Реклама: ООО "ПРЕССФИД", ИНН 9715219654, ОГРН: 1157746902961, erid: jN8KJ5YQ
Скачайте приложение Pressfeed, чтобы отвечать на запросы СМИ быстрее других!
Реклама: ООО "ПРЕССФИД", ИНН 9715219654, ОГРН: 1157746902961, erid: LjN8KSp4c
Войти
Регистрация
Восстановить пароль
Укажите адрес электронной почты. Обратите внимание: письмо с новым паролем может попасть в папку «Спам»
Pressfeed
Платформа для работы с медиа
Бесплатные публикации в СМИ
Узнайте, в каких СМИ вы можете опубликоваться прямо сейчас
Пройдите тест и узнайте, какие медиа в данный момент находятся в поиске материалов для публикаций и соответствуют вашей тематике
СТОП! Не уходите с
пустыми руками.
Для вас книга в подарок!
Стоп!
Не уходите
с пустыми руками
Для вас книга
в подарок
Зарегистрируйтесь бесплатно на сервисе Pressfeed и получите книгу «18 площадок для бесплатных публикаций»
Узнайте в каких крупных СМИ вы можете публиковать статьи, колонки, кейсы самостоятельно. Правила площадок, рекомендации.

Pressfeed — платформа, где журналисты ищут экспертов и материалы для публикаций. Каждый день доступно более 500 запросов из более чем 10000 российских СМИ. Получите доступ ко всем запросам бесплатно!
Добавьте ваши данные
1/2
Хотите получить полезные подборки материалов, которые помогут вам продвигать свой бизнес в СМИ бесплатно?
Подпишитесь на нашу рассылку, и мы пришлем их вам!