Typography

Abrir en ChatGPT

Los tokens de tipografía se utilizan para mantener un conjunto consistente de estilos de fuente a lo largo de tu aplicación.

Familia de fuentes

Las propiedades de la familia de fuentes se utilizan para especificar una lista priorizada de nombres de familias de fuentes.

La pila de fuente del sistema se utiliza por defecto:

• Segoe UI en Windows
• Roboto en Android y Chrome OS
• San Francisco en macOS y iOS
• En otros sistemas, se utilizan Helvetica, Arial como alternativas.

Puedes aplicar o cambiar la familia de fuentes utilizando la propiedad personalizada --dwc-font-family.

Ejemplo

:root {
  --dwc-font-family: "Roboto", sans-serif;
}

Variables

Variable	Valor por defecto	Ejemplo
--dwc-font-family-sans	-apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'	Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-family-mono	Menlo, Monaco, 'Courier New', monospace	Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-family	var(--dwc-font-family-sans)	Esfinge de cuarzo negro, juzga mi voto.

Tamaño de fuente

Las propiedades del tamaño de fuente definen un conjunto de tamaños de fuente para elegir. s es el tamaño estándar, y se utiliza por defecto en la mayoría de los componentes. Todos los tamaños de fuente se definen en em.

Unidad EM

em es una unidad de longitud relativa. Es relativa al tamaño de fuente del padre, en el caso de propiedades tipográficas como size de fuente, y el tamaño de fuente del propio elemento y en el caso de otras propiedades como width.

Ejemplo

.title {
  font-size: var(--dwc-font-size-3xl);
}

Variables

Variable	Valor por defecto	Ejemplo
--dwc-font-size-2xs	0.75rem	Aa
--dwc-font-size-xs	0.813rem	Aa
--dwc-font-size-s	0.875rem	Aa
--dwc-font-size-m	1rem	Aa
--dwc-font-size-l	1.125rem	Aa
--dwc-font-size-xl	1.375rem	Aa
--dwc-font-size-2xl	1.75rem	Aa
--dwc-font-size-3xl	2.25rem	Aa
--dwc-font-size	var(--dwc-font-size-s)	Aa

Peso de fuente

La propiedad CSS font-weight establece el peso (o negrita) de la fuente.

Ejemplo

p {
  font-weight: var(--dwc-font-weight-semibold);
}

Variable	Valor por defecto	Ejemplo
--dwc-font-weight-lighter	200	Aa
--dwc-font-weight-light	300	Aa
--dwc-font-weight-normal	400	Aa
--dwc-font-weight-semibold	500	Aa
--dwc-font-weight-bold	700	Aa
--dwc-font-weight-bolder	800	Aa

Altura de línea

La propiedad CSS de altura de línea establece la altura de un cuadro de línea. Se usa comúnmente para establecer la distancia entre líneas de texto.

Ejemplo

p {
  line-height: var(--dwc-font-line-height-m);
}

Variables

Variable	Valor por defecto	Ejemplo
--dwc-font-line-height-2xs	0.95	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-xs	1.1	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-s	1.25	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-m	1.375	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-l	1.5	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-xl	1.75	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height-2xl	2	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.
--dwc-font-line-height	var(--dwc-font-line-height-m)	Esfinge de cuarzo negro, juzga mi voto. Esfinge de cuarzo negro, juzga mi voto.