Scala tipografica interattiva
Anteprima una scala di tipografia modulare con dimensioni di base regolabili, rapporto, font e altezza della linea. Esportazione CSS dimensioni per il testo del corpo e sei livelli di intestazione.
Tipografia CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Il testo esportato resta in inglese; i tuoi dati vengono mantenuti come inseriti.
Non c'e' segnale. Niente crediti per l'IA. Questo strumento assembla l'output nel tuo browser.
Da un'idea a qualcosa di utile.
- 01
Scegli un carattere, dimensione base e rapporto modulare.
- 02
Ispezionare le dimensioni delle voci e la spaziatura dei paragrafi.
- 03
Scarica CSS variabili per la scala corrente.
Un po' di contesto.
Una scala modulare moltiplica una dimensione del carattere base per un rapporto ripetuto. Questo parco giochi calcola una gerarchia delle voci di sei livelli più corpo e testo piccolo. Le dimensioni sono valori di pixel espliciti per un punto di partenza; rivedere il comportamento reattivo e zoom prima di utilizzarli in produzione.
Buone domande.
Fa il CSS caricare il carattere selezionato?
No. Nomina il carattere e fornisce le famiglie fallback. Carica o ospita il carattere scelto nella tua applicazione.
Queste dimensioni sono reattive?
L'esportazione contiene dimensioni fisse. Adapt loro ai vostri punti di rottura o sistema di tipo fluido dopo aver testato il contenuto reale.