Element Global - Typography

Typography is a foundational, SASS only component that wraps the MDC Typography package.

Basic usage

@use '@element/global/typography';
@use '@element/global/typography/mixins' as typography-mixins;
@use '@element/global/typography/functions' as typography-functions;

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

Sass Mixins

Mixin	Description
`base`	Sets the font to `$font-family`
`typography($style)`	Applies one of the typography styles, including setting the font to `$font-family`
`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.
`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 typography mixin.

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

Sass Variables

A URL that can be included in a CSS @import url(...) call to import a font

Variable	Description
`$font-family`	Sets the font-family string
`$font-family-url`	A URL that can be included in a CSS `@import url(...)` call to import `$font-family` font
`$icon-font-family-url`	A URL that can be included in a CSS `@import url(...)` call to import an icon font
`$font-weight-values`	Defines the usable font weight values: thin, light, regular, medium, bold, and black.
`$styles-headline1`	A map that sets the styles for the `headline1` style
`$styles-headline2`	A map that sets the styles for the `headline2` style
`$styles-headline3`	A map that sets the styles for the `headline3` style
`$styles-headline4`	A map that sets the styles for the `headline4` style
`$styles-headline5`	A map that sets the styles for the `headline5` style
`$styles-headline6`	A map that sets the styles for the `headline6` style
`$styles-subtitle1`	A map that sets the styles for the `subtitle1` style
`$styles-subtitle2`	A map that sets the styles for the `subtitle2` style
`$styles-body1`	A map that sets the styles for the `body1` style
`$styles-body2`	A map that sets the styles for the `body2` style
`$styles-caption`	A map that sets the styles for the `caption` style
`$styles-button`	A map that sets the styles for the `button` style
`$styles-overline`	A map that sets the styles for the `overline` style

Overriding Styles

All styles can be overridden using CSS custom properties or Sass module/global 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.

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

@use "@element/global/typography" with (
  $styles-button: (
    font-size: 16px,
    text-transform: none,
  )
);

@use "@element/global";

Example: Overriding the global font-family property.

@use "sass:string";
@use "@element/global/typography" with (
  $font-family: string.unquote("Arial, Helvetica, sans-serif")
);

@use "@element/global";

Note: If you change the value of $font-family, you should also change $font-family-url to point to your updated font family, or at a minimum set $font-family-url to the empty string so that an unnecessary font is not loaded into your application

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

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

@use '@element/global';
@use ...;