Saltar al contenido
Alea0.1
Pro
  1. Alea
  2. Diseño
  3. Fundamentos
  4. Tipografía

Fundamentos

Tipografía

Crimson Pro Light para títulos, Inter para la interfaz y el texto, JetBrains Mono para código. Una escala de tamaños de 11 a 80 px.

Familias

Display · --alea-font-family-display

Crimson Pro

Body · --alea-font-family-body

Inter

Code · --alea-font-family-mono

Mono

Escala de tamaños

--alea-font-size-7xl80pxDiseño que juega
--alea-font-size-6xl64pxDiseño que juega
--alea-font-size-5xl48pxDiseño que juega
--alea-font-size-4xl36pxDiseño que juega
--alea-font-size-3xl28pxDiseño que juega
--alea-font-size-2xl24pxDiseño que juega
--alea-font-size-xl20pxDiseño que juega
--alea-font-size-lg18pxDiseño que juega
--alea-font-size-base16pxDiseño que juega
--alea-font-size-md14pxDiseño que juega
--alea-font-size-sm13pxDiseño que juega
--alea-font-size-xs12pxDiseño que juega
--alea-font-size-2xs11pxDiseño que juega

Pesos, alturas de línea, espaciado

--alea-font-weight-light300
--alea-font-weight-regular400
--alea-font-weight-medium500
--alea-font-weight-semibold600
--alea-font-leading-tight1.1
--alea-font-leading-snug1.3
--alea-font-leading-normal1.5
--alea-font-leading-relaxed1.6
--alea-font-tracking-display-0.02em
--alea-font-tracking-tight-0.01em
--alea-font-tracking-normal0em
--alea-font-tracking-eyebrow0.08em

Prueba tu texto

DisplayHeroes de landings

Componentes con un poco de diversión

Heading 4XLTítulos de página

Componentes con un poco de diversión

Heading 2XLTítulos de sección

Componentes con un poco de diversión

Heading LGTítulos de tarjeta

Componentes con un poco de diversión

Text LGEntradillas bajo un título

Componentes con un poco de diversión

Text MDCuerpo y controles

Componentes con un poco de diversión

Text SMAyudas y texto secundario

Componentes con un poco de diversión

Text XSPies y conteos

Componentes con un poco de diversión

La jerarquía en la práctica

Un artículo corto con el estilo de cada parte. Serif para los títulos que marcan el tono, sans para todo lo que la gente lee y usa.

Eyebrow

Notas de la versión

Heading 2XL

Llegó Alea 1.1

Text LG, muted

Un editor de texto enriquecido, un modal para cualquier contenido y la documentación en español.

Text MD

Cada componente conserva su comportamiento de teclado y su contraste en ambos temas. Actualiza con un comando y nada de tu código tiene que cambiar.

Text SM, muted

Publicado el 18 de octubre · 3 min de lectura

Leer bien

  • Mantén las líneas entre 45 y 75 caracteres: Prose las limita a 72.
  • Usa un solo título display o 4xl por página; baja un tamaño a la vez.
  • El texto de cuerpo va de 15 a 16 px; nunca bajes de 12 px en nada que la gente necesite leer.
  • Los campos usan texto de 16 px desde md, así los teléfonos no hacen zoom al enfocarlos.