Менеджер стилей Text styles. Форматирование и работа со шрифтами

Text styles. Форматирование и работа со шрифтами

Содержание

Каких форматов бывает текст?

Как добавить текстовые форматы?

Как добавить новые шрифты для оформления поста?*

Где я могу найти добавленные шрифты?

Подключение шрифтов из Google Fonts

Подключение шрифтов из Adobe Fonts

; Как добавить собственные шрифты?

Как удалить ненужные шрифты

Как изменить размер шрифта?

Как увеличить или уменьшить толщину шрифта?

Как регулировать высоту строки?

Могу ли я задать параметры шрифтов отдельно для планшетов и смартфонов?

Как использовать специальное оформление для bold и italic текста?

Какими стилями можно оформить ссылки?"

Подписи к изображениям и эмбедам



Работа с текстом и шрифтами ведется в блоке Text styles внутри стиля.

 

 

Каких форматов бывает текст?

Есть обычный текст (Paragraph), текст для подписей (Small text) и разные заголовки: Large Header, Medium Header, Small Header. Вы также можете настроить стиль подписей под изображениями (image caption). Для них можно выбрать один из уже настроенных стилей — например, Paragraph.

 

Как добавить текстовые форматы?

Чтобы добавить текстовые форматы, нажмите на кнопку Add Text Format и выберите необходимый вам вариант. 

 

Как добавить новые шрифты для оформления поста?*

*Доступно только на Pro тарифах

Чтобы добавить новые шрифты для оформления поста, выберите их из библиотеки Google Fonts, подключите Adobe Typekit или добавьте кастомные шрифты. 

 

Screen_Shot_2017-04-28_at_16.19.56.png

 

Где я могу найти добавленные шрифты?

Новый шрифт появится в разделе Font Family.

 

Подключение шрифтов из Google Fonts

Для добавлении новых шрифтов нажмите Manage fonts, вы увидите вкладки Google FontsTypekit и Upload Fonts.

После выбора Google Fonts, введите название нужного шрифта в строке поиска и затем выберите его.

 

 

Подключение шрифтов из Adobe Fonts*

*Доступно только на Pro тарифах

Для добавлении новых шрифтов нажмите Manage fonts, вы увидите вкладки Google FontsAdobe Fonts и Upload Fonts.

После выбора Adobe Fonts нужно ввести свой API Token.  

Screen_Shot_2018-12-14_at_15.05.23.png

После ввода ключа, Adobe Fonts web projects синхронизируются с Setka Editor. Выберите нужный web project. К одному стилю можно подключить только один web project, но в нем может быть сколько угодно шрифтов.

Шрифты появятся у вас в выпадающем меню. При использовании одновременно Google Fonts и Adobe Fonts у вас будет несколько групп шрифтов – чтобы понимать, откуда какой шрифт, если у них одинаковые названия.

 

Как узнать мой Adobe Fonts API Token?

Этот ключ можно получить в вашем аккаунте на https://fonts.adobe.com: в меню, расхлопывающемся по клику на ваш юзерпик, будет ссылка API Tokens.

Screen_Shot_2018-12-14_at_14.49.12.png

Вы сможете сгенерировать себе новый API Token или узнать имеющийся.

Screen_Shot_2018-12-14_at_14.49.28.png

 

Удаление шрифтов в Adobe Fonts

Если вы удалите какие-то шрифты из своего Adobe Fonts web projects, они сразу же отключатся на вашем сайте и в превью Setka Editor.

 

Как добавить собственные шрифты?*

*Доступно только на Pro тарифах. 

Чтобы добавить кастомные шрифты, нажмите на кнопку Manage fonts. Загрузите файлы во вкладке Upload fonts (они должны быть в формате WOFF). После этого файлы можно переименовать. Чтобы файлы добавились в выпадающее меню выбора шрифтов, нажмите на кнопку Save в появившемся окне.  

Screen_Shot_2017-04-28_at_16.20.06.png

 

Как удалить ненужные шрифты

Нажмите Manage fonts. В появившемся окне во вкладках Google Fonts и Upload Fonts вы увидите бейджи загруженных шрифтов, при наведении на них появится крестик. Нажмите на него, чтобы удалить ненужные шрифты.

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

Screen_Shot_2017-04-28_at_16.25.09.png

 

Как изменить размер шрифта?

Чтобы изменить размер шрифта, например, в обычном тексте, нажмите Text Styles -> Paragraph -> Size. Вы можете задать размер шрифта в пикселях (px). То же самое можно сделать и с другими видами текста.

 

Как увеличить или уменьшить толщину шрифта?

Чтобы поменять толщину шрифта, например, в обычном тексте, нажмите Text Styles -> Paragraph -> Weight. Значение 400 — нормальная толщина, 700 — жирный текст.

 

Как регулировать высоту строки?

Чтобы изменить высоту строки, например, в обычном тексте, нажмите Text Styles -> Paragraph -> Line height. Вы можете задать высоту строки в процентах (%) от высоты шрифта. Это поможет вам сделать все правильно с точки зрения типографики.

 

 

Могу ли я задать параметры шрифтов отдельно для планшетов и смартфонов?

В Style Manager доступен просмотр стилей для разных устройств. Кнопки просмотра находятся в верхней части экрана.

Чтобы задать параметры шрифтов для планшета или смартфона, выберите тип устройства (Tablet / Mobile), затем вид текста (Paragraph / Small text / Large Header и тд), нажмите галочку Enable custom tablet styles и проставьте нужные параметры.

По умолчанию стили для планшетов и смартфонов будут такими же, как для Desktop.

 

  

Как использовать специальное оформление для bold и italic текста?

Вы можете использовать отдельные шрифты для жирного написания и курсива. Для форматирования шрифтов для bold, нажмите Text Styles > Paragraph / Small text / Large Header / Medium Header / Small Header / Small text > Custom appearance for Bold text.

Чтобы использовать отдельные шрифты для italic, нажмите Text Styles > Paragraph /Small text / Large Header / Medium Header / Small Header / Small text > Custom appearance for Italic text.

  Screen_Shot_2017-04-28_at_16.34.54.png

 

Использование особых стилей для bold и italic в интернете — это классический прием в типографике, который используется в книгах, журналах, газетах.

Есть случаи, когда недостаточно просто выделить просто жирным стилем, например, если нужно интереснее расставить акценты и сделать текст лучше для восприятия.

Особые стили для bold и italic текстов дают больше простора для маневра, больше свободы для создания красивого и удобочитаемого контента.

 

Какими стилями можно оформить ссылки?

Ссылки могут быть подчеркнутыми (Decoration > underline) или неподчеркнутыми (Decoration > none). Кроме того, вы можете настроить стили ссылок, выбрав для них отображение

заглавными буквами (Transform > uppercase) или отрегулировав межбуквенные расстояния (Letter spacing).

 

 

Подписи к изображениям и эмбедам

Подписи к изображениям и эмбедам оформляются в одном из заданных стилей (Text style > Paragraph / Large Header / Medium Header / Small Header / Small text). Вы можете выбрать цвет для подписей (Text style > Color).