Адаптация типографики к предпочтениям пользователя с помощью CSS

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

Adam Argyle

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

В этой записи блога рассматривается использование медиазапросов CSS с вариативным шрифтом для ещё большей адаптации к условиям чтения. Начертание и насыщенность шрифта можно настроить с помощью font-variation-settings , что позволяет выполнять микронастройку с учётом различных предпочтений и контекста, например, выбора тёмного режима или высокой контрастности. Мы можем использовать эти настройки и адаптировать вариативный шрифт под определённый пользовательский опыт.

• В темном режиме градация немного снижена.
• Высокая контрастность достигается за счет более жирного шрифта.
• Низкий контраст означает более тонкий шрифт.

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

Начало настройки

Чтобы помочь нам сосредоточиться на значениях CSS и настроек вариантов шрифта, а также дать нам что-то для чтения и просмотра, вот разметка, которую вы можете использовать для предварительного просмотра работы:

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

Размер шрифта уже адаптивен к предпочтениям пользователя без добавления CSS. Вот видео из другой демонстрации, показывающее, как установка font-size в пикселях сведет на нет любые пользовательские настройки, и почему следует устанавливать размер шрифта в единицах измерения (rem):

Наконец, для центрирования и поддержки демонстрации немного CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

Эта демонстрационная настройка позволит вам начать тестирование и реализацию этой замечательной UX-функции типографики.

Загрузка вариативного шрифта Roboto Flex

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

Загрузите переменный шрифт с помощью API CSS @font-face :

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

Затем примените шрифт к некоторому контенту. Следующий CSS-код применяет его ко всему:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

Пользовательские свойства CSS и медиа-запросы для победы

После загрузки шрифта вы можете запросить пользовательские настройки и соответствующим образом адаптировать параметры переменного шрифта.

Настройки при отсутствии предпочтений (по умолчанию)

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

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Настройки, когда предпочтение отдается высокой контрастности

Для пользователей, которые указали предпочтение высокой контрастности в настройках своей системы, увеличьте значение --base-weight с 400 до 700 :

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

Теперь при чтении стало больше контраста.

Настройки, когда предпочтение отдается низкой контрастности

Для пользователей, которые указали предпочтение низкой контрастности в настройках своей системы, уменьшите значение --base-weight с 400 до 200 :

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

Теперь контрастность при чтении меньше.

Настройки при выборе темного режима

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Теперь учтены различия в восприятии света на темном фоне и темного на светлом фоне.

Теперь все вместе

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Или, ради развлечения, все вместе с CSS-вложенностью :

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

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