Font Weight

Static Font

Changing the weight of a static font family is as simple as using one of the font weights defined below.

🎨 Figma: Font Weight has been built into the Text and Title components.

💻 Code: Font Weight is available as a variable.

cosmos-font-weight-regular

400

cosmos-font-weight-medium

500

cosmos-font-weight-bold

700

Variable Font

Adjusting the weight of a variable font requires a specific set of variable font parameters to be applied. Use one of the settings below to turn the corresponding variable font into a different weight.

Text

cosmos-font-weight-default-text-variable-regular 'opsz' 12, 'wght' 400

cosmos-font-weight-default-text-variable-medium 'opsz' 12, 'wght' 500

cosmos-font-weight-default-text-variable-bold

'opsz' 12, 'wght' 700

Title

cosmos-font-weight-default-title-variable-bold

'opsz' 86, 'wght' 700

cosmos-font-weight-default-title-variable-heavy

'opsz' 86, 'wght' 800