Corso di CSS / Font CSS, dimensioni del testo e interlinea

Usa font-family per definire una lista di font di riserva, font-size per impostare la dimensione del testo e line-height per controllare lo spazio tra le righe. Un'altezza della linea senza unità si adatta alla dimensione del carattere di ciascun elemento, rendendo più facile gestire gli stili di testo ereditati.

Definisci una lista ordinata di caratteri di riserva

body {

  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;

}

Il browser controlla l'elenco dei font in ordine. Se un font non è disponibile o manca di un carattere, un altro font può renderizzare quel carattere, quindi una frase può usare diversi font. sans-serif è una famiglia generica di font senza grazie, cioè senza i piccoli tratti ornamentali alle estremità delle lettere; non è il nome di un singolo font. Metti tra virgolette i nomi dei font che contengono spazi.

Elencare un font in font-family non lo scarica. Questo esempio utilizza font installati e non carica alcun font web separato. Per utilizzare un font web, fornisci il suo file effettivo tramite @font-face o un foglio di stile del provider, e controlla l'URL e l'autorizzazione per utilizzarlo. Vedi MDN: famiglia di font.

Scegli la dimensione e il peso del font per ogni ruolo

rem si basa sulla dimensione del font in HTML. Diverse preferenze del browser possono portare a valori in pixel diversi per lo stesso 1rem. Prima di cambiare il testo in px fissi perché il testo sembra piccolo, controlla il valore radice e il font effettivo. Anche se la dimensione è la stessa, la dimensione visiva e la posizione della divisione delle righe variano a seconda del design del font. Quando si seleziona un'unità, distingui prima tra Colori e unità CSS: px, em, rem e percentuali.

400 di solito corrisponde a normal, e 700 corrisponde a bold. I risultati variano a seconda del peso fornito dal font, e i pesi mancanti possono essere sostituiti con valori vicini o sintetizzati. I significati importanti nel documento sono espressi usando strong di HTML, e lo spessore visivo è controllato tramite CSS. Non tutte le lettere in grassetto hanno un significato semantico.

Confronta l'ereditarietà dell'altezza della linea senza unità e con unità em

line-height aiuta a determinare l'altezza di una linea; non significa semplicemente lo spazio vuoto tra i caratteri, e non è la stessa cosa dell'altezza del glifo. Usa margin separatamente per lo spazio tra i paragrafi. Per ulteriori dettagli, vedi Stile dei paragrafi e degli elenchi CSS.

Confronta quando la dimensione del font del genitore è 16px e quella del figlio è 32px. Con line-height: 1.6 sul genitore, il figlio eredita il numero 1.6 e lo applica al proprio font di 32px: l’interlinea risultante è 51,2px. Con line-height: 1.6em, invece, il figlio eredita la lunghezza di 25,6px già calcolata sul font di 16px del genitore. Se le lettere grandi dell’elemento figlio occupano più righe, le righe potrebbero apparire affollate o sovrapposte.

Questi calcoli di ereditarietà presumono che il figlio non abbia una dichiarazione line-height separata. Un valore dichiarato sul figlio ha la precedenza su uno ereditato. Un valore di line-height senza unità rende più facile regolare le dimensioni dei titoli e di altri testi pur mantenendo l'altezza della linea proporzionale. Vedi MDN: altezza della linea.

Limitare la larghezza di lettura

max-width: 65ch limita la larghezza di lettura usando la larghezza di avanzamento del glifo “0” del font. Non garantisce esattamente 65 caratteri per riga. L'effettivo a capo dipende dal font, dal peso, dai caratteri e dalla larghezza disponibile. Scegli una larghezza utile leggendo paragrafi lunghi realistici.

Il riferimento alla lunghezza CSS definisce unità relative ai font, incluso ch, e spiega le loro misure di riferimento. Vedi MDN: length.

Controlla i font renderizzati e i valori calcolati

Salva l'intero codice qui sotto come UTF-8 in fonts.html e aprilo nel tuo browser. Sono inclusi sia paragrafi con font piccoli sia paragrafi di confronto da 32px in modo da poter verificare la relazione tra dimensione del font e interlinea.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Compare fonts and line spacing</title>
  <style>
    html { font-size: 100%; }
    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
    main { max-width: 65ch; }
    h1 { font-size: 2rem; font-weight: 700; }
    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
    .unitless { line-height: 1.6; }
    .length { line-height: 1.6em; }
    .large { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden fonts</h1>
    <p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
    <h2>Unitless line height</h2>
    <div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
    <h2>Line spacing specified by em</h2>
    <div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
  </main>
</body>
</html>

1. Seleziona il paragrafo del body negli Strumenti per sviluppatori. Il font-family calcolato è una lista di candidati e non garantisce che sia il nome effettivo del font in uso. In Chrome·Edge, puoi controllare i font effettivamente utilizzati in Rendered Fonts sotto Computed. Altri browser possono avere strutture di menu diverse, come un pannello dedicato ai font.
2. Confronta l'altezza della linea calcolata di due paragrafi .large. Il primo ha un line-height risolto di 51,2px e il secondo di 25,6px. Nella regola del secondo genitore cambia 1.6em in 1.6 per vedere se la differenza scompare, poi ripristina.
3. Cambia l'altezza della linea di .copy rispettivamente a 1.2 e 1.8. Assicurati che la posizione della linea cambi mantenendo la dimensione del carattere. È difficile notare la differenza guardando solo frasi brevi di una riga, quindi usa paragrafi lunghi.
4. Cambia la larghezza massima di main a 45ch. Controlla se il paragrafo va a capo prima e poi ripristina a 65ch. Se la larghezza della finestra è già abbastanza stretta, cambiare il limite superiore può fare poca differenza.

La guida Chrome DevTools ai font locali spiega anche come ispezionare la sezione Rendered Fonts. Se il font previsto manca, verifica la sua installazione e i caratteri supportati. Per un font web collegato separatamente, ispeziona la sua risposta e eventuali errori di blocco nella rete. Un font installato localmente può essere utilizzato senza una richiesta di rete, quindi una richiesta assente da sola non indica un malfunzionamento del font.