Font weight

The font weight class sets the font-weight property. It controls how bold text is.

View GCDS typography guidance to choose the right font weight for your context.

Overview

CSS Shortcut class	Applied style
`font-regular`	`font-weight: var(--gcds-font-weights-regular);`
`font-light`	`font-weight: var(--gcds-font-weights-light);`
`font-medium`	`font-weight: var(--gcds-font-weights-medium);`
`font-semibold`	`font-weight: var(--gcds-font-weights-semibold);`
`font-bold`	`font-weight: var(--gcds-font-weights-bold);`

Examples

This element uses the default font weight.

<p class="font-regular">
  This element uses the default font weight.
</p>

This element uses a light font weight.

<p class="font-light">
  This element uses a light font weight.
</p>

This element uses a medium font weight.

<p class="font-medium">
  This element uses a medium font weight.
</p>

This element uses a semi-bold font weight.

<p class="font-semibold">
  This element uses a semi-bold font weight.
</p>

This element uses a bold font weight.

<p>
  This element uses a
  <span class="font-bold">bold</span>
  font weight.
</p>

Conditional styling

Apply this style to specific screen sizes

Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

<div class="xs:font-medium ...">
  ...
</div>

Learn more about the responsive layout prefix.

Apply this style to specific states

Use a state prefix to apply this class only to a specified interaction state. The available states are:

<div class="hover:font-medium ...">
  ...
</div>

Learn more about the state prefix.

2026-02-12