Typography is used to create a consistent hierarchy, readability, and visual language across the design system. The system uses a set of tokens for font size, line height, and font weight.
Every token is prefixed with --dds-, use the variants concated with the base name to get the token value. Example: --dds-font-lg or --dds-font-line-height-large.
For predefined typography building blocks, you can use the dap-ds-typography component also.
Font size is used to define the size of the text. It is the height of the text block.
xs
sm
base
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
9xl
10xl
11xl
12xl
Line height is used to define the height of the line. It is the distance between the baselines of two lines of text.
base
large
xlarge
Font weight is used to define the thickness of the text. It is the darkness of the text.
medium
bold