Ferramenta 09
Escala tipográfica fluida
Tamanhos de texto que crescem com a tela, sem media query. Sai em variáveis CSS com clamp() e em @theme do Tailwind v4.
Tipografia que respira em qualquer tela
Tipografia que respira em qualquer tela
Tipografia que respira em qualquer tela
Tipografia que respira em qualquer tela
Tipografia que respira em qualquer tela
Tipografia que respira em qualquer tela
Texto corrido para conferir a leitura em parágrafo, com acentuação: ação, coração, você.
Texto corrido para conferir a leitura em parágrafo, com acentuação: ação, coração, você.
Texto corrido para conferir a leitura em parágrafo, com acentuação: ação, coração, você.
| Nome | 360px | 1440px | Crescimento |
|---|---|---|---|
| 5xl | 47.8 | 106.6 | +123% |
| 4xl | 39.8 | 80.0 | +101% |
| 3xl | 33.2 | 60.0 | +81% |
| 2xl | 27.6 | 45.0 | +63% |
| xl | 23.0 | 33.8 | +47% |
| lg | 19.2 | 25.3 | +32% |
| base | 16.0 | 19.0 | +19% |
| sm | 13.3 | 14.3 | +7% |
| xs | 11.1 | 10.7 | -4% |
Variáveis CSS
/* escala fluida 360px → 1440px · 16px/1.2 → 19px/1.333 */
:root {
--text-5xl: clamp(2.986rem, 1.7606rem + 5.4462vw, 6.6622rem);
--text-4xl: clamp(2.4883rem, 1.6518rem + 3.7178vw, 4.9979rem);
--text-3xl: clamp(2.0736rem, 1.515rem + 2.4826vw, 3.7493rem);
--text-2xl: clamp(1.728rem, 1.3664rem + 1.607vw, 2.8127rem);
--text-xl: clamp(1.44rem, 1.2166rem + 0.9927vw, 2.1101rem);
--text-lg: clamp(1.2rem, 1.0724rem + 0.5673vw, 1.5829rem);
--text-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
--text-sm: clamp(0.8333rem, 0.8142rem + 0.0852vw, 0.8908rem);
--text-xs: clamp(0.6683rem, 0.7032rem + -0.0387vw, 0.6944rem);
}Tailwind v4 (@theme)
@import "tailwindcss";
@theme {
--text-5xl: clamp(2.986rem, 1.7606rem + 5.4462vw, 6.6622rem);
--text-5xl--line-height: 1;
--text-4xl: clamp(2.4883rem, 1.6518rem + 3.7178vw, 4.9979rem);
--text-4xl--line-height: 1;
--text-3xl: clamp(2.0736rem, 1.515rem + 2.4826vw, 3.7493rem);
--text-3xl--line-height: 1;
--text-2xl: clamp(1.728rem, 1.3664rem + 1.607vw, 2.8127rem);
--text-2xl--line-height: 1.1;
--text-xl: clamp(1.44rem, 1.2166rem + 0.9927vw, 2.1101rem);
--text-xl--line-height: 1.1;
--text-lg: clamp(1.2rem, 1.0724rem + 0.5673vw, 1.5829rem);
--text-lg--line-height: 1.25;
--text-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
--text-base--line-height: 1.5;
--text-sm: clamp(0.8333rem, 0.8142rem + 0.0852vw, 0.8908rem);
--text-sm--line-height: 1.5;
--text-xs: clamp(0.6683rem, 0.7032rem + -0.0387vw, 0.6944rem);
--text-xs--line-height: 1.5;
}
/* uso: <h1 class="text-4xl">… */Os valores usam rem + vw, então o texto continua respeitando o zoom do navegador. Abaixo da tela mínima e acima da máxima o tamanho trava.