Глава 8.1. Обзор основных тем и элементов

↑

▷ Содержание

⇐ ПредыдущаяСтр 41 из 56Следующая ⇒

Если вы верстаете сайт, на котором предполагается много текстов, появляются не только секции и блоки, но и текстовые элементы — цитаты и врезки, подписи и выделенные ссылки. Обычно эти элементы применяются в посте — отдельной новости/публикации.

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

В самой запущенной ситуации пост в текстовом плане может состоять из:

· Заголовка (обязательно);

· Подзаголовка;

· Лида (вводный элемент, содержит главную мысль, индексируется как описание материала);

· Собственно текста (обязательно);

· Цитат и акцентных мыслей;

· Списков;

· Демонстрационных материалов (изображения, схемы, таблицы) с подписями;

· Дополнительной информации по теме (обычно выносится вбок или публикуется на блёклом фоне/более мелко/менее контрастным шрифтом);

· Метаданных (автор, дата, количество просмотров, теги, время чтения);

· Ссылок на другие материалы (зачастую либо под материалом, либо сбоку).

О чём мы не говорим в главе про вёрстку текстового содержимого

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

Есть определённые традиции в оформлении всех этих элементов, типовые приёмы. Но бывают и особенные случаи. Начнём с «традиционных» и потом перейдём к «нетрадиционным» подходам в оформлении текстовых элементов.

Вот основные техники, с помощью которых текст оформляется:

· особенные шрифты;

· изменение текстовых параметров (кегль, цвет, интерлиньяж, трекинг, насыщенность, трансформации…) одного символа или текстового элемента, типографика;

· изменённые отступы или выравнивание иногда могут служить декоративным элементом;

· обводки;

· фоны (и сопутствующее: градиенты, радиусы скругления…);

· графика (как часть контента или как фон);

Бывает, применяется всё вместе.

Здесь есть и буквица, и лид, и обводка, и фон, и метаданные…

Теория~ 10 минут

Глава 8.2. Шрифты: специфика подключения

Собственно, большая часть декора — работа со шрифтами. Особенный шрифт делает мысль выделяющейся, каллиграфический шрифт меняет восприятие цитаты — будто её и правда написали от руки, а правильно подобранные отступы и дополнительные стили делают шрифт уместным.

Как подключить Google Fonts

· Во-первых, можно подключить их в HTML, в метаданных сайта. Для этого нужно зайти на сайт Google Fonts, выбрать нужный шрифт, добавить в него кириллицу, добавить в него жирное начертание если нужно, после этого — копировать ссылку для встраивания. По умолчанию сервис добавляет в пакет только латиницу в стандартном начертании.

Выбор шрифта и его параметров

Вот как выглядит подключение стилевого файла со шрифтом:

· Во вкладке @Import можно скопировать код для встраивания в CSS. Это полезно, если шрифт применяется только как декоративный, или если нет доступа в метаданные сайта в html-файле. Этот метод не рекомендуется, так как замедляет отрисовку сайта в браузере.

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

Соответственно, в CSS попадёт такой код (заметьте, мы дописали латиницу в код наряду с кириллицей):

Познавательные статьи:



Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов