Adattare gli aspetti tipografici alle preferenze degli utenti con i CSS

Un metodo per adattare un carattere alle preferenze degli utenti, in modo che possano leggere i tuoi contenuti nel massimo comfort.

Adam Argyle

Portare l'utente nel processo di progettazione è stato un momento entusiasmante per utenti, designer e sviluppatori. Gli utenti possono accedere alla tua esperienza e iniziare a consumare contenuti senza problemi, con le loro preferenze integrate nel risultato del design.

Questo post del blog illustra l'utilizzo delle query supporti CSS con un carattere variabile per personalizzare ulteriormente l'esperienza di lettura. Il grado e lo spessore dei caratteri possono essere personalizzati con font-variation-settings, consentendo il microtuning in base a varie preferenze e contesti, ad esempio una preferenza per la modalità scura o l'alto contrasto. Possiamo prendere queste preferenze e personalizzare un carattere variabile per l'esperienza utente.

• La modalità Buio ha una gradazione leggermente ridotta.
• L'alto contrasto prevede un carattere più grassetto.
• Con un basso contrasto, il carattere è più sottile.

Seguici per capire ogni parte del carattere CSS e della variabile che abilita questo momento significativo.

Configurazione

Per aiutarti a concentrarti sui valori delle impostazioni CSS e delle varianti dei caratteri, ma anche per darci qualcosa da leggere e vedere, ecco il markup che puoi utilizzare per visualizzare l'anteprima del lavoro:

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

Senza aggiungere CSS, le dimensioni dei caratteri si adattano già alle preferenze dell'utente. Ecco un video di un'altra demo che mostra come l'impostazione di font-size in pixel contravvenga alle preferenze dell'utente e perché è consigliabile impostare la dimensione del carattere in rems:

Infine, per centrare e supportare la demo, un po' di CSS:

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

  h1 {
    text-wrap: balance;
  }
}

Questa configurazione di prova ti consente di iniziare a testare e implementare questa funzionalità di UX di tipografia.

Caricamento del carattere variabile Roboto Flex

La strategia adattiva dipende da un carattere variabile con assi significativi per la personalizzazione, in particolare hai bisogno di GRAD e wght. Le preferenze dell'utente adattivo di destinazione descritte in questo articolo riguardano la combinazione di colori e il contrasto, entrambi personalizzati in base alle preferenze dell'utente.

Carica il carattere variabile utilizzando l'API @font-face di CSS:

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

Ora applica il carattere ad alcuni contenuti. Il seguente CSS lo applica a tutto:

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

Proprietà CSS personalizzate e query sui media per la vittoria

Dopo aver caricato il carattere, puoi eseguire query in base alle preferenze dell'utente e adattare le impostazioni del carattere della variabile in base alle necessità.

Impostazioni in assenza di preferenze (impostazione predefinita)

I seguenti stili iniziali saranno gli stili predefiniti o, in altre parole, gli stili per gli utenti senza preferenze.

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

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

Impostazioni quando la preferenza riguarda l'alto contrasto

Per gli utenti che hanno indicato una preferenza per l'alto contrasto nelle impostazioni di sistema, aumenta il valore --base-weight da 400 a 700:

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

Ora c'è più contrasto durante la lettura.

Impostazioni quando la preferenza è per un contrasto basso

Per gli utenti che hanno indicato una preferenza per il contrasto basso nelle impostazioni di sistema, diminuisci il valore --base-weight da 400 a 200:

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

Ora il contrasto è inferiore durante la lettura.

Impostazioni quando la preferenza è per la modalità Buio

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

Ora le differenze percettive tra la luce sul buio e l'oscurità della luce sono state prese in considerazione.

Tutti insieme

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

Oppure, per divertimento, tutto insieme con il nidificazione 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 }
  }
}

Il risultato è un'esperienza di lettura che adatta il carattere in base alle preferenze dell'utente. Il codice sorgente completo è disponibile di seguito nel codepen.