Font style

The font style class sets the font-style property. It adds or removes italic styling of text.

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

Overview

CSS Shortcut class	Applied style
`font-normal`	`font-style: normal;`
`font-italic`	`font-style: italic;`

Examples

This element displays text without italic styling and is used in most cases.

<p class="font-normal">
  This element displays text without italic styling and is
  used in most cases.
</p>

This element displays text with italic styling. It’s used sparingly for short text strings to limit cognitive load.

<p class="font-italic">
  This element displays text with italic styling. It’s used
  sparingly for short text strings to limit cognitive load.
</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-italic ...">
  ...
</div>

Learn more about the responsive layout prefix.

2026-02-12