Detos UI
Empezar
Fundamentos
Átomos
Moléculas
Organismos
Escala tipográfica de Untitled UI con la familia Inter: seis tamaños display para titulares y cinco tamaños de texto, cada uno en regular, medium y semibold.
Aplica la tipografía con el token completo en la propiedad font: var(--uid, 600 16px/24px "Inter", sans-serif).
Liga font y color en cada ww-text: no los hereda del contenedor.
Display para titulares de página y marketing; text para interfaz y lectura.
Escribir tamaños sueltos (15px, 22px): rompe la escala.
Usar display por debajo de 24px o text por encima de 20px.
Poner texto de lectura en semibold: reserva el semibold para títulos, etiquetas y botones.
Titulares de página, portadas y cifras grandes. Siempre en semibold.
display/2xl-semibold
600 72px/90px · Inter
Detos UI
display/xl-semibold
600 60px/72px · Inter
Detos UI
display/lg-semibold
600 48px/60px · Inter
Detos UI
display/md-semibold
600 36px/44px · Inter
Detos UI
display/sm-semibold
600 30px/38px · Inter
Detos UI
display/xs-semibold
600 24px/32px · Inter
Detos UI
Interfaz y lectura. Cada tamaño en regular (lectura), medium (etiquetas) y semibold (títulos y botones).
text/xl-semibold
600 20px/30px · Inter
Diseña interfaces claras y accesibles.
text/xl-medium
500 20px/30px · Inter
Diseña interfaces claras y accesibles.
text/xl-regular
400 20px/30px · Inter
Diseña interfaces claras y accesibles.
text/lg-semibold
600 18px/28px · Inter
Diseña interfaces claras y accesibles.
text/lg-medium
500 18px/28px · Inter
Diseña interfaces claras y accesibles.
text/lg-regular
400 18px/28px · Inter
Diseña interfaces claras y accesibles.
text/md-semibold
600 16px/24px · Inter
Diseña interfaces claras y accesibles.
text/md-medium
500 16px/24px · Inter
Diseña interfaces claras y accesibles.
text/md-regular
400 16px/24px · Inter
Diseña interfaces claras y accesibles.
text/sm-semibold
600 14px/20px · Inter
Diseña interfaces claras y accesibles.
text/sm-medium
500 14px/20px · Inter
Diseña interfaces claras y accesibles.
text/sm-regular
400 14px/20px · Inter
Diseña interfaces claras y accesibles.
text/xs-semibold
600 12px/18px · Inter
Diseña interfaces claras y accesibles.
text/xs-medium
500 12px/18px · Inter
Diseña interfaces claras y accesibles.
text/xs-regular
400 12px/18px · Inter
Diseña interfaces claras y accesibles.
Mapeo que siguen los componentes del kit.
Tamaño mínimo
12 px solo para metadatos y badges; el texto de lectura empieza en 14 px.
Campos a 16 px
Los inputs usan text/md-regular: por debajo de 16 px Safari en iOS hace zoom al enfocar.
Interlineado
Todos los tokens traen su line-height (1.25 a 1.5), así que el texto no se amontona al ampliar.
Cada token es un atajo font completo (peso, tamaño, interlineado y familia).
La familia Inter se carga desde la configuración de fuentes del proyecto.
Para titulares grandes en móvil, baja un escalón (por ejemplo display/md a display/sm) con el estilo del breakpoint mobile.
ww-text no hereda font ni color del contenedor: hay que ligarlos en cada texto.
ww-text interpreta HTML: evita escribir etiquetas entre ángulos en los textos.