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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CSS Classes

Name: tessl/npm-material--typography
Author: tessl

Pre-generated CSS classes for applying Material Design typography styles directly in HTML. These classes are automatically generated when you include the styles.scss file or call the core-styles mixin.

Capabilities

Including CSS Classes

Import styles to generate all CSS classes:

@use "@material/typography/styles";

Or generate classes programmatically:

@use "@material/typography";

@include typography.core-styles;

Base Typography Class

The foundational typography class that sets the Roboto font family and applies font smoothing.

.mdc-typography {
  font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Usage Example:

<body class="mdc-typography">
  <!-- All text inside will use Roboto font with proper smoothing -->
  <div>Content with base typography styling</div>
</body>

Typography Style Classes

Individual classes for each of the thirteen Material Design typography styles.

.mdc-typography--headline1 {
  /* 6rem (96px), light weight, -1.5px letter-spacing */
  font-size: 6rem;
  line-height: 6rem;
  font-weight: 300;
  letter-spacing: -0.09375em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--headline2 {
  /* 3.75rem (60px), light weight, -0.5px letter-spacing */
  font-size: 3.75rem;
  line-height: 3.75rem;
  font-weight: 300;
  letter-spacing: -0.0083333333em;
  text-decoration: inherit;
  text-transform: inherit;
}

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

.mdc-typography--headline4 {
  /* 2.125rem (34px), regular weight, 0.25px letter-spacing */
  font-size: 2.125rem;
  line-height: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.0073529412em;
  text-decoration: inherit;
  text-transform: inherit;
}

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

.mdc-typography--headline6 {
  /* 1.25rem (20px), medium weight, 0.25px letter-spacing */
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.0125em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--subtitle1 {
  /* 1rem (16px), regular weight, 0.15px letter-spacing */
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.009375em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--subtitle2 {
  /* 0.875rem (14px), medium weight, 0.1px letter-spacing */
  font-size: 0.875rem;
  line-height: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.0071428571em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--body1 {
  /* 1rem (16px), regular weight, 0.5px letter-spacing */
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03125em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--body2 {
  /* 0.875rem (14px), regular weight, 0.25px letter-spacing */
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.0178571429em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--caption {
  /* 0.75rem (12px), regular weight, 0.4px letter-spacing */
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.0333333333em;
  text-decoration: inherit;
  text-transform: inherit;
}

.mdc-typography--button {
  /* 0.875rem (14px), medium weight, 1.25px letter-spacing, uppercase */
  font-size: 0.875rem;
  line-height: 2.25rem;
  font-weight: 500;
  letter-spacing: 0.0892857143em;
  text-decoration: none;
  text-transform: uppercase;
}

.mdc-typography--overline {
  /* 0.75rem (12px), medium weight, 2px letter-spacing, uppercase */
  font-size: 0.75rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.1666666667em;
  text-decoration: none;
  text-transform: uppercase;
}

Usage Examples:

<!-- Headline hierarchy -->
<h1 class="mdc-typography--headline1">Main Title</h1>
<h2 class="mdc-typography--headline2">Section Title</h2>
<h3 class="mdc-typography--headline6">Subsection Title</h3>

<!-- Body text -->
<p class="mdc-typography--body1">Primary body text with comfortable reading size.</p>
<p class="mdc-typography--body2">Secondary body text, slightly smaller.</p>

<!-- UI text -->
<button class="mdc-typography--button">Click Me</button>
<span class="mdc-typography--caption">Image caption text</span>
<span class="mdc-typography--overline">Section Label</span>

<!-- Subtitles -->
<p class="mdc-typography--subtitle1">Primary subtitle</p>
<p class="mdc-typography--subtitle2">Secondary subtitle</p>

Complete HTML Template

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link rel="stylesheet" href="path/to/compiled/typography.css">
</head>
<body class="mdc-typography">
  <!-- Typography hierarchy example -->
  <article>
    <h1 class="mdc-typography--headline1">Article Title</h1>
    <p class="mdc-typography--subtitle1">Article subtitle with important details</p>
    <span class="mdc-typography--overline">News</span>
    
    <section>
      <h2 class="mdc-typography--headline4">Section Heading</h2>
      <p class="mdc-typography--body1">
        Main body content that is easy to read and follows Material Design
        typography guidelines for optimal reading experience.
      </p>
      <p class="mdc-typography--body2">
        Secondary body text that provides additional context or details.
      </p>
      <p class="mdc-typography--caption">
        Caption text for images or additional metadata
      </p>
    </section>
    
    <footer>
      <button class="mdc-typography--button">Read More</button>
    </footer>
  </article>
</body>
</html>

Class Combination Patterns

Base Class Required

All typography classes work best when the base .mdc-typography class is applied to a parent element to ensure proper font loading and smoothing:

<!-- Recommended: Base class on parent -->
<div class="mdc-typography">
  <h1 class="mdc-typography--headline1">Title</h1>
  <p class="mdc-typography--body1">Content</p>
</div>

<!-- Alternative: Base class on each element -->
<h1 class="mdc-typography mdc-typography--headline1">Title</h1>
<p class="mdc-typography mdc-typography--body1">Content</p>

Responsive Typography

Typography classes can be combined with responsive utilities or media queries for adaptive text sizing:

/* Custom responsive behavior */
@media (max-width: 768px) {
  .mdc-typography--headline1 {
    font-size: 3rem; /* Smaller headline on mobile */
  }
}