Dimensioni dei font CSS

Esistono molti modi per personalizzare la dimensione del carattere CSS. Una parte significativa dei web designer usa ancora i pixel, ma questo non è l'approccio giusto. Pixel è un'opzione troppo semplice che non è sempre adatta per il layout delle pagine reattive. Prendi in considerazione tutti i metodi esistenti per ridimensionare un font CSS.

Cos'è questa "dimensione del carattere"?

Esiste un'opinione secondo cui le dimensioni indicano la dimensione del carattere più grande del carattere specificato. Non lo è. In effetti, il valore è incorporato nel carattere, ed è improbabile che sia in grado di misurarlo manualmente con un righello. Di solito la dimensione è leggermente più grande della distanza dalla cima della lettera più grande alla parte inferiore del più piccolo. Questo viene fatto per adattarsi a qualsiasi combinazione di caratteri in un determinato spazio. È anche importante specificare il parametro "line-height", altrimenti le lettere p, q e simili possono andare oltre.

pixel

L'opzione più comune. Installato come segue:

font-size: 16px;

Il vantaggio dei pixel è solo uno: nessuna difficoltà con il valore. Niente da contare. Quale dimensione è specificata, tale e sarà caratteri sullo schermo. Lo svantaggio è la difficoltà con le dimensioni dei caratteri CSS reattivi. Non sarà possibile stabilire rapporti tra diverse dimensioni.

Il numero di "pixel" può essere attribuito a unità obsolete. Questi includono pc, cm, mm e pt. Quindi, mm è un millimetro, cm è un centimetro. Pt e pc: tipografia e picco tipografico. Perché questi metodi sono obsoleti? Poiché non erano "indipendenti", il browser ricalcolato automaticamente i valori in pixel. Di conseguenza, i problemi erano gli stessi di px. A proposito, in un cm dal punto di vista del browser contiene 38px.

Em: il valore dipende dalla dimensione del font dell'elemento genitore

È semplice Supponiamo di avere un div per il quale la dimensione del font è impostata su 16px. Contiene un altro div per il quale la dimensione del font CSS è impostata su 2em. Di conseguenza, 1em sarà 16px (cioè, la dimensione del font dell'elemento genitore), e 2em sarà due volte più grande, cioè 32px.

Nell'elemento padre, puoi anche impostare il valore in em. In questo caso, dipenderà dalla dimensione base specificata nel corpo o html. Em è la dimensione relativa del carattere CSS che aumenterà e diminuirà con la dimensione dei caratteri dell'elemento genitore. Questo è conveniente: per modificare il valore in un numero elevato di punti, è sufficiente modificare i parametri del genitore.

Per i professionisti: ex e ch

Praticamente non usato dai soliti progettisti e sviluppatori di frontend. Ex è il valore del simbolo "X" e ch è il simbolo di "0". Potrebbero non esserci tali caratteri nel font selezionato, ma i parametri possono ancora essere utilizzati. Non è noto per alcuni casi per i quali tali dimensioni sono più adatte. Prova a sperimentare, forse sarà più conveniente per te? Tuttavia, ricorda che ex e ch sono unità "condizionali", quindi la regolazione fine dei parametri sarà difficile.

Interesse: l'opzione più confusa

Come impostare la dimensione del carattere in CSS come percentuale? Sembrerebbe che tutto sia semplice: basta specificare il parametro desiderato e inserire dopo di esso il simbolo "%". Ma qui arriva la domanda importante: "Quale sarà la percentuale della dimensione data?"

Nella maggior parte dei casi, il parametro viene calcolato in base alla dimensione del genitore, ma non sempre. Se si imposta la proprietà margin-left, la percentuale verrà calcolata in base alla larghezza del blocco padre. Se si imposta l'altezza della linea, la percentuale verrà presa in base alla dimensione del carattere corrente.

L'impostazione dei parametri in percentuale richiede un'attenta sperimentazione. Fai attenzione con questa unità di misura, in quanto può facilmente cambiare l'aspetto della composizione.

Rem: unità semplice e versatile

Quanto sopra sono molti modi per personalizzare le dimensioni dei caratteri nei CSS, ma nessuno di questi è veramente conveniente. Per semplificare il lavoro, è stato inventato il parametro rem, che viene calcolato in base al valore specificato per il tag html.

È più facile di quanto sembri a prima vista. Ad esempio, per il tag html, in cui viene eseguito il wrapping di tutto il contenuto della pagina, si imposta il carattere CSS 16px. Di conseguenza, 1rem ora sarà 16px. 2rem è 32px, ecc. È possibile utilizzare qualsiasi proporzione: 0.2rem, 1.1rem, 100rem ... Il browser ricalcola attentamente i parametri.

In html, non puoi toccare nulla, perché i browser stessi impostano una determinata dimensione del carattere per il wrapper. Ma per una regolazione più approfondita, è meglio ridefinire l'indicatore. Il vantaggio principale di rem è che puoi facilmente ridimensionare i font in un posto specifico senza influenzare altri elementi. Tuttavia, ricorda che i browser più vecchi (IE sotto la versione 9) non supportano questo indicatore.

Vw e vh: opzioni esotiche

Le più recenti unità di misura create per dispositivi mobili. Vw è l'1% della larghezza della finestra sulla quale l'utente sta visualizzando il tuo sito. Vh - 1% della sua altezza. La dimensione dei caratteri verrà automaticamente ridimensionata in base allo schermo del dispositivo del visitatore. Per scegliere la dimensione appropriata durante il layout, aumentare e ridurre le dimensioni dello schermo.

Riassumendo

È stato a lungo possibile non impostare la dimensione dei caratteri CSS solo in px. È molto più comodo usare rem, vh e vw (specialmente con responsive design), così come em. Ognuna di queste opzioni ha i suoi vantaggi e svantaggi, quindi controlla diversi metodi prima dell'uso. I web designer moderni spesso usano rem in quanto questo è uno dei modi più semplici per cambiare la dimensione del font. Tuttavia, ha un inconveniente: i componenti diventano meno modulari.

Si raccomanda di seguire 2 regole:

• se le proprietà devono essere ridimensionate rispetto alla dimensione del carattere, em è la scelta migliore;
• in altri casi, si consiglia rem.

Em è spesso usato per impostare padding e dimensioni dei margini. Prestare attenzione se si specifica in esso la dimensione dei caratteri per gli elenchi, poiché a causa del grande annidamento, i caratteri potrebbero essere illeggibili.