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

customization.mddocs/

Customization

Extensive customization options through CSS custom properties, Sass variables, and style override maps for theming and brand adaptation. Material Typography provides multiple layers of customization to fit different project needs while maintaining design consistency.

Capabilities

CSS Custom Properties

CSS custom properties (CSS variables) provide runtime customization of typography styles without recompiling Sass.

// Global font family override
--mdc-typography-font-family: value;

// Style-specific font family (replace <STYLE> with actual style name)
--mdc-typography-<STYLE>-font-family: value;
--mdc-typography-<STYLE>-font-size: value;
--mdc-typography-<STYLE>-line-height: value;
--mdc-typography-<STYLE>-font-weight: value;
--mdc-typography-<STYLE>-letter-spacing: value;
--mdc-typography-<STYLE>-text-decoration: value;
--mdc-typography-<STYLE>-text-transform: value;

Global Font Family Override:

/* Change base font family for all typography */
:root {
  --mdc-typography-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Or scope to specific containers */
.custom-theme {
  --mdc-typography-font-family: "Playfair Display", serif;
}

Style-Specific Overrides:

:root {
  /* Customize button typography */
  --mdc-typography-button-font-family: "Roboto Condensed", sans-serif;
  --mdc-typography-button-font-size: 16px;
  --mdc-typography-button-text-transform: none;
  --mdc-typography-button-letter-spacing: 0.5px;
  
  /* Customize headline styles */
  --mdc-typography-headline1-font-family: "Playfair Display", serif;
  --mdc-typography-headline1-font-size: 4rem;
  --mdc-typography-headline1-font-weight: 700;
  
  /* Customize body text */
  --mdc-typography-body1-font-size: 18px;
  --mdc-typography-body1-line-height: 1.6;
  --mdc-typography-body2-font-size: 16px;
}

Theme-Specific Customization:

/* Light theme typography */
.light-theme {
  --mdc-typography-font-family: "Inter", sans-serif;
  --mdc-typography-headline1-font-weight: 300;
}

/* Dark theme typography with different weights */
.dark-theme {
  --mdc-typography-font-family: "Inter", sans-serif;
  --mdc-typography-headline1-font-weight: 400; /* Heavier for dark backgrounds */
  --mdc-typography-body1-font-weight: 400;
}

/* Brand-specific overrides */
.brand-theme {
  --mdc-typography-font-family: "Brand Font", sans-serif;
  --mdc-typography-button-text-transform: capitalize;
  --mdc-typography-overline-letter-spacing: 3px;
}

Sass Module Variables

Sass module variables allow compile-time customization when using @use with configuration.

// Primary configuration variable
$font-family: string // Base font family (default: 'Roboto, sans-serif')

// Style override maps (empty by default)
$styles-headline1: map
$styles-headline2: map  
$styles-headline3: map
$styles-headline4: map
$styles-headline5: map
$styles-headline6: map
$styles-subtitle1: map
$styles-subtitle2: map
$styles-body1: map
$styles-body2: map
$styles-caption: map
$styles-button: map
$styles-overline: map

// Font weight mapping
$font-weight-values: map // Weight name to number mapping

Basic Font Family Override:

@use "@material/typography" with (
  $font-family: unquote("Inter, -apple-system, BlinkMacSystemFont, sans-serif")
);

@use "@material/button";
@include button.core-styles;

Style-Specific Overrides:

@use "@material/typography" with (
  $font-family: unquote("Inter, sans-serif"),
  $styles-button: (
    font-size: 16px,
    text-transform: none,
    letter-spacing: 0.5px,
    font-weight: 600
  ),
  $styles-headline1: (
    font-family: unquote("Playfair Display, serif"),
    font-size: 4rem,
    font-weight: 700
  ),
  $styles-body1: (
    font-size: 18px,
    line-height: 1.6
  )
);

@use "@material/button";
@include button.core-styles;

Font Weight Customization:

@use "@material/typography" with (
  $font-weight-values: (
    thin: 100,
    light: 200,      // Lighter than default 300
    regular: 400,
    medium: 600,     // Heavier than default 500  
    bold: 700,
    black: 900
  ),
  $styles-headline1: (
    font-weight: map.get($font-weight-values, light) // Uses 200 instead of 300
  )
);

Sass Global Variables (Legacy)

Global variables provide compatibility with older Sass patterns. Must be defined before importing.

// Global font family
$mdc-typography-font-family: string

// Global style override maps  
$mdc-typography-styles-headline1: map
$mdc-typography-styles-headline2: map
$mdc-typography-styles-headline3: map
$mdc-typography-styles-headline4: map
$mdc-typography-styles-headline5: map
$mdc-typography-styles-headline6: map
$mdc-typography-styles-subtitle1: map
$mdc-typography-styles-subtitle2: map
$mdc-typography-styles-body1: map
$mdc-typography-styles-body2: map
$mdc-typography-styles-caption: map
$mdc-typography-styles-button: map
$mdc-typography-styles-overline: map

Global Variables Usage:

// Define overrides before import
$mdc-typography-font-family: unquote("Inter, sans-serif");

$mdc-typography-styles-button: (
  font-size: 16px,
  text-transform: none,
  letter-spacing: 0.5px
);

$mdc-typography-styles-headline1: (
  font-family: unquote("Playfair Display, serif"),
  font-size: 4rem
);

// Import after variable definitions
@import "@material/typography/mdc-typography";
@import "@material/button/mdc-button";

Customization Patterns

Complete Brand Theme

@use "@material/typography" with (
  $font-family: unquote("Brand Sans, -apple-system, sans-serif"),
  
  // Headline customization
  $styles-headline1: (
    font-family: unquote("Brand Display, serif"),
    font-size: 4rem,
    font-weight: 700,
    letter-spacing: -0.02em
  ),
  $styles-headline2: (
    font-family: unquote("Brand Display, serif"),
    font-weight: 600
  ),
  $styles-headline6: (
    font-weight: 600,
    text-transform: uppercase,
    letter-spacing: 0.1em
  ),
  
  // Body text optimization
  $styles-body1: (
    font-size: 17px,
    line-height: 1.7,
    letter-spacing: 0.01em
  ),
  $styles-body2: (
    font-size: 15px,
    line-height: 1.5
  ),
  
  // UI element customization
  $styles-button: (
    font-family: unquote("Brand Sans, sans-serif"),
    font-size: 16px,
    font-weight: 600,
    text-transform: none,
    letter-spacing: 0.02em
  ),
  $styles-overline: (
    font-weight: 700,
    letter-spacing: 0.15em
  )
);

Responsive Font Sizing

:root {
  /* Base sizes for mobile */
  --mdc-typography-headline1-font-size: 2.5rem;
  --mdc-typography-headline2-font-size: 2rem;
  --mdc-typography-body1-font-size: 16px;
}

@media (min-width: 600px) {
  :root {
    /* Larger sizes for tablet */
    --mdc-typography-headline1-font-size: 3.5rem;
    --mdc-typography-headline2-font-size: 2.5rem;
    --mdc-typography-body1-font-size: 17px;
  }
}

@media (min-width: 960px) {
  :root {
    /* Full sizes for desktop */
    --mdc-typography-headline1-font-size: 6rem;
    --mdc-typography-headline2-font-size: 3.75rem;
    --mdc-typography-body1-font-size: 18px;
  }
}

Accessibility-Focused Customization

:root {
  /* Improved contrast and readability */
  --mdc-typography-body1-font-size: 18px;
  --mdc-typography-body1-line-height: 1.6;
  --mdc-typography-body2-font-size: 16px;
  --mdc-typography-body2-line-height: 1.55;
  
  /* Clearer UI text */
  --mdc-typography-button-font-size: 16px;
  --mdc-typography-caption-font-size: 14px;
  
  /* Reduced motion alternative */
  --mdc-typography-button-text-transform: none;
}

/* High contrast theme */
@media (prefers-contrast: high) {
  :root {
    --mdc-typography-font-family: system-ui, sans-serif;
    --mdc-typography-body1-font-weight: 500;
    --mdc-typography-button-font-weight: 600;
  }
}

Multi-Language Support

// Language-specific typography configurations
@use "@material/typography" with (
  $font-family: unquote("Noto Sans, sans-serif") // Better international support
);

// CSS for specific languages
:lang(ja) {
  --mdc-typography-font-family: "Noto Sans JP", sans-serif;
  --mdc-typography-body1-line-height: 1.8; // More spacing for Japanese
}

:lang(ar) {
  --mdc-typography-font-family: "Noto Sans Arabic", sans-serif;
  direction: rtl;
}

:lang(hi) {
  --mdc-typography-font-family: "Noto Sans Devanagari", sans-serif;
  --mdc-typography-body1-line-height: 1.7;
}

Dynamic Theme Switching

// JavaScript for runtime theme switching
function applyTypographyTheme(theme) {
  const root = document.documentElement;
  
  switch(theme) {
    case 'compact':
      root.style.setProperty('--mdc-typography-body1-font-size', '14px');
      root.style.setProperty('--mdc-typography-body1-line-height', '1.4');
      root.style.setProperty('--mdc-typography-headline1-font-size', '3rem');
      break;
      
    case 'comfortable':
      root.style.setProperty('--mdc-typography-body1-font-size', '18px');
      root.style.setProperty('--mdc-typography-body1-line-height', '1.7');
      root.style.setProperty('--mdc-typography-headline1-font-size', '4rem');
      break;
      
    case 'large-text':
      root.style.setProperty('--mdc-typography-body1-font-size', '20px');
      root.style.setProperty('--mdc-typography-body2-font-size', '18px');
      root.style.setProperty('--mdc-typography-caption-font-size', '16px');
      break;
  }
}

Performance Optimization

// Selective style inclusion to reduce bundle size
@use "@material/typography" with (
  // Only customize styles you actually use
  $styles-headline4: (
    font-size: 2rem,
    line-height: 2.5rem
  ),
  $styles-body1: (
    font-size: 17px,
    line-height: 1.6
  ),
  $styles-button: (
    text-transform: none
  )
);

// Generate only needed classes
@mixin selective-typography-classes {
  .mdc-typography {
    @include typography.base;
  }
  
  // Only include classes you need
  .mdc-typography--headline4 {
    @include typography.typography(headline4);
  }
  
  .mdc-typography--body1 {
    @include typography.typography(body1);
  }
  
  .mdc-typography--button {
    @include typography.typography(button);
  }
}

docs

css-classes.md

customization.md

index.md

sass-mixins.md

typography-styles.md

utility-functions.md

tile.json