CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-material--typography

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

typography-styles.mddocs/

Typography Styles

Thirteen predefined Material Design typography styles with precise specifications for font size, weight, line height, and letter spacing. These styles form a coherent typographic scale designed for optimal readability and visual hierarchy.

Capabilities

Typography Scale Overview

Material Design typography uses a type scale based on thirteen styles that provide a range of contrasting styles that support the needs of your product and its content.

// Available typography style names
headline1   // Largest text on screen, reserved for short, important text
headline2   // Headline variant 2  
headline3   // Headline variant 3
headline4   // Headline variant 4
headline5   // Headline variant 5
headline6   // Headline variant 6 (smallest headline)
subtitle1   // Smaller than headline, medium-emphasis text
subtitle2   // Subtitle variant 2
body1       // Used for long-form writing (primary body text)
body2       // Body variant 2 (secondary body text)
caption     // Used sparingly to annotate imagery
button      // Call to action used by different types of buttons
overline    // Used sparingly to introduce a headline

Headline Styles

Large, prominent text styles for titles and major headings.

// headline1: 6rem (96px), light weight
font-size: 6rem;
line-height: 6rem;
font-weight: 300;
letter-spacing: -0.09375em; // -1.5px at 16px base
text-decoration: inherit;
text-transform: inherit;

// headline2: 3.75rem (60px), light weight  
font-size: 3.75rem;
line-height: 3.75rem;
font-weight: 300;
letter-spacing: -0.0083333333em; // -0.5px at 16px base
text-decoration: inherit;
text-transform: inherit;

// headline3: 3rem (48px), regular weight
font-size: 3rem;
line-height: 3.125rem;
font-weight: 400;
letter-spacing: normal;
text-decoration: inherit;
text-transform: inherit;

// headline4: 2.125rem (34px), regular weight
font-size: 2.125rem;
line-height: 2.5rem;
font-weight: 400;
letter-spacing: 0.0073529412em; // 0.25px at 16px base
text-decoration: inherit;
text-transform: inherit;

// headline5: 1.5rem (24px), regular weight
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
letter-spacing: normal;
text-decoration: inherit;
text-transform: inherit;

// headline6: 1.25rem (20px), medium weight
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.0125em; // 0.25px at 16px base
text-decoration: inherit;
text-transform: inherit;

Usage Examples:

<h1 class="mdc-typography--headline1">Page Title</h1>
<h2 class="mdc-typography--headline2">Section Title</h2>
<h3 class="mdc-typography--headline3">Major Heading</h3>
<h4 class="mdc-typography--headline4">Content Heading</h4>
<h5 class="mdc-typography--headline5">Subheading</h5>
<h6 class="mdc-typography--headline6">Minor Heading</h6>
@use "@material/typography";

.hero-title {
  @include typography.typography(headline1);
}

.section-header {
  @include typography.typography(headline4);
}

Subtitle Styles

Medium-emphasis text styles for secondary headings and important content.

// subtitle1: 1rem (16px), regular weight
font-size: 1rem;
line-height: 1.75rem;
font-weight: 400;
letter-spacing: 0.009375em; // 0.15px at 16px base
text-decoration: inherit;
text-transform: inherit;

// subtitle2: 0.875rem (14px), medium weight
font-size: 0.875rem;
line-height: 1.375rem;
font-weight: 500;
letter-spacing: 0.0071428571em; // 0.1px at 16px base
text-decoration: inherit;
text-transform: inherit;

Usage Examples:

<p class="mdc-typography--subtitle1">Article subtitle or important summary</p>
<p class="mdc-typography--subtitle2">Secondary subtitle or metadata</p>
@use "@material/typography";

.article-subtitle {
  @include typography.typography(subtitle1);
  margin-bottom: 24px;
}

.card-subtitle {
  @include typography.typography(subtitle2);
  opacity: 0.87;
}

Body Text Styles

Standard text styles for content and reading material.

// body1: 1rem (16px), regular weight - Primary body text
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
letter-spacing: 0.03125em; // 0.5px at 16px base
text-decoration: inherit;
text-transform: inherit;

// body2: 0.875rem (14px), regular weight - Secondary body text
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.0178571429em; // 0.25px at 16px base
text-decoration: inherit;
text-transform: inherit;

Usage Examples:

<p class="mdc-typography--body1">
  Primary body text for articles, descriptions, and main content. 
  This size provides optimal readability for longer passages of text.
</p>

<p class="mdc-typography--body2">
  Secondary body text for additional information, captions, or 
  supporting details that require less emphasis.
</p>
@use "@material/typography";

.article-content {
  @include typography.typography(body1);
  margin-bottom: 16px;
}

.metadata {
  @include typography.typography(body2);
  color: rgba(0, 0, 0, 0.6);
}

UI Text Styles

Specialized text styles for user interface elements.

// caption: 0.75rem (12px), regular weight - Small explanatory text
font-size: 0.75rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.0333333333em; // 0.4px at 16px base
text-decoration: inherit;
text-transform: inherit;

// button: 0.875rem (14px), medium weight - Button text
font-size: 0.875rem;
line-height: 2.25rem;
font-weight: 500;
letter-spacing: 0.0892857143em; // 1.25px at 16px base
text-decoration: none;
text-transform: uppercase;

// overline: 0.75rem (12px), medium weight - Section labels
font-size: 0.75rem;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.1666666667em; // 2px at 16px base
text-decoration: none;
text-transform: uppercase;

Usage Examples:

<!-- Caption text -->
<img src="image.jpg" alt="Description">
<p class="mdc-typography--caption">Figure 1: Image caption describing the content</p>

<!-- Button text -->
<button class="mdc-typography--button">Click Me</button>
<a href="#" class="mdc-typography--button">Learn More</a>

<!-- Overline text -->
<span class="mdc-typography--overline">News</span>
<h2 class="mdc-typography--headline4">Breaking Headlines</h2>
@use "@material/typography";

.image-caption {
  @include typography.typography(caption);
  text-align: center;
  margin-top: 8px;
}

.cta-button {
  @include typography.typography(button);
  padding: 8px 16px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
}

.section-label {
  @include typography.typography(overline);
  color: #1976d2;
  margin-bottom: 8px;
}

Style Hierarchy and Usage Guidelines

Semantic HTML Mapping

Recommended mapping of typography styles to HTML semantic elements:

<!-- Document structure -->
<h1 class="mdc-typography--headline1">    <!-- Page title -->
<h2 class="mdc-typography--headline2">    <!-- Major section -->
<h3 class="mdc-typography--headline3">    <!-- Section heading -->
<h4 class="mdc-typography--headline4">    <!-- Subsection -->
<h5 class="mdc-typography--headline5">    <!-- Sub-subsection -->
<h6 class="mdc-typography--headline6">    <!-- Minor heading -->

<!-- Content text -->
<p class="mdc-typography--body1">         <!-- Primary paragraphs -->
<p class="mdc-typography--body2">         <!-- Secondary paragraphs -->
<p class="mdc-typography--subtitle1">     <!-- Important summaries -->
<p class="mdc-typography--subtitle2">     <!-- Secondary summaries -->

<!-- UI elements -->
<button class="mdc-typography--button">   <!-- Action buttons -->
<span class="mdc-typography--caption">    <!-- Help text, captions -->
<span class="mdc-typography--overline">   <!-- Section labels -->

Visual Hierarchy Example

Complete page structure demonstrating proper typographic hierarchy:

<article class="mdc-typography">
  <!-- Page title -->
  <h1 class="mdc-typography--headline1">The Future of Design</h1>
  
  <!-- Article subtitle -->
  <p class="mdc-typography--subtitle1">
    Exploring how Material Design principles shape digital experiences
  </p>
  
  <!-- Section label and heading -->
  <span class="mdc-typography--overline">Introduction</span>
  <h2 class="mdc-typography--headline4">Understanding Design Systems</h2>
  
  <!-- Body content -->
  <p class="mdc-typography--body1">
    Design systems provide a comprehensive set of standards and guidelines
    that ensure consistency across digital products and experiences.
  </p>
  
  <p class="mdc-typography--body2">
    Material Design represents one of the most comprehensive design systems,
    offering detailed guidance on typography, color, and interaction patterns.
  </p>
  
  <!-- Subsection -->
  <h3 class="mdc-typography--headline6">Typography in Design Systems</h3>
  
  <p class="mdc-typography--body1">
    Typography plays a crucial role in establishing hierarchy and guiding
    user attention throughout the interface.
  </p>
  
  <!-- Image with caption -->
  <img src="design-system.jpg" alt="Design system components">
  <p class="mdc-typography--caption">
    Figure 1: Core components of a modern design system
  </p>
  
  <!-- Call to action -->
  <button class="mdc-typography--button">Learn More</button>
</article>

Responsive Typography Considerations

Typography styles work well across different screen sizes, but consider these patterns for responsive design:

@use "@material/typography";

// Responsive headline scaling
.hero-title {
  @include typography.typography(headline4); // Mobile
  
  @media (min-width: 600px) {
    @include typography.typography(headline2); // Tablet
  }
  
  @media (min-width: 960px) {
    @include typography.typography(headline1); // Desktop
  }
}

// Responsive body text
.article-text {
  @include typography.typography(body2); // Mobile (smaller)
  
  @media (min-width: 600px) {
    @include typography.typography(body1); // Tablet+ (larger)
  }
}

docs

css-classes.md

customization.md

index.md

sass-mixins.md

typography-styles.md

utility-functions.md

tile.json