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 fuentes 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 sustitutos.

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 de tamaño de fuente definen un conjunto de tamaños de fuente para elegir. s es el tamaño estándar y es utilizado por la mayoría de los componentes por defecto. Todos los tamaños de fuente están definidos en em.

Unidad EM

em es una unidad de medida relativa. es relativa al tamaño de fuente del elemento padre, en el caso de propiedades tipográficas como font-size, y al tamaño de fuente del propio elemento 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

Grosor de fuente

La propiedad CSS font-weight establece el grosor (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 utiliza 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.