Wondering what’s next for npm?Check out our public roadmap! »

    @material/typography

    11.0.0 • Public • Published

    Typography

    Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

    MDC Typography is a foundational module that applies these styles to MDC Web components. The typographic styles in this module are derived from thirteen styles:

    • Headline 1
    • Headline 2
    • Headline 3
    • Headline 4
    • Headline 5
    • Headline 6
    • Subtitle 1
    • Subtitle 2
    • Body 1
    • Body 2
    • Caption
    • Button
    • Overline

    Design & API Documentation

    Installation

    npm install @material/typography
    

    Basic Usage

    HTML Structure

    We recommend using Roboto from Google Fonts:

    <head>
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    </head>
    <body class="mdc-typography">
      <h1 class="mdc-typography--headline1">Big header</h1>
    </body>

    Styles

    @use "@material/typography/mdc-typography";

    Style Customization

    Typography styles

    The typography styles (referred to as <STYLE> below) used in the type system:

    Scale Description
    headline1 The largest text on the screen, reserved for short, important text or numerals
    headline2 Headline variant 2
    headline3 Headline variant 3
    headline4 Headline variant 4
    headline5 Headline variant 5
    headline6 Headline variant 6
    subtitle1 Smaller than headline, reserved for medium-emphasis text that is shorter in length
    subtitle2 Subtitle variant 2
    body1 Used for long-form writing
    body2 Body variant 2
    caption Used sparingly to annotate imagery
    button A call to action used by different types of buttons
    overline Used sparingly to introduce a headline

    CSS Classes

    Some components have a set typographic style. For example, a raised MDC Card uses Body 1, Body 2, and Headline styles.

    If you want to set the typographic style of an element, which is not a Material Design component, you can apply the following CSS classes.

    CSS Class Description
    mdc-typography Sets the font to Roboto
    mdc-typography--<STYLE> Sets font properties as STYLE. Please see Typography styles section

    For example, the headline1 style as a CSS class would be mdc-typography--headline1.

    CSS Custom Properties

    CSS Custom property Description
    --mdc-typography-font-family The base font-family
    --mdc-typography-<STYLE>-font-family The font-family for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-font-size The font-size for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-line-height The line-height for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-font-weight The font-weight for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-letter-spacing The letter-spacing for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-text-decoration The text-decoration for STYLE. Please see Typography styles section
    --mdc-typography-<STYLE>-text-transform The text-transform for STYLE. Please see Typography styles section

    Sass Variables and Mixins

    Mixin Description
    base Sets the font to Roboto
    typography($style) Applies one of the typography styles, including setting the font to Roboto
    smooth-font Adds antialiasing for typography
    overflow-ellipsis Truncates overflow text to one line with an ellipsis
    baseline($top, $bottom, $display) Sets a container's baseline that text content will align to.
    zero-width-prefix Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the baseline mixin is already applied.
    text-baseline($top, $bottom, $display) Sets the baseline of flow text content.

    A note about overflow-ellipsis, overflow-ellipsis should only be used if the element is display: block or display: inline-block.

    $style Values

    These styles can be used as the $style argument for the mdc-typography mixin.

    • headline1
    • headline2
    • headline3
    • headline4
    • headline5
    • headline6
    • subtitle1
    • subtitle2
    • body1
    • body2
    • caption
    • button
    • overline

    Overriding Styles

    All styles can be overridden using CSS custom properties or Sass module/global variables.

    When using Sass module variables, the module must be configured before any other @use statements with a variable named $styles-{style}. The variable should be assigned to a map that contains all the properties you want to override for a particular style.

    When using Sass global variables, they must be defined before the component is imported by setting a global variable named $mdc-typography-styles-{style}.

    Example: Overriding the button font-size and text-transform properties.

    CSS custom properties:

    html {
      --mdc-typography-button-font-size: 16px;
      --mdc-typography-button-text-transform: none;
    }

    Sass module variables:

    @use "@material/typography" with (
      $styles-button: (
        font-size: 16px,
        text-transform: none,
      )
    );
    
    @use "@material/button";
    @include button.core-styles;

    Sass global variables:

    $mdc-typography-styles-button: (
      font-size: 16px,
      text-transform: none,
    );
    
    @import "@material/button/mdc-button";

    Example: Overriding the global font-family property.

    CSS custom properties:

    html {
      --mdc-typography-font-family: Arial, Helvetica, sans-serif;
    }

    Sass module variables:

    @use "@material/typography" with (
      $font-family: unquote("Arial, Helvetica, sans-serif")
    );
    
    @use "@material/button";
    @include button.core-styles;

    Sass global variables:

    $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
    
    @import "@material/button/mdc-button";

    Example: Overriding the font-family property for headline1 and font-family and font-size for headline2.

    CSS custom properties:

    html {
      --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;
      --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;
      --mdc-typography-headline2-font-size: 3.25rem;
    }

    Sass module variables:

    @use "@material/typography" with (
      $styles-headline1: (
        $font-family: unquote("Arial, Helvetica, sans-serif")
      ),
      $styles-headline2: (
        $font-family: unquote("Arial, Helvetica, sans-serif"),
        $font-size: 3.25rem
      )
    );
    
    @use ...

    Sass global variables:

    $mdc-typography-styles-headline1: (
      font-family: unquote("Arial, Helvetica, sans-serif")
    );
    $mdc-typography-styles-headline2: (
      font-family: unquote("Arial, Helvetica, sans-serif"),
      font-size: 3.25rem
    );
    
    @import ...

    Install

    npm i @material/typography

    DownloadsWeekly Downloads

    118,119

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar