Typography in Ignite UI for React

The typography in Ignite UI for React is modeled after the Material Type System. It’s non-intrusive and optional, allowing you to modify the type styles using CSS only.

Overview

The type system is a type scale consisting of 13 different category type styles used across most components. All of the scale categories are completely reusable and adjustable by the end user.

Here’s a list of all 13 category styles as defined for the Bootstrap Theme in Ignite UI for React:

Each theme defines its own type scale. This means each one of the themes we ship - Material, Fluent, Bootstrap, and Indigo will have its own type scale. They all share the same scale categories, but can have different font family, weight, size, text transform, letter spacing, and line height.

Usage

Changing font family

To change the font family in all components, all you have to do is overwrite the --ig-font-family CSS variable:

:root {
  --ig-font-family: 'Helvetica Neue', sans-serif;
}

Changing type styles

The type styles are used internally by most of the components in Ignite UI for React. For instance, the igc-button component uses the button type style. To change any of the type style properties, we need to overwrite the corresponding CSS variable:

:root {
  --ig-button-font-size: 22px;
  --ig-button-line-height: 26px;
  --ig-button-text-transform: lowercase;
}

Keep in mind that this will update the global button typography styles. If you want to apply these changes to a specific button, you can make use of a class selector.