Типографика

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

Иерархическая структура текстового контента

По умолчанию элемент Текст имеет тег div. Для создания четкой и понятной структуры текста вы можете назначать текстовым элементам теги:

• Заголовки h1, h2 и так далее до h6 в зависимости от их положения в иерархии. Тег h1 — заголовок первого уровня, h6 — последний заголовок в иерархии.
• Тег p — для абзаца текста.
• Тег blockquote — для цитаты.

Теги для текста можно выбрать на вкладке Настройки (Settings) правой панели.

Форматирование текста

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

Для форматирования текста нужно:

1. выбрать элемент на Холсте или на вкладке Слоев левой панели

2. установить стили на вкладке Стилей правой панели в разделе Текст

   

Параметры форматирования текста

Шрифт (Font)

Для установки шрифта раскройте список и выберите нужный шрифт (используются Google шрифты).

На тарифах Team и Business вы также можете загрузить пользовательские шрифты.

Начертание (Font weight)

В зависимости от выбранного шрифта в данном списке будут варианты его жирности и начертания (курсив).

Размер шрифта (Font size)

Размер шрифта может быть задан в различных единицах — px, em, rem, %, vw или vh. Он может быть фиксированным или меняться пропорционально родительскому элементу или окну браузера. По умолчанию размер шрифта устанавливается в пикселях.

Цвет шрифта (Font color)

Установить цвет текста можно, введя значение цвета (в формате Hex или RGB) или выбрав цвет с помощью средства выбора цвета — пипетка (color picker). Также можно установить прозрачность цвета текста от 0 до 100%.

Вы можете сохранять цвета для последующего использования их в проекте. Для этого нажмите “+” в параметре Сохраненные цвета (Saved Colors).

Можно также выбрать цвет из недавно использованных вариантов, нажав на выпадающий список в этом параметре и выбрав Недавно использованные цвета (Last Used Colors).

Интерлиньяж (Line-height)

Расстояние между строк текста по умолчанию имеет значение Normal и зависит от браузера. Можно настроить расстояние между строк, выбрав значение в px, em, rem, %, vw, vh или num (числовое значение, зависящее от размера шрифта браузера, обычно 16px - 1num).

Межсимвольное расстояние (Letter-spacing)

Расстояние между буквами по умолчанию имеет значение Normal и зависит от выбранного шрифта. Можно изменить расстояние между буквами, выбрав значение в px, em, rem, vw или vh. Значение межсимвольного расстояния может быть как положительное, так и отрицательное — например, «-1px» или «-0.05em».

Выравнивание текста (Text Align)

Выравнивать текст можно: по левому краю, по центру, по правому краю или по ширине.

Обводка текста (Text Stroke)

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

Тени текста (Text Shadows)

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

В параметрах тени можно установить смещение по осям х и у, размытие и цвет и прозрачность тени.

Единицы измерения

Пиксели (px)

Базовая единица изменения.

Em

Размер шрифта определяется относительно размера шрифта родительского элемента. 1em равен текущему размеру шрифта элемента. Значение параметра может быть меньше 1 - тогда размер шрифта элемента будет меньше родительского или больше 1 - тогда размер шрифта элемента будет превышать родительский.

Пример: размер шрифта родительского элемента 16px :

• размер шрифта дочернего элемента 0.5em = 8px
• размер шрифта дочернего элемента 2em = 32px

Размер шрифта дочернего элемента будет меняться пропорционально изменениям размера шрифта родительского элемента.

Rem

По аналогии с em размер шрифта определяется относительно размера шрифта родительского элемента. 1rem равен текущему размеру шрифта элемента.

Проценты (%)

Размер определяется в процентах от размера шрифта родительского элемента. Размер шрифта дочернего элемента будет меняться пропорционально изменениям размера шрифта родительского элемента.

Viewport Width (vw)

Это процентная величина от ширины окна браузера. 10vw представляет собой 10% от текущей ширины окна браузера (например, 48px на телефоне с экраном шириной 480px).

Viewport Height (vh)

Это процентная величина от высоты окна браузера. 10vh составляет 10% от текущей высоты окна браузера.

Дополнительные параметры текста (More Type Options)

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

Доступны следующие дополнительные параметры:

Оформление (Decoration)

Текст можно выделить подчеркиванием или зачеркиванием.

Регистр (Capitalize)

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

Перенос при переполнении (Overflow Wrap)

Текст переносится по словам при переполнении блока. По умолчанию перенос включен.

Прерывание (Breaking)

Свойство Breaking управляет тем, как обрабатываются пробельные символы внутри элемента.

• Normal — Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. Значение по умолчанию.

• Nowrap — Пробелы не учитываются, весь текст отображается одной строкой.

• Pre — Текст показывается с учетом всех пробелов и переносов, как они были добавлены. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

• Pre-wrap — В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

• Pre-line — В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.

• Break-spaces — Поведение идентично pre-wrap, за исключением того, что любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки. Возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.

Дополнительные опции стилей текста — Встроенный текст (Inline Text)

Стилизовать можно не только весь текстовый элемент, но и часть текста, выделив ее мышкой. Выделив текст в Текстовом блоке, вы увидите на правой панели опции для его стилизации — Встроенный текст (Inline Text).

Здесь можно установить следующие параметры:

• Шрифт
• Начертание
• Размер шрифта
• Цвет текста
• Оформление — подчеркнутый или зачеркнутый
• Диактрика — верхний или нижний индекс
• Прерывание — перенос слов или запрет переноса выделенных слов
• Вставить ссылку — указать ссылку на страницу сайта или внешний ресурс

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