Dostosowywanie typografii do preferencji użytkownika za pomocą CSS

Metoda dostosowania czcionki do preferencji użytkowników, aby mogli wygodnie czytać Twoje treści.

Adam Argyle

Wciągnięcie użytkownika w proces projektowania było ekscytujące dla użytkowników, projektantów i deweloperów. Użytkownicy mogą bez problemu korzystać z Twoich treści, korzystając z ich preferencji.

W tym poście na blogu omawiamy używanie zapytań multimedialnych CSS z fontem zmiennym w celu jeszcze lepszego dostosowania wygody czytania. Za pomocą font-variation-settings można dostosować grubość i rodzaj czcionki, co umożliwia dostosowanie ustawień do różnych preferencji i kontekstów, np. do trybu ciemnego lub wysokiego kontrastu. Możemy wykorzystać te preferencje i dopasować do nich zmienną czcionkę.

• W trybie ciemnym szarość jest nieco zmniejszona.
• Tekst o wysokim kontraście ma pogrubioną czcionkę.
• Cieńsza czcionka oznacza niski kontrast.

Czytaj dalej, aby zrozumieć poszczególne elementy CSS i czcionki zmiennych, które mają wpływ na ten ważny moment.

Konfiguracja

Aby ułatwić Ci skupienie się na wartościach ustawień CSS i wariacji czcionki, ale też dać Ci coś do przeczytania i zobaczenia, podajemy znaczniki, których możesz użyć do wyświetlenia podglądu:

<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>

Bez dodawania kodu CSS rozmiar czcionki jest już dostosowywany do preferencji użytkownika. Oto film z innego demonstracyjnego wystąpienia, który pokazuje, jak ustawienie font-size w pikselach spowoduje zastąpienie wszystkich ustawień użytkownika i dlaczego rozmiar czcionki powinien być podawany w remsach:

Na koniec, aby wyśrodkować i obsługiwać demo, potrzebujesz trochę kodu CSS:

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

  h1 {
    text-wrap: balance;
  }
}

Ta konfiguracja demonstracyjna umożliwia rozpoczęcie testowania i wdrażania tej wygodnej funkcji typograficznej.

Ładowanie zmiennej czcionki Roboto Flex

Strategia adaptacyjna zależy od zmiennej czcionki z wartościowymi osiami do personalizacji. W szczególności potrzebujesz GRAD i wght. Docelowe ustawienia adaptacyjne użytkownika w tym artykule dotyczą schematu kolorów i kontrastu. Oba te ustawienia będą dopasowywane do preferencji użytkownika.

Wczytaj czcionkę zmienną za pomocą interfejsu API @font-face:

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

Następnie zastosuj czcionkę do treści. Ten kod CSS stosuje się do wszystkiego:

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

Właściwości niestandardowe i zapytania o media w CSS

Po załadowaniu czcionki możesz wysłać zapytanie o preferencje użytkownika i odpowiednio do nich dostosować ustawienia czcionki zmiennej.

Ustawienia w przypadku braku ustawień (domyślne)

Te początkowe style będą stylami domyślnymi, a innymi słowy stylami dla użytkowników bez żadnych preferencji.

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

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

Ustawienia, gdy preferowany jest wysoki kontrast

W przypadku użytkowników, którzy w ustawieniach systemu zaznaczyli preferencję wysokiego kontrastu, zwiększ wartość --base-weight z 400 na 700:

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

Teraz podczas czytania jest większy kontrast.

Ustawienia, gdy preferowany jest niski kontrast

W przypadku użytkowników, którzy w ustawieniach systemu wybrali niski kontrast, zmniejsz wartość --base-weight z 400 na 200:

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

Teraz podczas czytania można zmniejszyć kontrast.

Ustawienia, gdy preferowany jest tryb ciemny

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

Teraz już brano pod uwagę różnice w porównaniu między światłem a ciemnością na ciemnym i ciemnym świetle.

Wszyscy razem

@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;
    }
  }
}

Albo, dla zabawy, wszystkie razem z zagnieżdżeniem 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 }
  }
}

W efekcie użytkownik ma możliwość czytania tekstu w odpowiednim do jego preferencji czcionce. Pełny kod źródłowy znajdziesz poniżej w Codepen.