Skip to content
Gallery
plural
Plural DS
Plural DS
Share
Explore
Opciones

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.

Familia

Font family
Token
Valor
1
–family-font-01
‘Commissioner’
2
–family-font-02
‘Outfit’
There are no rows in this table
⁠
info
Aprende a combinar dos familias tipográficas en nuestro
theming
⁠
.

Escala

Como sucede con el
Semantic 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 (font-size)
Token
Valor (rem)
Valor (px)
1
–size-font-01
0.75
12
2
–size-font-02
0.875
14
3
–size-font-03
1
16
4
–size-font-04
1.125
18
5
–size-font-05
1.5
24
6
–size-font-06
2
32
7
–size-font-07
3
48
8
–size-font-08
3.5
56
9
–size-font-09
5
80
There are no rows in this table
⁠
⁠
Imagen mostrando la escala de tamaños de fuente (font size) y los interlineados (line height) asignados.
⁠
⁠
Interlineado (line-height)
Token
Valor (rem)
Valor (px)
1
–size-line-height-01
1.125
18
2
–size-line-height-02
1.3125
21
3
–size-line-height-03
1.5
24
4
–size-line-height-04
1.6875
27
5
–size-line-height-05
1.813
29
6
–size-line-height-06
2.375
38
7
–size-line-height-07
3.625
58
8
–size-line-height-08
4.25
68
9
–size-line-height-09
6.0625
97
There are no rows in this table
⁠
info
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).
Familia
Font family
Escala
Tamaño de fuente (font-size)
Interlineado (line-height)
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.