Adattare gli aspetti tipografici alle preferenze degli utenti con i CSS

Un metodo per adattare un carattere al carattere dell'utente preferenze, in modo che si sentano a proprio agio nel leggere i contenuti.

Adam Argyle

Portare l'utente nel processo di progettazione è stato un momento entusiasmante per gli utenti, designer e sviluppatori. Gli utenti possono fruire della tua esperienza e iniziare senza problemi contenuti consumati, le loro preferenze ben integrate nei risultati della progettazione.

Questo blog post esplora l'utilizzo di query multimediali CSS con un carattere variabile da personalizzare ulteriormente l'esperienza di lettura. Il grado e lo spessore del carattere possono essere personalizzati con font-variation-settings, che consente la microottimizzazione in base a diverse preferenze e contesti, come la preferenza per la modalità Buio o l'alto contrasto. Possiamo prendere queste preferenze e personalizzare un carattere variabile per l'esperienza utente.

• La modalità Buio ottiene una gradazione leggermente ridotta.
• Un contrasto elevato diventa più grassetto.
• Un carattere più sottile diventa un carattere più sottile.

Seguite la procedura per comprendere ogni parte del carattere CSS e delle variabili che consentono in questo momento importante.

Recupero della configurazione in corso...

Per concentrarci sui valori dell'impostazione CSS e delle varianti di carattere, ma anche fornirci 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 funziona l'impostazione di font-size in pixel eliminare le preferenze dell'utente e il motivo per cui è consigliabile impostare la dimensione del carattere in rems:

Infine, per centrare e supportare la demo, abbiamo bisogno di un piccolo CSS:

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

  h1 {
    text-wrap: balance;
  }
}

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

Caricamento del carattere della variabile Roboto Flex

La strategia adattiva dipende da un carattere variabile con assi significativi per personalizzazione, nello specifico hai bisogno di GRAD e wght. L'utente adattivo target le preferenze di questo articolo riguardano la combinazione di colori e il contrasto, entrambi personalizzerà questi assi in base alle preferenze dell'utente.

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

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

Quindi, applica il carattere ad alcuni contenuti. Il seguente CSS la applica a tutto:

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

Proprietà personalizzate CSS e query multimediali per la vittoria

Dopo aver caricato il carattere, puoi eseguire query in base alle preferenze dell'utente e adattare la variabile impostazioni dei caratteri in modo che corrispondano.

Impostazioni in assenza di preferenze (impostazione predefinita)

I seguenti stili iniziali saranno gli stili predefiniti o un altro modo di 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 nel proprio sistema aumenta il valore --base-weight da 400 a 700:

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

Ora il contrasto è maggiore durante la lettura.

Impostazioni quando la preferenza è per il basso contrasto

Per gli utenti che hanno indicato una preferenza per il basso contrasto nel proprio sistema impostazioni, riduci 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 la luce sul buio sono state preso 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, il tutto insieme con la nesting dei 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. Il codice sorgente completo è disponibile di seguito nel codepen.