Выравнивание правого края
Текст с ровным правым краем выглядит хорошо. Но выровнять его непросто. Слова имеют разную длину, поэтому сделать правый край ровным можно либо вручную с помощью переносов, либо автоматически, выровняв его по ширине. Ни один из этих способов не подойдет для верстки веб-страницы.
Проблема ручного выравнивания в размере мониторов: на разных устройствах текст будет отображаться по-разному, и все переносы «поедут». Выравнивание текста по ширине тоже не решает проблему. Этот способ выравнивает правый край за счет разной длины пробелов между словами. В итоге текст выглядит уродливо, усложняет чтение и выдает некачественную верстку.
В блоге медиахаба «Rockin'Robin» делают правый край текста ровным с помощью автоматического выравнивания по ширине. Из-за этого между словами образуются дыры:
![Выравнивание по ширине Выравнивание по ширине](/upload/medialibrary/b67/urlwzu1i0ie4u707ftxeq0aby7mb67h6/1.webp)
Если отключить выравнивание по ширине, то пробелы между словами будут одинаковыми, и станет заметно лучше:
![Выравнивание по левому краю Выравнивание по левому краю](/upload/medialibrary/8e8/9xh3pf8dp69oumuxszpxa4bdgz102ohd/14_12_16_texterra_2.webp)
Совет: Выравнивайте текст по левому краю. Рваный правый край выглядит лучше, чем разная длина пробелов между словами.
Цвет текста не контрастен к фону
Чем меньше соотношение цвета текста и фона, тем сложнее его читать. Если мы напишем белым цветом на белом фоне, то соотношение цветов будет 1:1. Такой текст невозможно прочитать. Светло-серый текст на белом фоне будет иметь соотношение 1:6.
![А вы видите надпись? А вы видите надпись?](/upload/medialibrary/07c/0qzdpnkrjmvrdbn06b5jmeztgi6qadrx/14_12_16_texterra_3.webp)
Текст различим, но читабельность все еще низкая. Чтобы текст хорошо читался, соотношение цветов должно быть 5:1 или больше.
![Такой текст читать легче Такой текст читать легче](/upload/medialibrary/2d2/sl81dka4n5ehrtpokmdm1mo6v2kwpabq/14_12_16_texterra_4.webp)
Чтобы прочитать эти четыре слова, напрягаться не нужно. Но если в таком же соотношении набрать целую статью, читабельность ухудшится:
![Контрастность все равно недостаточная Контрастность все равно недостаточная](/upload/medialibrary/b00/mj3zphcyw1is4tays6mwic8n42wv8gls/14_12_16_texterra_5.webp)
Поэтому для статей нужно выбирать более контрастный цвет шрифта. Проверить соотношение контрастности цвета шрифта и фона можно с помощью специального инструмента. Самая большая контрастность между черным и белым. Поэтому черный текст на белом фоне — самый читабельный.
![Контрастный текст Контрастный текст](/upload/medialibrary/160/4xjdzufa3tp2mp7zk2f7v4cp0wm841i0/14_12_16_texterra_6.webp)
Совет: Пишите черным по белому.
Незаметный подзаголовок
Подзаголовки — это один из способов привлечь внимание читателя. Когда человек открывает статью, первым делом он сканирует текст и только потом принимает решение: читать его или нет. При сканировании взгляд читателя цепляется за подзаголовки, иллюстрации, врезки. Если подзаголовок оформлен плохо, то при сканировании читатель не зацепится за него, не поймет о чем статья и уйдет. Поэтому подзаголовки должны быть заметные. Выделить подзаголовок можно жирным стилем, увеличенным кеглем и цветом.
В блоге «Madcats» подзаголовки выделяют только крупным кеглем, жирность и цвет не используют. Поэтому при сканировании мимо них легко проскочить:
![Подзаголовки не выделяются Подзаголовки не выделяются](/upload/medialibrary/ed6/vmyvab63dfpmdfg51bgfsgovwluaw4ej/14_12_16_texterra_7.webp)
Внимание к подзаголовкам привлекают только красные линии, но они не информативны: читатель их заметит, но подзаголовок может не прочитать. Если поменять цвет подзаголовков и добавить жирность, то мимо них уже не проскочишь:
![Так гораздо лучше Так гораздо лучше](/upload/medialibrary/4df/0ae3qfi5vwq8zegu90kf9oter1boy7f7/14_12_16_texterra_8.webp)
Совет: Подзаголовки должны выделяться.
Неправильное соотношение верхнего и нижнего отступа в подзаголовке
Еще одна ошибка в оформлении подзаголовков — неправильная величина отступов. Величина отступа сверху подзаголовка должна быть больше, чем величина отступа снизу. Так мы визуально показываем, что подзаголовок относится к нижнему абзацу, а не к верхнему.
В блоге «GetGoodRank» подзаголовки оформлены невнятно, поэтому их можно спутать с врезками.
![Подзаголовки оформлены невнятно Подзаголовки оформлены невнятно](/upload/medialibrary/c09/yjudpmy9aj209f0j5ib2ej05f2s5p4zf/14_12_16_texterra_9.webp)
Сделаем отступ сверху больше, чем снизу, и иерархия станет понятной:
![Так гораздо понятнее Так гораздо понятнее](/upload/medialibrary/1d4/qmqxxh8z2mvd7ugck17noinlzt0hkmwr/14_12_16_texterra_10.webp)
Совет: у читателя не должно возникать сомнений, к какому абзацу относится подзаголовок.
Сложная структура
Подзаголовки создают структуру статьи. Хорошая структура помогает читателю ориентироваться в статье. Но если структура многоуровневая, то читатель может запутаться. Принцип многоуровневой структуры — каждый следующий подзаголовок вкладывается в предыдущий и создает новый уровень вложенности.
Если подзаголовок включает в себя еще один подзаголовок — структура получается с трехуровневой вложенностью:
- Заголовок (Первый уровень)
- Подзаголовок (Второй уровень)
- Подзаголовок (Третий уровень)
- Подзаголовок (Третий уровень)
- Подзаголовок (Второй уровень)
- Подзаголовок (Второй уровень)
Такая структура воспринимается нормально, но если добавить еще один уровень, то читатель может потеряться в статье:
- Заголовок (Первый уровень)
- Подзаголовок (Второй уровень)
- Подзаголовок (Третий уровень)
- Подзаголовок (Четвертый уровень)
- Подзаголовок (Четвертый уровень)
- Подзаголовок (Третий уровень)
- Подзаголовок (Второй уровень)
- Подзаголовок (Второй уровень)
Многоуровневая структура хорошо подходит для справочников: с ее помощью легко находить информацию. Но читать статью с такой структурой сложно. Читателю приходится запоминать, в каком разделе он находится, что приводит к лишнему напряжению и путанице. Поэтому в статьях лучше использовать простую структуру:
- Заголовок
- Подзаголовок
- Подзаголовок
- Подзаголовок
Совет: Делайте структуру статьи проще. Многоуровневую структуру оставьте для тех, кто верстает справочники.
Неподходящий размер интерлиньяжа
Интерлиньяж — это расстояние между строками. Размер интерлиньяжа зависит от размера кегля и от ширины строки. Чем шире строка и крупнее кегль, тем больше должен быть интерлиньяж. Чтобы строки не получились слишком слипшимися, нужно ориентироваться на расстояние между словами: оно должно быть заметно меньше, чем интерлиньяж.
![Здесь расстояние между словами визуально сопоставимо с расстоянием между строками — это верный признак увеличить интерлиньяж Здесь расстояние между словами визуально сопоставимо с расстоянием между строками — это верный признак увеличить интерлиньяж](/upload/medialibrary/ab2/zmxxpb27i9xw0iegpxuyqlfz3u1mc55c/14_12_16_texterra_11.webp)
Текст стал читабельнее. Но нужно чувствовать меру:
![Текст стал читабельнее. Но нужно чувствовать меру Текст стал читабельнее. Но нужно чувствовать меру](/upload/medialibrary/b0e/whhncq5xl3swrne7bs53ewtuc1a3h1on/14_12_16_texterra_12.webp)
Слишком большой интерлиньяж мешает чтению не меньше, чем маленький:
![Слишком большой интерлиньяж мешает чтению не меньше, чем маленький Слишком большой интерлиньяж мешает чтению не меньше, чем маленький](/upload/medialibrary/763/czs2prqo3a6l216lqpmuekfhyrk8c2t6/14_12_16_texterra_13.webp)
Совет: Подбирая размер интерлиньяжа, ориентируйтесь на размер кегля, ширину текстового поля и расстояние между словами.
Слишком широкое текстовое поле
От размера текстового поля зависит скорость и удобство чтения. Слишком длинное текстовое поле затрудняет чтение: дочитав одну строку, сложно перескочить на следующую. Поэтому читатель может перепрыгнуть не на ту строку.
![Текст выглядит как простыня Текст выглядит как простыня](/upload/medialibrary/610/7e3ue2teyn0n329ttc3huk0g6drfwvid/14_12_16_texterra_14.webp)
Сделаем наборную строку чуть уже, и читать станет легче:
![Так читать гораздо легче Так читать гораздо легче](/upload/medialibrary/37b/xlmf0h76f5x1zx13o3pnvb2gt9pk1ygs/14_12_16_texterra_15.webp)
Чтобы определить подходящую длину строки, можно использовать формулу Роберта Брингхарста: размер кегля умножить на 30.
Мелкий размер кегля
Мелкий размер кегля — это неуважение к читателю. Размер кегля должен быть таким, чтобы его можно было читать без усилий.
![В этом примере статья набрана кеглем размером 12 px, поэтому прочитать ее сложно В этом примере статья набрана кеглем размером 12 px, поэтому прочитать ее сложно](/upload/medialibrary/7ff/u1hoyvlf8kfb3a4tkc834dihkd7g69tp/14_12_16_texterra_16.webp)
Увеличим кегль с 12 до 16 px, и текст можно спокойно читать:
![Кегль должен быть большим Кегль должен быть большим](/upload/medialibrary/e56/g00zg09cctr733zoq8lp1r95ksr3vlkm/14_12_16_texterra_17.webp)
Совет: Основной текст на веб-странице лучше не набирать кеглем меньше 14 px.
Отсутствие абзацев
Абзацы — это один из показателей хорошей структуры текста. Абзацы делают текст читабельнее и привлекательнее. Длинные полотна текста не хочется читать, кажется, что там написано о чем-то сложном.
![Текст читать практически невозможно Текст читать практически невозможно](/upload/medialibrary/26f/ko5d0uioy392rzr7lyirwfe4vdibeei2/14_12_16_texterra_18.webp)
Разделим это полотно на абзацы:
![Такой текст уже хочется читать, он не кажется таким сложным Такой текст уже хочется читать, он не кажется таким сложным](/upload/medialibrary/8af/nkvzy2asefm1rf97duk9pcfrkeity5mj/14_12_16_texterra_19.webp)
Совет: Делите текст на абзацы размером не более 8 строк.
Подведем итог
- Выравнивайте текст по левому краю;
- Подбирайте цвет шрифта, который наиболее контрастен к фону;
- Выделяйте подзаголовки четче;
- Расстояние сверху подзаголовка должно быть больше, чем снизу;
- Не используйте сложную структуру в статье;
- Межстрочный интервал должен быть заметно больше расстояния между словами;
- Текстовое поле не должно быть слишком широким;
- Набирать статью кеглем меньше 14 px — неуважение к читателю;
- Делите текст на абзацы.