Оформляем текст или создание удобочитаемости
2022
Представляю вам гостевой пост от автора блога cms-all.ru. В этой статье он расскажет, как оформлять текст или создавать его удобным для чтения.
Как правило, критерии хорошего блога: 1. Хороший и лёгкий дизайн 2. Удобная структура, предоставляющая хорошую навигацию 3. Возможность комментирования 4. Читабельный шрифт. Все эти параметры важны, не стоит пренебрегать ими, но, наверное, самое главное является оформленный читабельный шрифт.
Лёгкий и удобно читаемый шрифт достаточно тяжело подобрать самому, поэтому если вы хотите, чтоб читателям было, приятно читать ваш текст надо брать пример с профи в этом деле. Некоторые могут быть в несогласии, но я явно вижу лидеров в оформлении текста — газеты. Да да именно газеты, уж там то знают толк в тексте. Ну, хватит теории, к практике.
Семейство шрифта
Есть шрифты с всякими узорами и прочими засечками, смотрятся они на письмо довольно красиво, но человек, читающий такой текст очень быстро устанет. Примером могут послужить следующие семейства: Times New Roman, Georgia, Palatino
Но всё-таки если у вас сайт с большим количеством текста (блог, форум), такой текст будет плохо усваиваться, читабельными шрифтами считаются: Tahoma, Arial, Trebushet
Как можно увидеть, разница в строениях шрифтов колоссальна. По мне первая подборка смотрится красивей, поэтому её можно использовать в заголовках, но основной контент всё-таки делать по второй подборке. Хочу заметить, что данные шрифты относятся к стилю минимализма, почитать подробней про минимализм можно здесь.
Размер шрифта
Обычно размер текста должен быть 10-12 пикселей, редко если сайт для людей с плохим зрением — 14 пикселей. Не стоит забывать про межстрочный интервал, чем больше шрифт, тем и его надо делать больше в пикселях, поэтому советую его делать в процентах. Самый оптимальный вариант 150%. Разные шрифты при одинаковых значениях межстрочного интервала и размера выглядят по-разному, наглядный пример (везде размер: 12px, межстрочный интервал: 150%):
Tahoma
Time New Roman
Comic Sans MS
Выравнивание
Удобное выравнивание текста считается только по левому краю, заголовки не в счёт. Человеку более привычно читать слева на право, поэтому человек должен твёрдо чувствовать, где начало новой строки, примером могут послужить газеты, у них выравнивание только по левому краю:
Я выделил первый абзац в левой колонке там наиболее лучше видно выравнивание. Многие даже не задумываются об этом и всегда ставят выравнивание по левому краю, но есть сайты, которые размещают текст по правому краю или по центру, в частности это сайты школьников на юкозе или частенько на ЖЖ. Для некоторых это не особо важный параметр, но я не мог ему не присвоить отдельно пункт, так как это очень важно при создании удобочитаемости контента.
Длина строки текста
Для наглядного примера нам опять понадобится кусок газеты, дублировать не стану, поэтому, немного листаем выше! Как видите формирование текста в газете идёт с помощью столбцов, хоть это не нормальный вариант для реализации на блоге, но суть не в методе формирования на столбцы, а в длине строки текста, тоесть человеку удобно не бегать глазами на всю ширину газеты (любой поверхности, будь, то экран или кусок бумаги). Поэтому подумайте над этим, легче всего это можно сделать, если поставить справа и слева сайдбар для забивания места, пример данной реализации можно увидеть на этом сайте — webmastermix.ru, конечно не такая ширина как на газете, но это будет просто отлично для усваемости посетителем.
Примечание: вы также можете креативить, то, что не подходит для блога формирование контента как на картинке, это лишь моё мнение, мне кажется, при реализации получится очень даже не плохо, а главное вы будете выделяться из массы других сайтов.
Думаю, граница в 320-540 пикселей будет самое то, для выставления текстовой области, собственно пробуйте…
Прочее оформление
Сюда надо отнести подбор цвета текста, заливка текста, оформление ссылок, оформление заголовков, как видите достаточно не большие по значению пункты, но важные, поэтому я их объединил.
Подбор цвета текста
Конечно лучший вариант использование чёрного цвета, при белом фоне. Но, к примеру, если у вас фон синих тонов, то отлично подойдёт слегка сероватый — #626669. Забыл упомянуть, что старайтесь саму текстовую область делать белого цвета, исключение серого цвета — паттерном. Также не обязательно делать текст 100% чёрным, попробуйте более приглушённый — #444444.
Заливка текста
Самая глупая ошибка в оформлении текста, явный пример можно посмотреть на сайте Сергея Мавроди МММ 2022:
При относительно красивом, строгом дизайне, данное оформление текста никак не подходит, сказывается впечатление, что сайт создан на юкозе школьником. Ну да ладно просто не делайте подобных ошибок.
Оформление ссылок
Стандартное оформление ссылок — это текст синего текста, при наведении подчёркнутый. Желательно без особых причин не менять этих параметров, цвет ссылки ещё можно изменить, но подчёркнутость оставьте в любом случае.
Оформление заголовка
Каких то больших правил в оформлении заголовков нет, вы можете сделать их ссылок с подчёркиванием, а можете сделать, чтоб при наведении не изменялось, можете сделать текст под наклоном (italic), или просто жирный. Впрочем, могу посоветовать использовать эффект вдавленности текста при помощи свойства text-shadow (text-shadow: 0 1px 0 #FFFFFF;), но если у вас фон текстовой области белой, то тени видно не будет, так что поэкспериментируйте:
Также довольно часто на сайтах встречается (в том числе и на моём) использование в заголовках — семейства Georgia + Italic, получается довольно красиво, можете взглянуть на моём блоге cms-all.ru.
Спасибо за эфирное время автору блога logisticsinfo.ru Кириллу, который дал возможность разместить мою статью на его блоге. Если у вас есть, какие, либо вопросы, отвечу в комментариях.
Свойство «text-shadow» особо глазу приятно.
Глазу да, но не всем браузерам
Согласен, есть проблемка.
Основы типографики еще никому не мешали)))) спасибо за пост!