Tipografía
La escala es una decisión de densidad y las caras son una de fuentes: esta página muestra cómo se lee una forma, no lo que vale hoy. Cambia el eje de fuentes en el panel de depuración y todo lo que está abajo se establece en otra cara sin cambiar ninguna regla.
Familias
--font-family-base
--font-family-heading
--font-family-mono
Pesos
--font-weight-normal — El rápido zorro marrón salta sobre el perro perezoso — 0123456789
--font-weight-medium — El rápido zorro marrón salta sobre el perro perezoso — 0123456789
--font-weight-strong — El rápido zorro marrón salta sobre el perro perezoso — 0123456789
--font-weight-bold — El rápido zorro marrón salta sobre el perro perezoso — 0123456789
Escala tipográfica
Sistema de Diseño — Componentes básicos para grandes interfaces
Usado una vez por página. Establece el contexto principal. Emparejado con un breve párrafo introductorio.
La tipografía establece jerarquía y ritmo
Encabezado de nivel de sección. Agrupa contenido relacionado. Usualmente seguido por texto de cuerpo o subsecciones.
El espaciado y la proporción moldean la legibilidad
Encabezado de subsección. Introduce un tema enfocado dentro de una sección.
El color y el contraste guían la vista
Usado para títulos de tarjetas, secciones de barra lateral o agrupaciones menores.
Los estados interactivos deben ser obvios
Etiquetas, encabezados de metadatos, pequeñas agrupaciones. Sutil pero distinto del texto de cuerpo.
La accesibilidad es una característica, no un pensamiento posterior
El nivel de encabezado más pequeño. Usar con moderación — para notas al pie, bloques legales o etiquetas auxiliares.