Typography
Los tokens de tipografía se utilizan para mantener un conjunto consistente de estilos de fuente en toda tu aplicación.
Familia de fuentes
Las propiedades de la familia de fuentes se utilizan para especificar una lista priorizada de nombres de familia de fuentes.
La pila de fuentes del sistema se utiliza por defecto a través de system-ui, que se resuelve automáticamente a la fuente nativa de la plataforma:
San Franciscoen macOS y iOSSegoe UIen WindowsRobotoen Android y Chrome OS
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 |
|---|---|
--dwc-font-family-sans | system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
--dwc-font-family-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace |
--dwc-font-family | var(--dwc-font-family-sans) |
Tamaño de fuente
Las propiedades de tamaño de fuente definen un conjunto de tamaños de fuente para elegir. m 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 rem.
rem es una unidad de longitud relativa. Es relativa al tamaño de fuente del elemento raíz (<html>), que por defecto es de 16px en la mayoría de los navegadores.
Ejemplo
.title {
font-size: var(--dwc-font-size-3xl);
}
Variables
| Variable | Valor por defecto | Calculado (con raíz de 16px) |
|---|---|---|
--dwc-font-size-3xs | 0.625rem | 10px |
--dwc-font-size-2xs | 0.6875rem | 11px |
--dwc-font-size-xs | 0.75rem | 12px |
--dwc-font-size-s | 0.8125rem | 13px |
--dwc-font-size-m | 0.875rem | 14px |
--dwc-font-size-l | 1rem | 16px |
--dwc-font-size-xl | 1.25rem | 20px |
--dwc-font-size-2xl | 1.625rem | 26px |
--dwc-font-size-3xl | 2.125rem | 34px |
--dwc-font-size | var(--dwc-font-size-m) | 14px |
Peso de fuente
La propiedad CSS font-weight establece el peso (o grosor) de la fuente.
Ejemplo
p {
font-weight: var(--dwc-font-weight-semibold);
}
| Variable | Valor por defecto |
|---|---|
--dwc-font-weight-thin | 100 |
--dwc-font-weight-lighter | 200 |
--dwc-font-weight-light | 300 |
--dwc-font-weight-normal | 400 |
--dwc-font-weight-medium | 500 |
--dwc-font-weight-semibold | 600 |
--dwc-font-weight-bold | 700 |
--dwc-font-weight-bolder | 800 |
--dwc-font-weight-black | 900 |
--dwc-font-weight | var(--dwc-font-weight-normal) |
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 |
|---|---|
--dwc-font-line-height-3xs | 1 |
--dwc-font-line-height-2xs | 1.1 |
--dwc-font-line-height-xs | 1.25 |
--dwc-font-line-height-s | 1.375 |
--dwc-font-line-height-m | 1.5 |
--dwc-font-line-height-l | 1.625 |
--dwc-font-line-height-xl | 1.75 |
--dwc-font-line-height-2xl | 1.875 |
--dwc-font-line-height-3xl | 2 |
--dwc-font-line-height | var(--dwc-font-line-height-xs) |