Nel nostro post precedente , abbiamo discusso del fatto che, come designer, la selezione di un carattere tipografico adatto è essenziale per creare un design visivamente accattivante e leggibile.

Tuttavia, la scelta della giusta dimensione e gerarchia del carattere può essere complicata. È qui che entra in gioco la scala del tipo. La scala del tipo è un sistema che ti aiuta a organizzare e dare priorità ai caratteri nel tuo progetto.

Che cos'è una scala di tipo?

La scala del tipo è un sistema che ti aiuta a selezionare le dimensioni e gli stili dei caratteri appropriati per il tuo design. È una gamma di dimensioni dei caratteri che sono proporzionalmente correlate tra loro, creando un layout armonioso. La scala del tipo ti consente di creare un aspetto coerente per i loro progetti, rendendo più facile per gli utenti leggere e navigare attraverso i loro contenuti.

Come utilizzare la scala del tipo nel tuo progetto?

1. Scegli una dimensione del carattere di base: il primo passo nell'utilizzo di una scala di tipo è scegliere una dimensione del carattere di base. Un buon punto di partenza è 16 pixel, che è la dimensione del carattere predefinita per la maggior parte dei browser. Da questa dimensione di base, puoi determinare la dimensione degli altri caratteri nel tuo progetto.
2. Usa uno strumento di scala del tipo: ci sono molti strumenti di scala del tipo disponibili online che possono aiutarti a creare un layout armonioso e proporzionale. Alcuni popolari includono Grid Lover , Modular Scale e Type Scale Calculator. Questi strumenti ti consentono di selezionare facilmente le dimensioni dei caratteri appropriate per il tuo progetto.
3. Attenersi a numeri interi: quando si selezionano le dimensioni dei caratteri, è importante attenersi a numeri interi, ad esempio 18px, 20px e 24px. Evita di utilizzare dimensioni frazionarie come 18,5 px, in quanto possono rendere il tuo design irregolare e sbilanciato.
4. Prestare attenzione all'interlinea: quando si selezionano le dimensioni dei caratteri, è importante prestare attenzione all'interlinea. La spaziatura tra le righe può influire sulla leggibilità del testo, quindi assicurati di scegliere una spaziatura che integri la dimensione del carattere.

Ems e rems sono unità di misura relative nei CSS, mentre px è un'unità di misura assoluta. Ciò significa che ems e rems dipendono da altri valori nel progetto, mentre px è un valore fisso che non cambia.

Un em è uguale alla dimensione del carattere utilizzato. Quindi, se imposti la dimensione del carattere su 16px, 1em sarà uguale a 16px. Se imposti la dimensione del carattere su 20px, 1em sarà uguale a 20px. Ciò significa che le unità em si ridimensionano con la dimensione del carattere dell'elemento genitore, rendendolo un'unità flessibile e reattiva.

Rem (abbreviazione di "root em") è simile a em, ma invece di ridimensionarsi con la dimensione del carattere dell'elemento genitore, si ridimensiona con la dimensione del carattere dell'elemento radice, che in genere è l'elemento.

1rem = 16px, quindi dovresti utilizzare una dimensione di base del carattere di 16px, in modo tale che gli sviluppatori siano in grado di creare una conversione da PX a REM pulita e organizzata.

Solo perché un browser è impostato su 16px per impostazione predefinita, non significa che nessun utente non possa modificare le proprie preferenze su 24px o 32px per correggere l'ipovisione o la scarsa visibilità (ex riflesso dello schermo). Gli utenti possono modificare la dimensione del carattere root tramite l'impostazione del browser. Se basi le tue unità su REM, qualsiasi utente con una dimensione del carattere più alta vedrà un sito proporzionalmente più grande.

I bordi saranno più grandi, il padding sarà più grande, i margini saranno più grandi e tutto si ingrandirà in modo fluido.

Pertanto, quando si definisce la scala del tipo, è importante decidere quale sarà la dimensione del carattere di base per la visualizzazione desktop e la visualizzazione mobile e definire la gerarchia dei caratteri in modo tale che diventi facile gestirli a livello generale.

Ricorda, il grande design è tutto incentrato sui dettagli e la scala del tipo è solo uno dei tanti strumenti a tua disposizione per portare i tuoi progetti al livello successivo. Buona progettazione!