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

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

Начнем с прописных истин, которые нужно знать при css верстке сайта:

а) Идеал оформления — это популярные печатные издания вроде Times, The Sun, Marca etc. Поскольку в этих газетах работают настоящие профессионалы, они создают максимально читабельные тексты, которые только внешним видом будут привлекать покупателя.

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

в) Выделение в тексте важных моментов не только способствует SEO оптимизации, но и облегчает чтение.

г) Применение правил печатной типографии обязательно и в интернете.

То есть заголовок или подзаголовок должны быть написаны большим размером шрифта, а список или цитаты обязательно оформляются соответствующими отступами и рамками. Как же использовать все это при верстке сайта в css? Прежде всего нужно задать стандарты, то есть установить размер, цвет и шрифт тегам h1-h6, тоже самое проделать и для остального текста.

 h1:{font-size: 16 px; font-family: Arial, Verdana, Tahoma; color:#fff;}

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

. Выделения цитат происходит с помощью установки стилей для тега
, который обычно выделяют в рамку с отступом margin-left: 20px; (или больше) и изменением цвета шрифта. Очень важно оформлять блочные списки с помощью , это элемент так называемой семантической верстки сайта css.

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

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