10 правил вёрстки статей

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

Все стили в CSS
Нагромождение style, font, прочего — мусор. Выносите всё оформление в CSS. Оптимальное решение: укажите основной шрифт, цвет, прочее в теге BODY.

Выравнивай текст по левому краю
Выравнивание по краям увеличивает отступы между словами и затрудняет чтение текста. Оптимальные решения: выравнивание текста по левому краю или использование CSS3 свойство hyphens для расстановки переносов слов.

Контрастный с фоном цвет текста
Чем меньше соотношение цвета текста и фона, тем сложнее читать текст. Но небольшое его уменьшение улучшает сглаживание. Оптимальные варианты: фон #fff и текст #222 или фон #000 и текст #f7f7f7.

Заметные заголовки
По умолчанию все H-заголовки выделены крупным и жирным начертанием. Использование линий, цвета, прочего, редко даёт хороший результат. Оптимальные варианты: оставить по умолчанию; шрифт заголовка с засечками (serif), а текста — рубленный (sans-serif) и наоборот или цвет заголовка светлее, а текста — темнее и наоборот.

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

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

Читабельный межстрочный отступ
Размер межстрочного отступа (интерлиньяж) задаётся CSS свойством line-height и зависит от размера кегля (высоты) букв и ширины строки. Чем шире строка и крупнее кегль, тем больше интерлиньяж. Оптимальное решение: line-height:1.4.

Читабельная ширина текстового блока
Широкий блок затрудняет чтение текста. Оптимальное решение: ограничить ширину текстового блока CSS свойством width или max-width, при необходимости применяя его центрирование или разбиение на колонки.

Читабельный размер кегля (высоты) букв
Маленький размер шрифта затрудняет чтение текста. Оптимальный кегль букв зависит от шрифта, но обычно должен быть больше 12px. Оптимальный вариант: 14px или 16px, задаётся CSS свойством font-size.

Читабельные абзацы
Абзац задаётся тегом P. Если это не возможно — между абзацами вставляется пустая строка из двух тегов BR. В некоторых случаях CSS свойство margin (внешний отступ) абзаца обнуляется и добавляется отступ первой строки, используя CSS свойство text-indent.

Короткая ссылка: https://goo.gl/fb/Ocn8ja