Typography

Typography includes 30 styles, including 15 classic styles and 15 emphasized styles. These 15 styles are composed of 5 parts.:

• Display
• Headline
• Title
• Body
• Label

Each part has three sizes:

• Large
• Medium
• Small

Each of the 30 styles has a single token that captures all the default properties. Tokens are separated into the baseline and emphasized sets. Each axis and property, such as font, line height, size, tracking, and weight, also has an individual token for greater customization.

For a detailed description of M3 Typography, see Definition of M3 Typography.

Import

Via JS/TS

import "@sandlada/material-design-css/typography.css"

Via CSS

@import "@sandlada/material-design-css/typography.css";

Usage

Classic Style

display-largedisplay-mediumdisplay-smallheadline-largeheadline-mediumheadline-smalltitle-largetitle-mediumtitle-smallbody-largebody-mediumbody-smalllabel-largelabel-mediumlabel-small

<section>
    <span class="block display-large">display-large</span>
    <span class="block display-medium">display-medium</span>
    <span class="block display-small">display-small</span>
    <span class="block headline-large">headline-large</span>
    <span class="block headline-medium">headline-medium</span>
    <span class="block headline-small">headline-small</span>
    <span class="block title-large">title-large</span>
    <span class="block title-medium">title-medium</span>
    <span class="block title-small">title-small</span>
    <span class="block body-large">body-large</span>
    <span class="block body-medium">body-medium</span>
    <span class="block body-small">body-small</span>
    <span class="block label-large">label-large</span>
    <span class="block label-medium">label-medium</span>
    <span class="block label-small">label-small</span>
</section>

<style>
    .block {
        dispay: block;
    }
</style>

Emphasized Style

display-largedisplay-mediumdisplay-smallheadline-largeheadline-mediumheadline-smalltitle-largetitle-mediumtitle-smallbody-largebody-mediumbody-smalllabel-largelabel-mediumlabel-small

<section>
    <span class="block emphasized-display-large">display-large</span>
    <span class="block emphasized-display-medium">display-medium</span>
    <span class="block emphasized-display-small">display-small</span>
    <span class="block emphasized-headline-large">headline-large</span>
    <span class="block emphasized-headline-medium">headline-medium</span>
    <span class="block emphasized-headline-small">headline-small</span>
    <span class="block emphasized-title-large">title-large</span>
    <span class="block emphasized-title-medium">title-medium</span>
    <span class="block emphasized-title-small">title-small</span>
    <span class="block emphasized-body-large">body-large</span>
    <span class="block emphasized-body-medium">body-medium</span>
    <span class="block emphasized-body-small">body-small</span>
    <span class="block emphasized-label-large">label-large</span>
    <span class="block emphasized-label-medium">label-medium</span>
    <span class="block emphasized-label-small">label-small</span>
</section>

<style>
    .block {
        dispay: block;
    }
</style>