Анализ сайта

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

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

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


Предисловие

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

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

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

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

  • Избыточную(уточняющую) информацию удалите или вынесите на отдельную страницу

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

  • Отделяйте информационные блоки

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

  • Свободное пространство

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



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

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

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

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

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

  • текстовые;

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

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

Как красиво и грамотно оформить текст на сайте?



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

  • Используйте на сайте до 3-х шрифтов - гармонично и облегчает восприятие информации. Например на этом сайте предпочтение отдано шрифтам TitH (заголовки и подзаголовки) и Roboto (текст, заголовки меню).

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

  • Используйте шрифты одной группы - только с засечками или только рубленые, пример - группа 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. Вставляете шрифт на свой сайт.



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

Длина строки не более 60-80 символовИспользуйте в тексте абзацы разного объема. Абзац содержит до 5-7 предложенийкак красиво и грамотно оформить текст на сайте?

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

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

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

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



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

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

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

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



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

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

Примере: выделение текста курсивом

Выделение №2 - полужирный

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

Пример: выделение текста полужирным

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

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

Пример: выделение текста подчеркиванием

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

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

Пример: выделение текста зачеркиванием

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

Пример: выделение текста заливкой

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

Пример: выделение текста другим цветом

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

Пример: выделение текста более крупным шрифтомПример: выделение текста более крупным шрифтом с центрированием

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

Пример: выделение текста другим шрифтом

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

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

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

Пример: выделение текста рамкой

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

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

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

Пример: выделение текста разрядкой

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

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

Пример №1: выделение текста боковым отступомПример №2: выделение текста боковой втяжкой

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

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

Пример: выделение текста боковой линейкой

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

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

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

Пример: выделение текста - маркер + курсив

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

Пример №1: выделение текста комбинированным способомПример №2: еще один комбинированный способ выделение текста

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

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

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

Неправильно: текст прописными(заглавными) буквамиНеправильно: прыгающий текстПравильно: использование заглавных и строчных букв

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

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

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

Неправильно: выравнивание текста по ширинеНеправильно: выравнивание текста по центруПравильно: выравнивание текста по левому краю

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

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

Неправильно: большой межстрочный интервалНеправильно: большой межбуквенный интервалРазумно используйте межбуквенный и межстрочный интервалы

Буквица

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

Буквица для оформления текста