🖋
Tipografía
La tipografía ayuda a jerarquizar la información y transmitir los valores de la marca.

Familia

Plural DS permite combinar dos familias tipográficas como punto de partida. Esto aporta flexibilidad a la hora de distinguir entre los elementos de mayor y menor peso en la interfaz. Por ahora, el formato framework de Plural únicamente utiliza Montserrat.
Token
Valor
--family-font-01
'Montserrat'
--family-font-02
'Montserrat'
Aprende a combinar dos familias tipográficas en nuestro theming.

Escala

Como sucede con el color, Plural DS cuenta con una acotación inicial de tamaños y pesos tipográficos que conforman la escala que utilizaremos en la interfaz. Sin embargo, en este punto es una mera escala sin roles semánticos o usos definidos.
No obstante, sí que existe una relación directa entre el tamaño y el interlineado.

Tamaño de fuente

Token
Valor (rem)
Valor (px)
--size-font-01
0.75
12
--size-font-02
0.875
14
--size-font-03
1
16
--size-font-04
1.125
18
--size-font-05
1.5
24
--size-font-06
2
32
--size-font-07
3
48
--size-font-08
3.5
56
--size-font-09
5
80

Interlineado

Token
Valor (rem)
Valor (px)
--size-line-height-01
1.125
18
--size-line-height-02
1.3125
21
--size-line-height-03
1.5
24
--size-line-height-04
1.6875
27
--size-line-height-05
1.813
29
--size-line-height-06
2.375
38
--size-line-height-07
3.625
58
--size-line-height-08
4.25
68
--size-line-height-09
6.0625
97
En el siguiente nivel (Decisiones), combinamos tokens de font-size, line-height, font-weight, font-style y font-family para crear estilos de texto que responden a usos específicos en la interfaz (ej.: title-medium).
Copiar enlace
Esquema
Familia
Escala