Здравствуйте дорогие читатели моего блога!

Какая бы полезная статья не была опубликована у вас на сайте, без должного оформление текста, её никто не будет читать!

Собственно говоря, об этом я и хочу поговорить в данной статье.

Но довольно слов, приступаю к сути вопроса!

Виды шрифтов

Для улучшение читаемости текста на сайте, следует использовать так называемые безопасные шрифты.

Которые, как правило, установлены в операционной системе компьютера ваших читателей.

Лучше всего использовать шрифт Verdana, Arial, Georgia, Helvetica

Выбираем шрифт благодаря CSS стилям:

Советую использовать шрифт Verdana, так как он используется на тысячи сайтах и пользователи привыкли к чтению такого текста.

Согласитесь с тем, что глупо менять то, к чему привыкли посетители интернета.

Вот вам понравилось если бы дверная ручка на двери вашего подъезда была установлена на уровне вашего колена?

Я думаю, что нет!

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

Оставьте оригинальность для картинок!

Размер шрифта для сайта

Более 85% блогов на русском сегменте блогосферы используют в бесплатном шаблоне своего блога, стандартный размер шрифта!

Как правило, это размер в 11-12px.

Пять лет назад такой размер шрифта считался нормой!

Сейчас он слишком маленький для чтения текста, из-за большого разрешения мониторов компьютера и мобильных устройств.

Многие специалисты в области создания сайта рекомендуют размер шрифта в 14-16px

CSS стили:

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

pt - в пунктах (font-size:12pt;)
% - в процентах (font-size:140%;)

Цвет шрифта

Основной проблемой выбора цвета для текста на страницах сайта является тот момент, что цвет:

#000 - слишком тёмный
#999 - слишком светлый

Найдите золотую середину, которая не будет напрягать глаза посетителя при чтении нужного для него текста.

к примеру цвет шрифта #555:

для того чтобы изменить цвет шрифта, необходимо изменить в CSS стилях следующее значение:

Расстояние между строчками

Или как на просторе интернета многие веб разработчики говорят, междустрочное расстояние.

Расстояние между строчками придаёт тексту больше пустого пространства, такой текст становиться воспринимать гораздо легче, чем когда строчки очень плотно прижаты друг к другу!

для решения поставленной задачи необходимо изменить следующий параметр в CSS стилях:

Как правило, в параметре line-height: прописывают значение 1.5 или 1.8, исходя из размера шрифта на сайте.

Выравнивание текста по ширине

Как правило, по умолчанию, текст на сайте выравнивается по левому краю экрана, в результате чего с правой стороны образуется так называемый порванный текст.

Но если выравнивать текст по всей ширине ячейки, то это проблема исчезнет.

Но может появиться больше пустого пространства между словами. Как правило, это моменты зависят от самой ширины ячейки и количество слов на строчки.

А в CSS стилях за выравнивание текста отвечает следующий параметр:

Отступ между абзацами

Нет ничего хуже в оформлении текста на сайте, чем отсутствие отступов между абзацами, такой текст воспринимать и тем более читать, становиться затруднительно:

Но стоит прописать отступ между абзацами, как отрицательное отношение к тексту, поменяется на положительное.

Безусловно отступы зависят от размера шрифта, к примеру на данном сайте я использую размер шрифта в 14-15px, а отступы между абзацами в 25-30px.

В CSS стилях за это отвечает параметр margin:

Шрифт для заголовка

Как и с примером шрифта для текста в начале статьи, для заголовка лучше придерживаться тех же правил, отказаться от экзотических шрифтов:

Лучше использовать простые, понятные и безопасные шрифты, тем самым не раздражать своих читателей.

И безусловно CSS стили для заголовка:

Размер заголовка

Как правило, на странице с материалом заголовки размещаются в тег h1, h2, h3 и многие блоггеры прописывают им разные размеры.

Лучше использовать один размер шрифта для разных тегов так как:

1. Вы визуально не раскрываете секрет, в каком теге размещён текст заголовка

2. Такие заголовки воспринимаются читателями сайта лучше

Не прописывайте слишком маленький или слишком большой размер для заголовка:

Следует найти золотую середину, к примеру 18-22px, возможно немного больше, всё зависит от размера шрифта в тексте и разрешение экрана.

Размер заголовка меняем благодаря CSS стилям:

Отступ после заголовка

Многие администраторы своих сайтов забывают об отступах между заголовком и текстом абзаца:

Не делайте слишком маленькие или большие отступы в заголовках. Найдите свою золотую середину, к примеру 10px, а возможно и больше, стоит отталкиваться от размера заголовка и текста на сайте.

Цвет заголовков

Нет ничего хуже, чем на странице сайта с контентом украшать заголовки всеми цветами радуги:

Или использовать цвет заголовка который схож с цветом ссылки:

В современном веб дизайне больше ценится строгость и минимализм по отношению цветовой гаммы текста на сайте.

и безусловно сами CSS стили:

Теги оформления текста на сайте

И так я рассмотрел многие моменты по оформлению текста на сайте, теперь давайте соединим воедино весь код, чтобы вам было легче усвоить данную статью.

HTML код

Тут в целом нет ничего сложного, мы создаём отдельную div ячейку с нужным классом class="text-content" и размещаем в нёй нужные теги:

<p> - абзац текста
<h2> - заголовки на странице

и получаем вот такой HTML код:

Обратите внимание на то, что у тегов p и h2, h3 классы и идентификаторы отсутствуют.

Я отдаю своё предпочтение за чистоту кода, чего и вам советую!

CSS стили

И собственно говоря CSS стили которые являются конечным шагом в оформлении текста на вашем сайте:

Не забывайте то, что вам необходимо посмотреть исходный HTML код страниц вашего сайта.

И узнать класс или идентификатор div ячейки в которой расположен текст контента и прописать ему выше предоставленные CSS стили.

На этом первая часть по оформлению текста на сайте подошла к концу.

До скорых встреч, всем тепла и не болеть!