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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

Для добавлении новых шрифтов нажмите 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.

 

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

*Доступно только на 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).