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

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

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

 

 

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

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

 

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

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

 

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

Чтобы добавить новые шрифты для оформления поста, выберите их из библиотеки 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, введите название нужного шрифта в строке поиска и затем выберите его.

 

 

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

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

После выбора Typekit нужно ввести свой Typekit API Key.  

 

typekit_token.png

 

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

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

 

Как узнать мой Typekit API Key?

Этот ключ можно получить в вашем аккаунте на typekit.com: зайдите в настройки аккаунта и дальше в API Access. Нажмите на кнопку Manage, и вы сможете сгенерировать себе новый API Key или узнать имеющийся.

 

typekit_api_key.png

 

Изменения в Typekit

Если вы внесли изменения в свой Typekit (добавили новые шрифты), зайдите в настройки аккаунта нажмите на кнопку Sync kits рядом с именем вашего кита. Тогда все изменения обновятся в Style Manager. Затем зайдите Add font в Style Manager и выберите новый kit.  

Если в kit добавился новый шрифт, он появится в списке.

Если вы удалите какие-то шрифты из своего Typekit, они сразу же отключатся в WordPress и в превью Setka Editor (это особенность работы Typekit со всеми сервисами). Из списка шрифтов в Style Manager шрифт удалится только после того, как вы нажмете на кнопку Sync kits. В этом случае удаленный шрифт пропадет из списка, а вам придет уведомление при использовании стиля, к которому подключен kit с удаленным шрифтом.

 

 

Что нужно сделать, чтобы шрифты из Typekit отображались в просмотре?

Чтобы шрифты из Typekit отображались в окне просмотра в правой части экрана Style Manager, домен https://editor.setka.io должен быть прописан в настройках kit на typekit.com.

 

typekit_settings.png

 

Setka Editor сам отправит домен по вашему API, но если у вас уже прописано 10 доменов в kit, вам придет уведомление о том, что нужно удалить один из доменов и добавить домен editor.setka.io вручную.

Вы можете сделать это в настройках kit в аккаунте на typekit.com.

 

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

Чтобы добавить кастомные шрифты, нажмите на кнопку 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).