Un metodo per adattare un carattere alle preferenze degli utenti, in modo che possano leggere i tuoi contenuti nel massimo comfort.
Il coinvolgimento dell'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 del carattere possono essere personalizzati
con font-variation-settings
, consentendo una microottimizzazione in base a una varietà di preferenze
e contesti, come una preferenza per la modalità Buio o un contrasto elevato. 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.
Continua a leggere per comprendere ogni parte del CSS e del carattere variabile che consentono 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 elimini tutte le preferenze dell'utente e perché dovresti impostare le dimensioni dei caratteri in rem:
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 demo ti consente di iniziare a testare e implementare questa straordinaria funzionalità UX tipografica.
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 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');
}
Ora applica il carattere ad alcuni contenuti. Il seguente CSS lo applica a tutto:
@layer demo.support {
body {
font-family: Roboto Flex;
}
}
Proprietà personalizzate CSS e query supporti per la vittoria
Una volta caricato il carattere, puoi eseguire query sulle preferenze dell'utente e adattare le impostazioni dei caratteri variabili in modo che corrispondano.
Impostazioni quando non sono presenti preferenze (valore predefinito)
I seguenti stili iniziali saranno gli stili predefiniti, o un altro modo di vederli, 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 è per l'alto contrasto
Per gli utenti che hanno indicato una preferenza per il contrasto elevato 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 basso contrasto nelle impostazioni di sistema, riduci il valore di --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, 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 dell'utente. Il codice sorgente completo è disponibile di seguito in Codepen.