Fundamentos
Tipografía
La escala de tamaños y los estilos de texto con nombre.
Eclipse UI escribe con dos voces y un acento: una fuente de texto para toda la
interfaz, una mono para datos y etiquetas, y la voz display de cada personalidad para los títulos.
Los tamaños salen de una escala corta y los papeles del texto tienen nombre: en UI nueva se
escribe eui-heading, no text-lg font-semibold tracking-tight.
Familias
Tres diales eligen las familias: --eui-font-text, --eui-font-mono y
--eui-font-display (con --eui-display-weight, -tracking,
-style, -case y -stretch). Viven en el repo
Fraunces, Inter, JetBrains Mono, Manrope, Archivo, Cormorant y Nunito; cada una
se descarga solo si una personalidad la usa. Cambia la personalidad arriba: el display cambia de voz en todas,
y en Brisa y Terra también el texto.
Texto
—
--eui-font-text
Reserva tu lugar en Vinyasa Flow con Ana García.
400500600
Datos y etiquetas
—
--eui-font-mono
07:00–08:00 · Sala 2 · #R-1042
400500600
Display
—
--eui-font-display
Respira, muévete, vuelve a ti.
peso — · tracking —
Pesos: la interfaz usa 400 (cuerpo), 500 (títulos de tarjeta, botones, etiquetas de campo) y 600 (títulos de sección y de página). El 700 no forma parte del lenguaje; el display usa el peso de su dial, que en Umbra llega a — y en Alba baja a —.
Escala
Los pasos chicos (de text-3xs a text-base) son los de una interfaz compacta; de ahí para arriba es la escala de
Tailwind. Si un tamaño no está aquí, no existe: nada de text-[13px]. Las medidas se
leen del CSS de esta página y los usos se cuentan en app/components y
app/views.
| Clase | Tamaño | Interlineado | Uso | Muestra |
|---|---|---|---|---|
text-3xs14 usos |
— | — | Ejes de gráficas, teclas, contadores mínimos. Nunca texto que haya que leer. | Vinyasa |
text-2xs52 usos |
— | — | Pastillas, unidades (MXN, min) y etiquetas mono (eui-label). | Vinyasa |
text-xs128 usos |
— | — | Metadatos, ayudas de campo y botones chicos (eui-meta, eui-data). | Vinyasa |
text-compact22 usos |
— | — | Piezas densas: menús, avisos, tooltips, celdas de tabla. | Vinyasa |
text-sm117 usos |
— | — | La voz de la interfaz: cuerpo, etiquetas, botones, títulos de tarjeta (eui-body, eui-subheading). | Vinyasa |
text-md12 usos |
— | — | Entradillas y lectura larga: el resumen de una página. | Vinyasa |
text-base19 usos |
— | — | Campos en el teléfono (evita el zoom de iOS) y botones grandes. | Vinyasa |
text-lg10 usos |
— | — | Títulos de sección, modal u hoja (eui-heading). | Vinyasa |
text-xl10 usos |
— | — | Títulos display de tarjeta (eui-display text-xl). | Vinyasa |
text-2xl7 usos |
— | — | Título de página (eui-title). | Vinyasa |
text-3xl11 usos |
— | — | Cifras protagonistas (eui-figure) y titulares de sección editoriales. | Vinyasa |
text-4xl12 usos |
— | — | Cifras de portada y titulares (eui-display). | Vinyasa |
text-5xl12 usos |
— | — | Héroes y portadas (eui-display). | Vinyasa |
text-6xl4 usos |
— | — | El héroe de una página pública, en escritorio. | Vinyasa |
Estilos con nombre
Cada estilo es una clase que junta tamaño, peso, interlineado y tracking para un papel del texto.
Están en eclipse_ui/type.css y codifican lo que los componentes ya escribían a mano,
así migrar no cambia nada a la vista. Cambia la personalidad: eui-title y
eui-figure toman la voz display; los demás siguen la fuente de texto.
eui-title
Mis clases
—
eui-heading
Próximas reservas
—
eui-subheading
Vinyasa Flow
—
eui-body
Una clase fluida para despertar el cuerpo. Trae tu tapete y llega diez minutos antes para acomodarte.
—
eui-meta
—
eui-data
07:00–08:00 · #R-1042 · $1,250
—
eui-figure
$1,250
—
La lectura bajo cada muestra es tamaño/interlineado · peso · tracking · familia,
medida en vivo. Siguen disponibles los que ya existían: eui-display (titulares
editoriales, el tamaño lo pone text-*), eui-eyebrow (antetítulo con el
punto de la marca), eui-label (etiqueta mono) y eui-numeric (cifras
tabulares).
Luna Estudio
Mis clases
Tus reservas de esta semana y tus créditos. Cancela sin costo hasta 12 horas antes.
Esta semana
- 07:00 Vinyasa Flow
- 11:15 Meditación guiada
- 19:30 Reformer Intermedio
Créditos
8
Paquete
$1,250
Cuáles traen color
Solo eui-meta, como ya hacían eui-label y eui-eyebrow: su
papel es ser secundario, y su color (text-muted-foreground) pasa AA en todas las
personalidades. Los demás heredan el color de su superficie, para servir igual sobre
bg-primary, dentro de un aviso o en una clase pasada. Una utilidad suelta encima
siempre gana: eui-body text-muted-foreground para una descripción,
eui-meta text-destructive para un error, eui-subheading truncate en una fila.
| Estilo | Para | Reemplaza a |
|---|---|---|
eui-title |
Título de la página. Uno por vista. | text-2xl font-semibold tracking-[-0.03em] |
eui-heading |
Sección, modal u hoja. | text-lg font-semibold tracking-tight |
eui-subheading |
Tarjeta, fila o grupo de campos. | text-sm font-medium |
eui-body |
Párrafos y descripciones. | text-sm leading-relaxed |
eui-meta |
Metadatos y ayudas. | text-xs text-muted-foreground |
eui-data |
Horarios, folios y montos en línea. | font-mono text-xs tabular-nums |
eui-figure |
La cifra protagonista: KPI, precio, créditos. | font-semibold leading-none tracking-[-0.035em] tabular-nums |
Cifras tabulares
En Inter cada número mide distinto: el 1 es más angosto que el 0. Para todo lo que se lee en
columna o cambia en el lugar (horarios, precios, créditos, contadores que ruedan) va
eui-numeric: cifras tabulares y alineadas, todas del mismo ancho. eui-data
y eui-figure ya lo traen.
Proporcionales
| 07:00 | Vinyasa Flow | $180 |
| 11:15 | Reformer | $1,250 |
| 18:40 | Power Yoga | $980 |
| 21:10 | Meditación | $111 |
eui-numeric
| 07:00 | Vinyasa Flow | $180 |
| 11:15 | Reformer | $1,250 |
| 18:40 | Power Yoga | $980 |
| 21:10 | Meditación | $111 |
Mayúsculas y etiquetas mono
Las mayúsculas son para etiquetas cortas (una a tres palabras) y siempre con
tracking abierto: eui-label (mono,
—,
—) sobre un dato o una sección, y
eui-eyebrow (—,
—, con el punto de la marca) sobre un título. Nunca un título,
un botón ni una frase en mayúsculas: se leen más lento y gritan.
Sí
Próxima clase
Vinyasa Flow · 07:00
eui-label · —
eui-eyebrow · —
No
Mis clases de esta semana
Cancela hasta 12 horas antes para recuperar tu crédito
Acentos y ñ
Escribimos en español: las tres familias traen el latín completo (acentos, ñ, diéresis, ¿ y ¡).
Las mayúsculas llevan tilde (SESIÓN, no SESION), los rangos usan raya corta sin
espacios (07:00–08:00), el separador es el punto medio (·), los puntos suspensivos son un solo
carácter (…), y entre una cifra y su unidad va un espacio duro (60 min) para
que no se separen al cortar la línea.
—
¿Reservas para mañana? ¡Quedan 3 lugares en Meditación guiada con Sofía Ruiz!
Próxima sesión · Año Nuevo · 07:00–08:00 · Ñ Á É Í Ó Ú Ü
—
¿Reservas para mañana? ¡Quedan 3 lugares en Meditación guiada con Sofía Ruiz!
Próxima sesión · Año Nuevo · 07:00–08:00 · Ñ Á É Í Ó Ú Ü
—
¿Reservas para mañana? ¡Quedan 3 lugares en Meditación guiada con Sofía Ruiz!
Próxima sesión · Año Nuevo · 07:00–08:00 · Ñ Á É Í Ó Ú Ü
Cuándo usar cada estilo
El estilo no decide la etiqueta: un h2 dentro de una tarjeta puede llevar
eui-subheading. Lo que importa al lector de pantalla es el orden de los títulos; lo que
importa a la vista es el papel.
| Si escribes… | Usa | Ejemplo |
|---|---|---|
| El título de la vista | eui-title | Mis clases · Reservas · Paquetes |
| Una portada o titular editorial | eui-display + text-4xl… | Respira, muévete, vuelve a ti. |
| El título de una sección, un modal o una hoja | eui-heading | Próximas reservas · Cancelar reserva |
| El título de una tarjeta, fila o grupo de campos | eui-subheading | Vinyasa Flow · Datos de pago |
| Un párrafo o una descripción | eui-body (+ text-muted-foreground si acompaña) | Una clase fluida para despertar el cuerpo. |
| Quién, cuándo, dónde; una ayuda de campo | eui-meta | con Ana García · hace 5 min |
| Un horario, folio o monto dentro del texto | eui-data | 07:00 · #R-1042 · $1,250 |
| La cifra que es la noticia | eui-figure + text-3xl… | 8 créditos · $12,400 este mes |
| La etiqueta técnica sobre un dato | eui-label | Cupo · Sala · Vence |
| El antetítulo de una sección pública | eui-eyebrow | Estudio de movimiento · Roma Norte |
Qué no hacer
- Tamaños sueltos. Nada de
text-[13px]: usa la escala o un estilo. Hoy quedan 1 en el código. - Pisar el tamaño de un estilo.
eui-heading text-xles otro estilo que no existe; si de verdad hace falta, se agrega aquí. - Más de un
eui-titlepor vista, o un título display en cada tarjeta de un tablero: la voz display es para lo que importa. - Negritas de 700 en la interfaz, o subrayar para enfatizar: el énfasis es peso 500/600 o
text-foregroundsobre texto secundario. - Texto que hay que leer en
text-faintotext-subtle: no pasan AA; son para metadatos mínimos e íconos. - Mayúsculas en Inter para títulos o botones, o frases largas en
eui-label. - Líneas de más de ~70 caracteres: un párrafo largo va en
max-w-2xlo menos, alineado a la izquierda y sin justificar.