6XC

Calcolatore di Tipografia Fluida — CSS clamp()

Genera un clamp() CSS che scala la dimensione del font in modo fluido tra due larghezze di viewport — senza bisogno di breakpoint.

745 visualizzazioni

CSS —

Anteprima dal vivo (ridimensiona la finestra):

Almost before we knew it, we had left the ground.

La Ricetta di clamp()

La tipografia fluida interpola linearmente tra una dimensione minima su un viewport piccolo e una massima su uno grande: pendenza = (font max−min) ÷ (viewport max−min), poi font-size: clamp(minRem, intercettaRem + pendenza·100vw, maxRem). Per 16→24 px tra viewport 375→1280 px, il risultato è clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — esattamente 16 px a 375, esattamente 24 px a 1280, fluido nel mezzo, bloccato fuori dall'intervallo.

La parte in rem del valore preferito è importante per l'accessibilità: una formula puramente in vw ignora completamente l'impostazione della dimensione del font del browser dell'utente, mentre l'intercetta in rem mantiene funzionanti lo zoom e le preferenze per il testo grande. Questo calcolatore genera sempre la forma mista.

Domande Frequenti

Quale intervallo di viewport dovrei usare?

Da 375 px (un telefono comune) fino alla larghezza massima del tuo contenuto — spesso 1200-1440 px. Sotto/sopra l'intervallo, clamp() si blocca al min/max, quindi nulla si rompe su smartwatch o schermi ultra-wide.

Posso usarlo anche per la spaziatura?

Sì — la stessa matematica funziona per padding, margini e gap. Genera con i tuoi valori min/max di spaziatura e inserisci il clamp() in una custom property.

Perché il mio testo non è esattamente alla dimensione minima sul mio telefono?

Controlla l'effettiva larghezza del viewport CSS (pixel del dispositivo ÷ DPR). Un telefono da "390 px" è più largo dell'inizio dell'intervallo di 375 px, quindi la dimensione è già leggermente sopra il minimo — di proposito.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera