Typography

Overview

Angular Material’s typography system controls text styles across all components, including font families, font weights, font sizes, and line heights. The typography configuration is based on Material Design’s type scale.

Typography Configuration

Typography is configured as part of the theme using the mat.theme mixin.

Single Font Family

The simplest approach is to specify a single font family:

theme.scss

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0
  ));
}

This configuration:

Applies Roboto to all text in Material components
Uses font weight 700 for bold text
Uses font weight 500 for medium text
Uses font weight 400 for regular text

Advanced Typography Map

For more control, provide a typography map with separate font families for plain and brand text:

theme.scss

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: (
      plain-family: Roboto,
      brand-family: 'Open Sans',
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
    density: 0,
  ));
}

Typography Map Properties:

plain-family

string

Font family for body text, buttons, and most UI elements

brand-family

string

Font family for headings, titles, and prominent text

bold-weight

number

default:"700"

Font weight for bold text (typically 700-900)

medium-weight

number

default:"500"

Font weight for medium emphasis text (typically 500-600)

regular-weight

number

default:"400"

Font weight for regular text (typically 300-400)

Material Design Type Scale

Angular Material implements the Material Design type scale with the following levels:

Display Large

Largest heading size, used for hero sectionsCSS Variable: --mat-sys-display-largeDefault Size: 57px / 64px line height

Display Medium

Large heading size for section headersCSS Variable: --mat-sys-display-mediumDefault Size: 45px / 52px line height

Display Small

Smaller heading for subsectionsCSS Variable: --mat-sys-display-smallDefault Size: 36px / 44px line height

Headline Large

Large headline textCSS Variable: --mat-sys-headline-largeDefault Size: 32px / 40px line height

Headline Medium

Medium headline textCSS Variable: --mat-sys-headline-mediumDefault Size: 28px / 36px line height

Headline Small

Small headline textCSS Variable: --mat-sys-headline-smallDefault Size: 24px / 32px line height

Title Large

Large title text, used in dialogs and cardsCSS Variable: --mat-sys-title-largeDefault Size: 22px / 28px line height

Title Medium

Medium title textCSS Variable: --mat-sys-title-mediumDefault Size: 16px / 24px line heightFont Weight: Medium

Title Small

Small title textCSS Variable: --mat-sys-title-smallDefault Size: 14px / 20px line heightFont Weight: Medium

Body Large

Large body text for prominent contentCSS Variable: --mat-sys-body-largeDefault Size: 16px / 24px line height

Body Medium

Default body text sizeCSS Variable: --mat-sys-body-mediumDefault Size: 14px / 20px line height

Body Small

Small body text for secondary contentCSS Variable: --mat-sys-body-smallDefault Size: 12px / 16px line height

Label Large

Large label text for buttons and tabsCSS Variable: --mat-sys-label-largeDefault Size: 14px / 20px line heightFont Weight: Medium

Label Medium

Medium label textCSS Variable: --mat-sys-label-mediumDefault Size: 12px / 16px line heightFont Weight: Medium

Label Small

Small label text for hints and captionsCSS Variable: --mat-sys-label-smallDefault Size: 11px / 16px line heightFont Weight: Medium

Loading Fonts

Google Fonts

Load fonts from Google Fonts in your index.html:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
  
  <!-- Preconnect to Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Load Roboto with weights 400, 500, and 700 -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  
  <!-- Load Open Sans for brand text -->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;900&display=swap" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular CLI projects are configured by default to inline Google Fonts assets to reduce render-blocking requests and improve performance.

Custom Fonts

To use custom fonts, include them via @font-face in your global styles:

styles.scss

@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/MyCustomFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/MyCustomFont-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/MyCustomFont-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Then use it in your theme:

theme.scss

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: 'MyCustomFont',
    density: 0
  ));
}

Using Typography Styles

In Templates with Utility Classes

Enable utility classes in your theme:

theme.scss

@use '@angular/material' as mat;

html {
  @include mat.theme((/* ... */));
  @include mat.system-classes();
}

Then use them in templates:

<h1 class="mat-font-display-lg">Welcome</h1>
<h2 class="mat-font-headline-md">Getting Started</h2>
<p class="mat-font-body-lg">This is large body text.</p>
<p class="mat-font-body-md">This is regular body text.</p>
<span class="mat-font-label-sm">Small label</span>

In Component Styles with CSS Variables

Use CSS variables directly:

my-component.scss

.page-title {
  font: var(--mat-sys-display-large);
  color: var(--mat-sys-on-surface);
}

.section-heading {
  font: var(--mat-sys-headline-medium);
  color: var(--mat-sys-on-surface-variant);
}

.body-text {
  font: var(--mat-sys-body-medium);
  line-height: 1.5;
}

.caption {
  font: var(--mat-sys-label-small);
  color: var(--mat-sys-on-surface-variant);
}

Typography Best Practices

Maintain Type Hierarchy

Use the type scale to create clear visual hierarchy:

Display styles for hero content
Headline styles for page and section titles
Title styles for card headers and dialogs
Body styles for main content
Label styles for buttons, tabs, and captions

Load Only Needed Font Weights

Only load the font weights you’ll actually use:

<!-- Good: Only loads needed weights -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<!-- Avoid: Loading all weights -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Use font-display: swap

When loading custom fonts, use font-display: swap to prevent invisible text during font loading:

@font-face {
  font-family: 'MyFont';
  src: url('/assets/fonts/MyFont.woff2') format('woff2');
  font-display: swap; /* Shows fallback font while loading */
}

Provide Font Fallbacks

Always specify fallback fonts:

@include mat.theme((
  typography: ('Roboto', 'Helvetica Neue', Arial, sans-serif),
));

Avoid ALL CAPS in Content

Using ALL CAPS in content causes issues for screen readers and localization. Use CSS text-transform if needed:

<!-- Avoid -->
<button>CLICK ME</button>

<!-- Better -->
<button style="text-transform: uppercase">Click me</button>

Examples

Complete Typography Setup

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: (
      plain-family: ('Roboto', 'Helvetica Neue', sans-serif),
      brand-family: ('Montserrat', 'Open Sans', sans-serif),
      bold-weight: 700,
      medium-weight: 500,
      regular-weight: 400,
    ),
    density: 0,
  ));
  @include mat.system-classes();
}

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

Next Steps

Theming

Learn about the complete theming system

Accessibility

Ensure your typography is accessible

Material Design Type Scale

Material Design typography specification

Google Fonts

Browse and select fonts

Overview

Essentials

Overview

Typography Configuration

Single Font Family

Advanced Typography Map

Material Design Type Scale

Loading Fonts

Google Fonts

Custom Fonts

Using Typography Styles

In Templates with Utility Classes

In Component Styles with CSS Variables

Typography Best Practices

Examples

Complete Typography Setup

Next Steps

Theming

Accessibility

Material Design Type Scale

Google Fonts

Build docs developers (and LLMs) love

Overview

Essentials

​Overview

​Typography Configuration

​Single Font Family

​Advanced Typography Map

​Material Design Type Scale

​Loading Fonts

​Google Fonts

​Custom Fonts

​Using Typography Styles

​In Templates with Utility Classes

​In Component Styles with CSS Variables

​Typography Best Practices

​Examples

​Complete Typography Setup

​Next Steps

Theming

Accessibility

Material Design Type Scale

Google Fonts

Build docs developers (and LLMs) love

Overview

Typography Configuration

Single Font Family

Advanced Typography Map

Material Design Type Scale

Loading Fonts

Google Fonts

Custom Fonts

Using Typography Styles

In Templates with Utility Classes

In Component Styles with CSS Variables

Typography Best Practices

Examples

Complete Typography Setup

Next Steps