Типографика
Типографика (оформление текста) важна для того, чтобы сделать текстовый контент на сайте удобным для чтения. Это достигается с помощью создания иерархической структуры текста и его форматирования — стилизации.
По умолчанию элемент Текст имеет тег div. Для создания структуры текста вы можете назначать текстовым элементам теги заголовков h1, h2 и так далее до h6 в зависимости от их положения в иерархии. Тег h1 — заголовок первого уровня, h6 — последний заголовок в иерархии. Это можно сделать во вкладке Настройки (Settings) правой панели.
Текстовые элементы могут быть как отдельными элементами сайта, содержащими блоки контента, так и являться частью более сложных элементов, например, кнопок и виджетов (списков, меню). Во всех случаях вы можете форматировать текст, применяя к нему желаемые стили.
Для форматирования текста нужно:
Шрифт (Font)
Для установки шрифта раскройте список и выберите нужный шрифт (используются Google шрифты).
Если шрифт поддерживает кириллицу, напротив названия будет буква «К»
Начертание (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.
Выравнивание текста (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% от текущей высоты окна браузера.
Нажав на значок с тремя точками в параметрах текста, можно установить дополнительные параметры.
Доступны следующие дополнительные параметры:
Оформление (Decoration)
Текст можно выделить подчеркиванием или зачеркиванием.
Регистр (Capitalize)
Все буквы текста могут быть заглавными, строчными или каждое слово может начинаться с заглавной буквы.
Перенос (Overflow Wrap)
Текст переносится по словам при переполнении блока. По умолчанию перенос включен.
Прерывание (Breaking)
Свойство Breaking управляет тем, как обрабатываются пробельные символы внутри элемента.
- Normal — Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. Значение по умолчанию.
- Nowrap — Пробелы не учитываются, весь текст отображается одной строкой.
- Pre — Текст показывается с учетом всех пробелов и переносов, как они были добавлены. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
- Pre-wrap — В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
- Pre-line — В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- Break-spaces — Поведение идентично pre-wrap, за исключением того, что любая последовательность неудаляемых пробелов всегда занимает место, в том числе в конце строки. Возможность переноса строки существует после каждого неудаляемого пробела, в том числе между пробелами.
Стилизовать можно не только весь текстовый элемент, но и часть текста, выделив ее мышкой. Выделив текст в Текстовом блоке, вы увидите на правой панели опции для его стилизации — Inline Text. Здесь дополнительно к вышеуказанным параметрам можно установить Диактрику (Diacritics) — верхний или нижний индекс.
Также выделенную часть текста можно сделать ссылкой на страницу сайта или внешний ресурс, указав ссылку в поле Вставить ссылку (Insert link).