Escala tipográfica interactiva
Previsualizar una escala de tipografía modular con tamaño base ajustable, ratio, fuente y altura de línea. Exportación CSS tamaños para el texto corporal y seis niveles de encabezado.
Tipografía 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; }El texto exportado sigue en inglés; tus datos se conservan tal como los escribiste.
No hay señalización. No hay créditos de inteligencia artificial. Esta herramienta monta su salida en su navegador.
De una idea a algo útil.
- 01
Elija una fuente, tamaño base y ratio modular.
- 02
Inspeccione los tamaños de las partidas y el espaciamiento del párrafo.
- 03
Descargar CSS variables para la escala actual.
Un pequeño contexto.
Una escala modular multiplica un tamaño de fuente base por una relación repetida. Este patio de recreo computa una jerarquía de seis niveles más cuerpo y texto pequeño. Los tamaños son valores de píxeles explícitos para un punto de partida; revisa el comportamiento receptivo y haz zoom antes de utilizarlos en producción.
Buenas preguntas.
¿Qué es lo que hace? CSS cargar la fuente seleccionada?
No. Nombra la fuente y suministra familias descompuestas. Cargar o hospedar la fuente elegida en su aplicación.
¿Son estos tamaños sensibles?
La exportación contiene tamaños fijos. Adaptarlos a sus puntos de ruptura o sistema de tipo líquido después de probar el contenido real.