🖋
Tipografía
La tipografía ayuda a jerarquizar la información y transmitir los valores de la marca.
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' |
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.
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 |
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).
Última actualización 1yr ago