Dimension: Typography

Typography

The mat.theme’s typography determines the text styles used in components, such as the font for dialog titles or menu list items.

Similar to color, you can set the typography in one of two ways: as a single font family value, or as a typography map.

Single Font Family Value

If you provide a font family, Angular Material uses it for all the text in its components. The font weights used in components are set to 700 for bold text, 500 for medium text, and 400 for regular text.

A single font family value can be defined as below:

1
html {
2
  @include mat.theme(
3
    (
4
      typography: Roboto,
5
    )
6
  );
7
}

Typography Map

If you provide a typography map, then distinct font families are set for plain and brand text. The plain font family is typically used for most of the application’s text, while the brand font family is typically used for headings and titles.

The typography map also sets specific weights for bold, medium, and regular text.

The following example theme file applies the Roboto font family to plain text and the Open Sans font family to brand text. It specifies that bold weight is 900, medium weight is 500, and regular weight is 300. The color scheme uses the violet color palette with a standard density.

1
@use "@angular/material" as mat;
2

3
html {
4
  @include mat.theme(
5
    (
6
      typography: (
7
        plain-family: Roboto,
8
        brand-family: Open Sans,
9
        bold-weight: 900,
10
        medium-weight: 500,
11
        regular-weight: 300,
12
      ),
13
    )
14
  );
15
}

Modifying Typography

For our application, we will use Poppins as the font family for brand text and Inter as the font family for plain text.

Importing Fonts

Let’s start by importing the fonts into our application. Open the index.html file and add the following code:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
2
<link
3
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Inter:wght@400;500;700&display=swap"
4
  rel="stylesheet"
5
/>

Setting Typography

Now we will set the typography in our styles file. Open the src/styles.scss file and add the following code:

1
// rest remains same
2
html {
3
  @include mat.theme(
4
    (
5
      // color and density remains same
6
      typography: Roboto,
7
      typography: (plain-family: Inter, brand-family: Poppins)
8
    )
9
  );
10
}