Хороший текст — это работа не только копирайтера. Восприятие информации во многом зависит от верстки страниц сайта. От оформления зависит и продвижение сайта, поведенческие факторы т.к. чем легче и приятнее читается материал, тем больше времени пользователь проведет на вашей странице. Люди не читают тексты? Читают, только когда они полезны и удобно сверстаны.
Рецепт хорошего веб-текста прост — это качественный уникальный контент и правильная верстка. Многие считают, что красивый дизайн — это необычные шрифты, много цвета и анимация, забывая при этом про элементарные правила типографики. Мы подготовили для вас 10 заповедей, которые спасут ваш сайт от нечитабельных текстов.
1. Размер шрифта — это очень важный момент, от которого напрямую зависит читабельность текста. Наиболее удобный для чтения кегль — 12-14 пунктов.
2. Больше воздуха! Полотна текста — зло, никто не хочет читать «многа букафф». Междустрочные интервалы и абзацные отступы вам в помощь. Тексту нужно «дышать», тогда его читать намного удобнее. Для этого можно использовать универсальное свойство CSS margin
, оно определяет отступы со всех сторон абзаца или margin-top
для отступа сверху и margin-bottom
для отступа снизу. Нумерация и маркированные списки также разбивают текст и делают его более приятным для чтения.
3. Выделяйте важный текст правильно, чтобы он привлекал внимание, а не утомлял глаза. Не злоупотребляйте подчеркиванием и курсивом, не используйте много разных цветов, не играйте шрифтами. Чтобы выделить важную часть текста лучше увеличить кегль на пару пунктов и сделать полужирное начертание.
4. Грамотно используйте иллюстрации. Изображения должны соответствовать тексту на сайте, дополнять его, раскрывать смысл, а не мешать восприятию. Поэтому правильная подборка иллюстраций не менее важна, чем хорошо написанный текст.
5. Стоковые изображения — это плохо. Не потому, что они плохого качества, ведь можно найти красивые и профессиональные снимки, а потому, что они используются в каждой второй статье. Лучше потратить немного больше времени и сделать с помощью несложных инструментов свои иллюстрации к тексту, чем взять первую попавшуюся в фотобанке. Но если у вас действительно нет времени заморачиваться с картинками, то ставьте хотя бы ссылку на первоисточник. Закон об авторском праве еще никто не отменял.
6. Заголовок — лицо вашего материала. Даже если вы написали крутой текст для email-рассылки, оригинальное описание товара или уникальную статью в блог, никто этого не оценит, пока вы не привлечете внимание ярким, цепляющим заголовком. Не обязательно писать его другим шрифтом, достаточно увеличить кегль на пару пунктов и выделить полужирным. Еще лучше заголовки и подзаголовки отделять отступами от основного текста.
7. Знаки препинания — это интонация текста. Правильные акценты и логические ударения очень важны для восприятия информации. Кроме основных правил пунктуации нужно запомнить еще одно: в конце заголовков не ставится точка, только восклицательный и вопросительный знак, а также многоточие. В маркированных и нумерованных списках в конце каждого пункта ставится точка с запятой, и только в конце последнего предложения — точка. Кроме того, все знаки препинания в тексте должны быть единообразны — кавычки, длинные тире, дефисы и т.д. Чтобы облегчить себе работу, воспользуйтесь Типографом от студии Артемия Лебедева.
8. Размеры строк имеют значение. Широкие полотна текста очень неудобно читать, а узкие колонки хорошо смотрятся разве что на мобильных устройствах. Поэтому лучше всего придерживаться золотой середины, оптимальная длина строки — 55-75 символов.
9. Цветовое оформление шрифтов должно гармонично сочетаться с фоном, текст должен хорошо читаться на контрасте с подложкой. Но лучше не использовать так называемую вывортку (белые буквы на черном фоне). От такого сочетания быстро устают глаза и читать практически невозможно.
10. Неразрывный пробел (ctrl + shift + пробел в редакторе или
в HTML) — очень полезная штука, которую обязательно нужно использовать между инициалами и фамилией, датами, номерами телефонов и другой контактной информацией, чтобы избежать неправильных переносов с одной строки на другую. Удивительно, что многие копирайтеры и верстальщики не знают о такой простой вещи. Также в номерах телефонов дефисы лучше заменять пробелами — так легче воспринимать информацию. Не забывайте использовать семантические тэги <h1>
, <h2>
, <figure>
, <cite>
, <blockquote>
, <aside>
и т. д., с помощью которых вы можете сделать страницы сайтов более понятными для поисковых систем и браузеров.
Оформление веб-текстов может помочь вам в продвижении сайта, а может отпугнуть потенциальных клиентов. Поэтому нужно подходить к этому вопросу очень серьезно. Текст должен выглядеть оригинально и привлекательно, но в то же время все дополнительные элементы должны работать на удобочитаемость и легкое восприятие текста.
Автор: Ирина Передрий, менеджер проектов ZIEX.BY