Анализ сайта

Оптимизация вашего сайта и исправление ошибок.

Как красиво и правильно оформить текст на сайте

Переезды — текст для страницы сайта и верстка
10.03.2017
Аудит сайта — чек-лист
04.05.2017

Содержание статьи

  1. Веб-шрифты: как их правильно использовать на сайте?

  2. Выбираем правильное начертание

  3. Размер шрифта

  4. Цвет шрифта на сайте

  5. Эстетический баланс

  6. Как узнать, какие цвета и шрифт используется на другом сайте?

  7. Текст: как красиво и грамотно оформить?

  8. Выделяем слова и словосочетания грамотно

  9. Прописные (заглавные) и строчные буквы

  10. Выравнивание

  11. Межбуквенные и межстрочные интервалы

  12. Буквица

Эта статья станет полезной веб-мастерам, владельцам сайтов и контент-маркетологам. Ежедневно сталкиваюсь с оформлением и правкой статей и создал структурированную публикацию-шпаргалку. Пользуйтесь, внедряйте советы и практики в своих проектах.

Начнем статью с азов:

  • Создавайте структурированные публикации
    Разбивайте монолитный текст на информационные блоки.

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

  • Отделяйте информационные блоки
    Фоном, иллюстрациями(фотографиями), свободным пространством.

  • Свободное пространство
    Это воздух для содержания страницы.

Веб-шрифты: как их правильно использовать на сайте?

Веб-шрифты создают эстетику при оформлении сайта и правильно подобранное начертание сделает сайт привлекательность и читабельность. Откройте для себя разнообразие профессиональных веб-шрифтов. Много бесплатных шрифтов, в том числе кириллических найдете и скачаете на сайте - http://www.fonts-online.ru.

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

При оформлении содержания (контента) шрифты разделяются на...

  • заголовочные;

  • текстовые;

  • выделительные.

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

Выбираем правильное начертание

  • Используйте на сайте до 3-х шрифтов - гармонично и облегчает восприятие информации.

  • Заведите и используйте фирменный шрифт для заголовков и подзаголовков.

  • Используйте шрифты одной группы - только с засечками или только рубленые, пример - группа Time News Roman или Arial. Для публикаций в интернете предпочтение отдается рубленым шрифтам (без засечек).

Размер шрифта

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

Размер шрифта для строчного текста - минимум 14px. Для заголовков и подзаголовков -
от 25px (в здравых пределах).

Цвет шрифта на сайте

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

При оформлении текста цветными шрифтами, используйте не более 2-х на весь текст, кроме основного, и только один из них яркий.

Эстетический баланс

Хороший шрифт должен выдерживать принципы эстетического баланса:

  • не слишком тонкий или ажурный;

  • не слишком тяжелый или кричащий;

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

Как узнать, какие цвета и шрифт используется на другом сайте?

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

Смотрим скрины и повторяем за мной. В качестве примера возьмем первый попавшийся сайт c ажурными шрифтами - http://beautiful.dtbaker.net.

- Из всех браузеров наиболее привычно стало семейство Chrome. Пример рассматривается в браузере Vivaldi.

Открыли сайт и сражу же увидели ажурные шрифты, которые используются в заголовках
по тексту и в навигации.

Наводим на шрифт и нажимаем правую кнопку мыши. Включилось контекстное меню. Выбираем пункт «Просмотреть код».

Смотрим слева направо. В верхнем боковом экране HTML-код сайта. Правее карта таблицы стилей CSS. Название шрифта прописывается в CSS. На примере мы определяем оформление для заголовка страницы. В блоке который отмечен видна таблица стилей этого загоовка. Обратите внимание на выделенную строку font-family - это и есть название шрифта. Грамотные разработчики оставляют исходное название шрифтов и потому всегда можно узнать их наименование.

Indie Flower - искомое название шрифта. Понравился? Как теперь его скачать? Перед тем, как перейти к методике по скачиванию шрифта учитывайте, что не все шрифты представлены кириллицей.

Пройдем еще ряд шагов и шрифт будет скачан:

  1. Оставляем открытым окно просмотра кода;

  2. Код сайта просматривали во вкладке «Elements», переходим к «Resources» - к ресурсам страницы;

  3. Раскрываем вкладки в левой части окна просмотра кода;

  4. Ищем вкладку «Fonts» - это и есть список заветных шрифтов;

  5. Находим шрифт «Indie Flower» сверяясь с начертанием в правом окне. Название в этих вкладках могут быть и такими, - бессмысленными;

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

  7. Вставляете шрифт на свой сайт.

Текст: как красиво и грамотно оформить?

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

В русском языке кавычки используются в виде «ёлочки», а в иностранном - “лапки”.

  • Одна строка должна быть заполнена текстом минимум на треть;

  • Используйте отступы между абзацами и сделайте их одинаковыми по всему сайту;

  • Переносите значения, например «XX век», на другую строку полностью, безотрывно.

Выделяем слова и словосочетания грамотно

Выделения в тексте помогают читателю выхватить ключевые мысли. Грамотно расставленные выделения сосредотачивают внимание читателя и увеличивают вероятность прочтения текста до конца или его фрагмента.

Каждый автор использует любимые стили выделения. Важно при этом соблюсти меру, разумность и придерживаться общих правил в оформлении.

Цель этого раздела - научиться грамотному использованию выделений.

Выделение №1 - курсив

Выделение курсивом в тексте малозаметно и ненавязчиво. Применяется для выделения комментариев, пояснений, названий, расхожих выражений, а также конкретных слов.

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

Выделение №3 - подчеркивание

Подчеркивание желательно использовать исключительно для ссылок.

Выделение №4 - зачеркнутый текст

Зачеркнутый текст наиболее часто используется при оформлении ценников в интернет магазине. Пример - старая цена и новая цена. Еще такой вид выделения можно встретить при оформлении записей в блогах.

Выделение №5 - заливка

Выделение №7 - другой цвет

Выделение №8 - более крупный размер шрифта

Выделение №9 - другой шрифт - шрифтовое выделение

Выделение №10 - прописные (заглавные) буквы

Выделение №11 - рамка

Выделение №12 - разрядка

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

Применяйте выделение разрядкой для коротких отрезков текста. Выделения длинных участки текста только затруднит чтение. Обратите внимание, на пример в изображении на  широкие отступы между выделяемым словом (словосочетания) и текстом. Это сделано, чтобы выделяемое слово и рядом стоящие слова не слиплись.

Выделение №13 - боковой отступ (втяжка)

Боковой отступ или втяжка - еще одно нешрифтовое выделение, которое используется для выделения абзаца или раздела статьи. Отступ делается односторонним или двусторонним - на усмотрение автора.

Выделение №14 - боковая линейка

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

Выделение №15 - маркер + курсив

Отличный вариант выделения для уточняющих фраз. Любому взрослому известен символ *(звездочка), который приводит к уточнению расположенному в конце текста. Предлагаю пойти дальше и расширить набор маркеров. В качестве авторской «фишки» можно воспользоваться другими символами - @(собака), #(решетка), -(тире).

Пример использования выделения «маркер + курсив»:

Выделение №15 - комбинированное

Прописные (заглавные) и строчные истины буквы

НЕ ПИШИТЕ МНОГО ПРОПИСНЫМИ (ЗАГЛАВНЫМИ) БУКВАМИ. И уже тем более НИКОГДА «прыгающим стилем» - ЭтО ПрИмЕр ПрыгАющЕГо ТексТа.

Как об авторе сайта такое написание текста скажет прежде всего о пренебрежении к читателю.

Выравнивание

  • Выравнивайте текст по левому краю и не переусердствуйте с центрированием объемных абзацев;

  • Никогда не используйте выравнивание по ширине - CSS: text-align: justify;

Межбуквенные и межстрочные интервалы

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

Буквица

Бу́квица — крупная, отличная от прочих, первая буква главы или раздела.