Управление шрифтами и размерами шрифтов с Divi 5

Шрифты и типография задают тон для вашего сайта. Получение правильно, может помочь вашему бренду и улучшить читаемость. Divi 5 делает работу с шрифтами быстро и легкой. Благодаря новым функциям Divi, такими как дизайнерские переменные и предустановки группы опционов, настройка шрифтов становится простым.

Этот пост учит вас, как управлять шрифтами и размерами шрифтов в Divi 5, создавая отзывчивую типографику, которая прекрасно масштабируется на разных устройствах.

Divi 5 готов к новым сборкам веб -сайта, но мы ставим последние штрихи в систему обратной совместимости. В то же время, удерживайте обновление сайтов, построенных на D4. Мы сообщим вам, когда это изменение произойдет.

Соображения при просмотре через шрифты для нового веб -сайта

При запуске нового сайта выбор шрифтов формирует первое впечатление пользователя. Рассмотрим эти моменты, чтобы гарантировать, что ваша типография поддерживает ваш контент:

• Читаемость : выберите четкие шрифты, особенно для текста тела.
• Последовательность : Ограничьте свои шрифты - две или три работают лучше всего, по крайней мере, один для заголовков и один для тексного текста.
• Отзывчивость : убедитесь, что шрифты адаптируются к различным размерам экрана (в идеале от 320px до 1440px).
• Совместимость : выберите веб-безопасные или популярные шрифты, чтобы избежать проблем с отображением.

Как управлять шрифтами и размерами шрифтов в Divi 5

Давайте использовать готовый макет из библиотеки Диви. Мы выберем компоновку целевой страницы из пакета «Business CV» и обновить типографику, используя новые функции Divi 5. Если у вас есть существующий сайт Divi 5, но вы хотите улучшить его типографику, вы можете выполнить эти же шаги, не используя этот макет.

Шаг 1: Выбор пары шрифтов

Хорошие шрифты сочетают стиль и читаемость. Шрифты Google также являются безопасной ставкой, поскольку они встроены в Divi и просты в использовании.

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

Шаг 2: Настройка шрифтов для первичного заголовка и тела

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

Есть две переменные шрифта по умолчанию для ваших основных заголовков и шрифтов тела. Перейдите в раздел шрифтов и установите « Poppins » в качестве шрифта заголовка и « Робото » в качестве шрифта тела.

Установите свои шрифты на все, что соответствует вашему дизайну и требованиям к бренду

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

Обязательно сохраните свои переменные при их введении

Шаг 3: Создание размеров шрифтов

Теперь для более вовлеченной части. Лучше всего продумать, как сделать вашу типографику хорошо выглядеть на каждом размере устройства. С Divi 5 у вас есть два варианта. Первый и предпочтительный вариант - использовать Clamp (), а второй - установить шрифт несколько раз в различных точках отдыха.

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

Жидкая типограмма с зажимом ()

Clamp () позволяет установить минимальное значение, предпочтительное значение и максимальное значение. В другом посте мы углубимся в зажим () и предоставляем простой способ выяснить эти значения. Но вот пример:

Этот макет имеет размер H1 по умолчанию и уникальный (и больший) размер H1 для имени человека в первом разделе. Мы перенесли тот же принцип в диаграмме вышеупомянутого размера и добавили меньший вариант шрифта тела.

Вы можете проверить свой размер шрифта в простом HTML -документе, чтобы увидеть вещи в изоляции (это также можно сделать внутри Divi). Вот как выглядит вышеупомянутый размер шрифта с сочетанием шрифтов.

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

Фиксированные единицы с точками останова

CLAMP () является наиболее универсальным вариантом для размера шрифтов, но многие пользователи по -прежнему используют фиксированные значения, такие как пиксели или REM. Вы можете использовать их вместе с настраиваемыми точками останова Диви, чтобы масштабировать свой шрифт вверх и вниз по мере необходимости.

Поскольку ваше количество значений для аналогичного эффекта в три тройки при использовании его таким образом (вместо 10 значений Clamp () выше, это будет 30 отдельных значений). Не обязательно рекомендуется заполнить менеджер переменной этими значениями, но вы можете, если хотите,

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

Шаг 5: Добавление размеров шрифтов от менеджера переменных в пресеты

С установленными (или, по крайней мере, сформулированными) вашими номерами), пришло время применить их к пресетам. Одним из лучших вариантов использования для Prestes Preset является типография. Вы можете создать семь (7) предустановленных групп, которые вы можете использовать для любого модуля, который использует поле «Заголовок/ заголовок » (например, заголовок, обозначение, аккордеон и личные модули).

То же самое относится и к группе опций текста. Я могу установить две (2) пресеты (одна для моего нормального и одно для моего маленького текста тела), и любой модуль, который использует группу опций текста, может использовать эти стили. Для заголовков и стилей текста это гораздо более эффективно, чем применение этих стилей в качестве предварительных настроек элементов ко всем различным модулям, которые вы можете использовать на всем вашем веб -сайте.

Присвоение фиксированных значений на точки останова

В приведенном ниже видео показаны основные шаги, если вы выбрали фиксированные значения в нескольких точках останова. Нажмите на текстовый модуль, перейдите на вкладку «Дизайн» , проведите за группу опций текста, нажмите значок OG , создайте новую предустановку и примените свои стили в каждой точке перерыва. Прокрутите в нижней части правой боковой панели и сохраните свой предустановку ( очень важная ). Повторите это для столько вариантов текста, сколько вы придумали (например, маленькие, обычные и большие варианты).

Назначьте предварительную установку OG, которую вы ожидаете использовать наибольшее количество в качестве задачи по умолчанию для этой группы опций. Если вы видите звезду рядом с ней, то есть ваше текущее значение по умолчанию (это будет применяться на вашем сайте, предполагая, что никакие другие стили модулей или предварительные устройства элемента не применяются повсюду).

Присвоение функций clamp () (проще)

Процесс похож при использовании проектной переменной с функцией Clamp (), но намного проще. В примере видео ниже мы установили два размера заголовка на уровне группы. Единственное отличие от вышесказанного заключается в том, что мы не вставляем значения, а используем переменные, которые мы настраивали ранее. При настройке своих предустановков OG убедитесь, что выбранные шрифты по умолчанию и установите цвета, как вы хотите. Некоторым людям нравится устанавливать цвета на уровне модуля, но это зависит от вас.

Вы установите каждый уровень заголовков H1-H6 в качестве нового предварительной установки группы опций .

Примените эти пресеты на заголовки макета, используя созданные вами предустановки группы опционов. Красота предварительных настроек групп опционов заключается в том, что они работают в модулях в этой группе опционов, таких как модули текста, рекламирования и заголовка.

Лучшие практики для шрифтов в Divi 5

Чтобы максимизировать вашу типографику, помните эти советы:

• Всегда устанавливайте глобальные переменные шрифта рано.
• Используйте последовательные интервалы и размеры (да, вы можете установить расстояние между буквами и высоту линии в качестве переменных дизайна).
• Регулярно предварительно просмотрите адаптивные представления по размерам экрана.
• Избегайте слишком много шрифтов или весов шрифтов.

Типография в Divi 5 - это дыхание свежего воздуха

Теперь у вас есть полная система типографии благодаря новейшим функциям Divi.

Шрифты живут как переменные дизайна. То же самое с размерами шрифтов, когда вы используете Clamp (). Или, если вы хотите использовать все семь из этих настраиваемых точек отдыха, вы также можете выбрать этот маршрут.

Опционные предварительные устройства предварительно применяют эти варианты без особых усилий на весь ваш сайт. Настройка размеров шрифтов по всей сборке очень проста, поскольку они установлены в качестве переменных дизайна. Независимо от того, что ваши дизайны останутся острыми, и ваше время сборки будет сокращаться.

Divi 5 запустил много новых функций, которые обновляют вашу систему дизайна. Начните строить новые сайты в Divi 5 сегодня, чтобы воспользоваться всеми последними функциями. Мы рекомендуем ждать немного дольше, чтобы перенести существующие сайты в Divi 5.