or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-classes.mdcustomization.mdindex.mdsass-mixins.mdtypography-styles.mdutility-functions.md
tile.json

tessl/npm-material--typography

Typography classes, mixins, and variables for Material Components for the web

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@material/typography@13.0.x

To install, run

npx @tessl/cli install tessl/npm-material--typography@13.0.0

index.mddocs/

Material Typography

Material Typography provides a comprehensive Material Design typography system that implements thirteen typographic styles for consistent text sizing and styling across web applications. It offers both CSS classes and Sass mixins for applying typography styles, supports extensive customization through CSS custom properties and Sass variables, and integrates seamlessly with other Material Components.

Package Information

  • Package Name: @material/typography
  • Package Type: npm
  • Language: SCSS (Sass)
  • Installation: npm install @material/typography

Core Imports

Standard Sass import (forwards all public API):

@use "@material/typography";

Import with configuration:

@use "@material/typography" with (
  $font-family: unquote("Arial, sans-serif"),
  $styles-button: (
    font-size: 16px,
    text-transform: none,
  )
);

Pre-compiled CSS import:

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

Direct file imports:

@use "@material/typography/typography"; // Main implementation
@use "@material/typography/variables";  // Variables only
@use "@material/typography/mixins";     // Mixins only (deprecated)
@use "@material/typography/functions";  // Functions only (deprecated)
@use "@material/typography/styles";     // CSS classes only

Legacy import patterns (for compatibility):

// Import with prefixed names (legacy)
@use "@material/typography/mdc-typography.import" as mdc-typography;

// Global imports (deprecated)
@import "@material/typography/mdc-typography";

Basic Usage

HTML Structure with CSS Classes

<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>
  <h2 class="mdc-typography--headline6">Smaller header</h2>
  <p class="mdc-typography--body1">Body text content</p>
  <p class="mdc-typography--caption">Caption text</p>
</body>

SCSS Integration

Include CSS classes automatically:

@use "@material/typography/styles";

Apply styles via mixins:

@use "@material/typography";

.my-heading {
  @include typography.typography(headline1);
}

.my-text {
  @include typography.base;
  @include typography.typography(body1);
}

CSS Custom Properties

:root {
  --mdc-typography-font-family: "Custom Font", sans-serif;
  --mdc-typography-headline1-font-size: 4rem;
  --mdc-typography-button-text-transform: none;
}

Architecture

Material Typography is built around several key components:

  • Typography Styles: Thirteen predefined Material Design typography styles (headline1-6, subtitle1-2, body1-2, caption, button, overline)
  • CSS Classes: Pre-generated CSS classes for each typography style, available via styles.scss
  • Sass Mixins: Programmatic application of typography styles with feature targeting support
  • Customization System: CSS custom properties and Sass variables for theming and style overrides
  • Baseline System: Advanced baseline alignment utilities for precise text positioning
  • Font Loading: Roboto font integration with proper antialiasing and smoothing

Capabilities

CSS Classes

Pre-generated CSS classes for applying Material Design typography styles directly in HTML. Includes base font styling and all thirteen typography variants.

// Generated classes (when including styles.scss)
.mdc-typography            // Base typography styles (Roboto font)
.mdc-typography--headline1 // Headline 1 style (6rem, light)
.mdc-typography--headline2 // Headline 2 style (3.75rem, light)
.mdc-typography--headline3 // Headline 3 style (3rem, regular)
.mdc-typography--headline4 // Headline 4 style (2.125rem, regular)
.mdc-typography--headline5 // Headline 5 style (1.5rem, regular)
.mdc-typography--headline6 // Headline 6 style (1.25rem, medium)
.mdc-typography--subtitle1 // Subtitle 1 style (1rem, regular)
.mdc-typography--subtitle2 // Subtitle 2 style (0.875rem, medium)
.mdc-typography--body1     // Body 1 style (1rem, regular)
.mdc-typography--body2     // Body 2 style (0.875rem, regular)
.mdc-typography--caption   // Caption style (0.75rem, regular)
.mdc-typography--button    // Button style (0.875rem, medium, uppercase)
.mdc-typography--overline  // Overline style (0.75rem, medium, uppercase)

CSS Classes

Sass Mixins

Programmatic application of typography styles with advanced features like feature targeting, style exclusion, and baseline alignment utilities.

@mixin core-styles($query: feature-targeting.all());
@mixin base($query: feature-targeting.all());
@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ());
@mixin smooth-font($query: feature-targeting.all());
@mixin overflow-ellipsis($query: feature-targeting.all());
@mixin baseline($top: 0, $bottom: 0, $display: block, $query: feature-targeting.all());
@mixin text-baseline($top: 0, $bottom: 0, $display: block, $lineHeight: normal, $query: feature-targeting.all());

Sass Mixins

Typography Styles

Thirteen predefined Material Design typography styles with precise specifications for font size, weight, line height, and letter spacing.

// Available style names for mixins and functions
headline1  // 6rem (96px), light weight, -1.5px letter-spacing
headline2  // 3.75rem (60px), light weight, -0.5px letter-spacing  
headline3  // 3rem (48px), regular weight, normal letter-spacing
headline4  // 2.125rem (34px), regular weight, 0.25px letter-spacing
headline5  // 1.5rem (24px), regular weight, normal letter-spacing
headline6  // 1.25rem (20px), medium weight, 0.25px letter-spacing
subtitle1  // 1rem (16px), regular weight, 0.15px letter-spacing
subtitle2  // 0.875rem (14px), medium weight, 0.1px letter-spacing
body1      // 1rem (16px), regular weight, 0.5px letter-spacing
body2      // 0.875rem (14px), regular weight, 0.25px letter-spacing
caption    // 0.75rem (12px), regular weight, 0.4px letter-spacing
button     // 0.875rem (14px), medium weight, 1.25px letter-spacing, uppercase
overline   // 0.75rem (12px), medium weight, 2px letter-spacing, uppercase

Typography Styles

Customization

Extensive customization options through CSS custom properties, Sass variables, and style override maps for theming and brand adaptation.

// CSS Custom Properties
--mdc-typography-font-family
--mdc-typography-<STYLE>-font-family
--mdc-typography-<STYLE>-font-size
--mdc-typography-<STYLE>-line-height
--mdc-typography-<STYLE>-font-weight
--mdc-typography-<STYLE>-letter-spacing
--mdc-typography-<STYLE>-text-decoration  
--mdc-typography-<STYLE>-text-transform

// Sass Variables  
$font-family: 'Roboto, sans-serif'
$styles-<style>: () // Override maps for each style
$font-weight-values: () // Font weight name mappings

Customization

Utility Functions

Helper functions for working with typography styles, measurements, and style validation.

@function px-to-rem($px): length;
@function is-typography-style($style): boolean;
@function get-typography-styles(): list;
@function get-font($typography): string;
@function get-line-height($typography): length;
@function get-size($typography): length;
@function get-weight($typography): number;
@function get-tracking($typography): length;

Utility Functions