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

Учимся креативности у Квентина Тарантино
14.06.2018
ВАУ!-проекты (скачать fb2) — Том Питерс
07.07.2018

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

  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;

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

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

Буквица

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

Политика конфиденциальности

Политика конфиденциальности ресурса, расположенного на доменном имени www.contentim.ru

1. ОПРЕДЕЛЕНИЕ ТЕРМИНОВ

2. ОБЩИЕ ПОЛОЖЕНИЯ

3. ПРЕДМЕТ ПОЛИТИКИ КОНФИДЕНЦИАЛЬНОСТИ

4. ЦЕЛИ СБОРА ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ ПОЛЬЗОВАТЕЛЯ

5. СПОСОБЫ И СРОКИ ОБРАБОТКИ ПЕРСОНАЛЬНОЙ ИНФОРМАЦИИ

6. ОБЯЗАТЕЛЬСТВА СТОРОН

7. ОТВЕТСТВЕННОСТЬ СТОРОН

8. РАЗРЕШЕНИЕ СПОРОВ

9. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ

Обновлено «01» июня 2018 г.

×
Пользовательское соглашение ресурса, расположенного на доменном имени www.contentim.ru

1. ОБЩИЕ ПОЛОЖЕНИЯ

2. ОПРЕДЕЛЕНИЯ ТЕРМИНОВ

3. ПРЕДМЕТ СОГЛАШЕНИЯ

4. ПРАВА И ОБЯЗАННОСТИ СТОРОН

5. ИСПОЛЬЗОВАНИЕ САЙТА

6. ОТВЕТСТВЕННОСТЬ

7. НАРУШЕНИЕ УСЛОВИЙ ПОЛЬЗОВАТЕЛЬСКОГО СОГЛАШЕНИЯ

8. РАЗРЕШЕНИЕ СПОРОВ

9. ДОПОЛНИТЕЛЬНЫЕ УСЛОВИЯ

Обновлено «01» июня 2018 г.

×
Сбор персональных данных

Did you know, that Easy Modal has a fancy new replacement called Popup Maker? It is the highest user rated popup & modal plugin available for WordPress.

Принять

×
Заказать аудит сайта
*Все поля обязательные
×