Эта статья станет полезной веб-мастерам, владельцам сайтов и контент-маркетологам. Ежедневно сталкиваюсь с оформлением и правкой статей и создал структурированную публикацию-шпаргалку. Пользуйтесь, внедряйте советы и практики в своих проектах.
Азы грамотного оформления текстов
- Создавайте структурированные публикации
Разбивайте монолитный текст на информационные блоки. - Избыточную(уточняющую) информацию удалите или вынесите на отдельную страницу
Признайтесь, тяжело читать емкую публикацию. Позвольте читателю бегло пробежать по ней глазами, выхватить интересную и полезную информацию. - Отделяйте информационные блоки
Фоном, иллюстрациями(фотографиями), свободным пространством. - Свободное пространство
Это воздух для содержания страницы.
Веб-шрифты: как их правильно использовать на сайте?
Веб-шрифты создают эстетику при оформлении сайта и правильно подобранное начертание сделает сайт привлекательность и читабельность. Откройте для себя разнообразие профессиональных веб-шрифтов. Много бесплатных шрифтов, в том числе кириллических найдете и скачаете на сайте - 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 - искомое название шрифта. Понравился? Как теперь его скачать? Перед тем, как перейти к методике по скачиванию шрифта учитывайте, что не все шрифты представлены кириллицей.
Пройдем еще ряд шагов и шрифт будет скачан:
- Оставляем открытым окно просмотра кода;
- Код сайта просматривали во вкладке «Elements», переходим к «Resources» - к ресурсам страницы;
- Раскрываем вкладки в левой части окна просмотра кода;
- Ищем вкладку «Fonts» - это и есть список заветных шрифтов;
- Находим шрифт «Indie Flower» сверяясь с начертанием в правом окне. Название в этих вкладках могут быть и такими, - бессмысленными;
- Делаем двойной клик мышью по шрифту и вуа-ля, браузер скачивает шрифт на компьютер;
- Вставляете шрифт на свой сайт.
Текст: как красиво и грамотно оформить?
Это рекомендация. Не всегда получается соблюдать правило длины строки, потому следует найти разумный предел.
В русском языке кавычки используются в виде «ёлочки», а в иностранном - “лапки”.
- Одна строка должна быть заполнена текстом минимум на треть;
- Используйте отступы между абзацами и сделайте их одинаковыми по всему сайту;
- Переносите значения, например «XX век», на другую строку полностью, безотрывно.
Выделяем слова и словосочетания грамотно
Выделения в тексте помогают читателю выхватить ключевые мысли. Грамотно расставленные выделения сосредотачивают внимание читателя и увеличивают вероятность прочтения текста до конца или его фрагмента.
Каждый автор использует любимые стили выделения. Важно при этом соблюсти меру, разумность и придерживаться общих правил в оформлении.
Цель этого раздела - научиться грамотному использованию выделений.
Выделение №1 - курсив
Выделение курсивом в тексте малозаметно и ненавязчиво. Применяется для выделения комментариев, пояснений, названий, расхожих выражений, а также конкретных слов.
Полужирное выделение используется для ключевых слов (фраз) - выгоды, преимущества, отличительные особенности.
Выделение №3 - подчеркивание
Подчеркивание желательно использовать исключительно для ссылок.
Выделение №4 - зачеркнутый текст
Зачеркнутый текст наиболее часто используется при оформлении ценников в интернет магазине. Пример - старая цена и новая цена. Еще такой вид выделения можно встретить при оформлении записей в блогах.
Выделение №5 - заливка
Выделение №7 - другой цвет
Выделение №8 - более крупный размер шрифта
Выделение №9 - другой шрифт - шрифтовое выделение
Выделение №10 - прописные (заглавные) буквы
Выделение №11 - рамка
Выделение №12 - разрядка
Разрядка - увеличение промежутков между буквами выделяемого слова.
Применяйте выделение разрядкой для коротких отрезков текста. Выделения длинных участки текста только затруднит чтение. Обратите внимание, на пример в изображении на широкие отступы между выделяемым словом (словосочетания) и текстом. Это сделано, чтобы выделяемое слово и рядом стоящие слова не слиплись.
Выделение №13 - боковой отступ (втяжка)
Боковой отступ или втяжка - еще одно нешрифтовое выделение, которое используется для выделения абзаца или раздела статьи. Отступ делается односторонним или двусторонним - на усмотрение автора.
Выделение №14 - боковая линейка
Боковая вертикальная линейка устанавливается рядом со строками, к которым хотят привлечь внимание читателя. Между линейкой и текстом обязательно сделайте отступ.
Выделение №15 - маркер + курсив
Отличный вариант выделения для уточняющих фраз. Любому взрослому известен символ *(звездочка), который приводит к уточнению расположенному в конце текста. Предлагаю пойти дальше и расширить набор маркеров. В качестве авторской «фишки» можно воспользоваться другими символами - @(собака), #(решетка), -(тире).
Пример использования выделения «маркер + курсив»:
Выделение №15 - комбинированное
Прописные (заглавные) и строчные истины буквы
НЕ ПИШИТЕ МНОГО ПРОПИСНЫМИ (ЗАГЛАВНЫМИ) БУКВАМИ. И уже тем более НИКОГДА «прыгающим стилем» - ЭтО ПрИмЕр ПрыгАющЕГо ТексТа.
Как об авторе сайта такое написание текста скажет прежде всего о пренебрежении к читателю.
Выравнивание
- Выравнивайте текст по левому краю и не переусердствуйте с центрированием объемных абзацев;
- Никогда не используйте выравнивание по ширине - CSS: text-align: justify;
Межбуквенные и межстрочные интервалы
Разумно используйте межбуквенный и межстрочный интервалы. Слишком большое расстояние между буквами и строками затрудняет чтение.
Буквица
Бу́квица — крупная, отличная от прочих, первая буква главы или раздела.
