Variables

rmd-typography-font-family

String

The font family to use throughout the entire application.

$rmd-typography-font-family: Roboto, sans-serif !default;

rmd-typography-mobile-max-line-length

Number

The max length a line of text can be on mobile devices.

$rmd-typography-mobile-max-line-length: 17em !default;

rmd-typography-desktop-max-line-length

Number

The max length a line of text can be on larger screens (mostly desktops or landscape tablets).

$rmd-typography-desktop-max-line-length: 40em !default;

rmd-typography-text-container-breakpoint

Number

The device width that should be used to swap between the mobile and desktop text container widths.

$rmd-typography-text-container-breakpoint: 37.5rem !default;

rmd-typography-base

Map

The base styles for typography.

Default compiled value

$rmd-typography-base: (
  font-family: $rmd-typography-font-family,
  -moz-osx-font-smoothing: grayscale,
  -webkit-font-smoothing: antialiased,
);

Used By

rmd-typography-thin

Number

The thin font weight to use.

$rmd-typography-thin: 100 !default;

rmd-typography-light

Number

The light font weight to use.

$rmd-typography-light: 300 !default;

rmd-typography-regular

Number

The regular font weight to use.

$rmd-typography-regular: 400 !default;

rmd-typography-medium

Number

The medium font weight to use.

$rmd-typography-medium: 500 !default;

rmd-typography-bold

Number

The bold font weight to use.

$rmd-typography-bold: 700 !default;

rmd-typography-semi-bold

Number

The semi-bold font weight to use.

$rmd-typography-semi-bold: 800 !default;

rmd-typography-black

Number

The darkest font weight to use.

$rmd-typography-black: 900 !default;

rmd-typography-font-weights

Map

A Map of all the font weights.

Default compiled value

$rmd-typography-font-weights: (
  thin: $rmd-typography-thin,
  light: $rmd-typography-light,
  regular: $rmd-typography-regular,
  medium: $rmd-typography-medium,
  bold: $rmd-typography-bold,
  semi-bold: $rmd-typography-semi-bold,
  black: $rmd-typography-black,
) !default;

Used By

rmd-typography-default-font-weights

List

A list of the "default" font weights that are normally included within an app. This is really only used for hosting fonts on your own server.

Each value in this should be one of the keys in $rmd-typography-font-weights.

$rmd-typography-default-font-weights: light regular medium bold !default;

Used By

rmd-typography-colors

Map

A map of colors that should be added for the Text component. If you aren't going to use the color prop on the Text component, set this value to an empty map to reduce your bundle size by a slight amount.

$rmd-typography-colors: (
  secondary: text-secondary-on-background,
  hint: text-hint-on-background,
  theme-primary: primary,
  theme-secondary: secondary,
  theme-warning: warning,
  theme-error: error,
) !default;

Used By

rmd-typography-alignments

List

A list of text-align styles to generate. If you don't want the helper classes for text alignment, set this to an empty list to reduce your bundle size by a slight amount.

$rmd-typography-alignments: left center right !default;

Used By

rmd-typography-decorations

List

A list of text-decoration to apply. If you don't want the helper classes for text decoration, set this to an empty list to reduce your bundle size by a slight amount.

$rmd-typography-decorations: underline overline line-through !default;

Used By

rmd-typography-transforms

List

A list of text-transform to apply. If you don't want the helper classes for text transformation, set this to an empty list to reduce your bundle size by a slight amount.

$rmd-typography-transforms: capitalize uppercase lowercase !default;

Used By

rmd-typography-font-styles

List

A list of font-style to apply. If you don't want the helper classes for the font styles, set this to an empty list to reduce your bundle size by a slight amount.

$rmd-typography-font-styles: normal italic oblique !default;

Used By

rmd-typography-google-font-weight-suffixes

Map

A Map of font weights to a font file suffix for a Google font.

$rmd-typography-google-font-weight-suffixes: (
  thin: '-Thin',
  light: '-Light',
  regular: '-Regular',
  medium: '-Medium',
  bold: '-Bold',
  semi-bold: '-SemiBold',
  black: '-Black',
) !default;

Used By

rmd-typography-styles

Map

A Map containing of all the typography styles in react-md with reasonable defaults. Unlike most variables within react-md, this Map is not configurable itself and instead you can create global variables to override the styles for all the different typography styles. The global variables should be a Map of styles to apply, merge, and override the default styles with the name format of: rmd-typography-styles-{{NAME}}. Here's a list of all the possible variables:

$rmd-typography-styles-headline-1
$rmd-typography-styles-headline-2
$rmd-typography-styles-headline-3
$rmd-typography-styles-headline-4
$rmd-typography-styles-headline-5
$rmd-typography-styles-headline-6
$rmd-typography-styles-body-1
$rmd-typography-styles-body-2
$rmd-typography-styles-button
$rmd-typography-styles-caption
$rmd-typography-styles-overline

Default compiled value

$rmd-typography-styles: rmd-typography-set-styles(
  $rmd-typography-base,
  (
    headline-1: (
      font-size: 6rem,
      line-height: 6rem,
      font-weight: map-get($rmd-typography-font-weights, light),
      letter-spacing: rmd-typography-get-letter-spacing(-1.5, 6),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-2: (
      font-size: 3.75rem,
      line-height: 3.75rem,
      font-weight: map-get($rmd-typography-font-weights, light),
      letter-spacing: rmd-typography-get-letter-spacing(-0.5, 3.75),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-3: (
      font-size: 3rem,
      line-height: 3.125rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: normal,
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-4: (
      font-size: 2.125rem,
      line-height: 2.5rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 2.125),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-5: (
      font-size: 1.5rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: normal,
      text-decoration: inherit,
      text-transform: inherit,
    ),
    headline-6: (
      font-size: 1.25rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 1.25),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    subtitle-1: (
      font-size: 1rem,
      line-height: 1.75rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.15, 1),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    subtitle-2: (
      font-size: 0.875rem,
      line-height: 1.375rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(0.1, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    body-1: (
      font-size: 1rem,
      line-height: 1.5rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.5, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    body-2: (
      font-size: 0.875rem,
      line-height: 1.25rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.25, 0.875),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    caption: (
      font-size: 0.75rem,
      line-height: 1.25rem,
      font-weight: map-get($rmd-typography-font-weights, regular),
      letter-spacing: rmd-typography-get-letter-spacing(0.4, 0.75),
      text-decoration: inherit,
      text-transform: inherit,
    ),
    button: (
      font-size: 0.875rem,
      line-height: 2.25rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(1.25, 0.875),
      text-decoration: none,
      text-transform: uppercase,
    ),
    overline: (
      font-size: 0.75rem,
      line-height: 2rem,
      font-weight: map-get($rmd-typography-font-weights, medium),
      letter-spacing: rmd-typography-get-letter-spacing(2, 0.75),
      text-decoration: none,
      text-transform: uppercase,
    ),
  )
);

Examples

Default Typography Values

Compiled output

@each $style in map-keys($rmd-typography-styles) {
  .#{$style} {
    @include rmd-typography($style);
  }
}

Overriding Typography Values

Compiled output

$rmd-typography-styles-headline-1: (
  font-size: 4rem,
  line-height: 4rem,
  margin: 0,
);
$rmd-typography-styles-headline-2: (
  font-size: 3.5rem,
  line-height: 3.5rem,
  margin: 0,
);
$rmd-typography-styles-headline-3: (
  margin: 0,
);
$rmd-typography-styles-headline-4: (
  margin: 0,
);
$rmd-typography-styles-headline-5: (
  margin: 0,
);
$rmd-typography-styles-headline-6: (
  margin: 0,
);

@each $style in map-keys($rmd-typography-styles) {
  .#{$style} {
    @include rmd-typography($style);
  }
}

Used By

rmd-typography-theme-values

Map

A Map of all the "themeable" parts of the typography package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

Default compiled value

$rmd-typography-theme-values: (
  line-width: $rmd-typography-desktop-max-line-length,
  mobile-line-width: $rmd-typography-mobile-max-line-length,
  desktop-line-width: $rmd-typography-desktop-max-line-length,
) !default;

Used By

Mixins

rmd-typography-theme

mixin

Creates the styles for one of the typography's theme values. This is mostly going to be an internal helper mixin util.

Parameters
Name	Description	Type	Default Value
`$property`	The property to set a `rmd-typography-theme-values` value to.	`String`	—
`$theme-style`	One of the keys of `rmd-typography-theme-values` to extract a value from.	`String`	—
`$fallback`	A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the `rmd-typography-theme-values` map when `null`.	`Color\|String\|Number`	`null`

Used By

Requires

rmd-typography-theme-update-var

mixin

Updates one of the typography's theme variables with the new value for the section of your app.

Parameters
Name	Description	Type	Default Value
`$theme-style`	The typography theme style type to update. This should be one of the `$rmd-typography-theme-values` keys.	`String`	—
`$value`	The new value to use.	`Color\|String\|Number`	—

Used By

Requires

rmd-typography-value

mixin

Applies each property value from the $rmd-typography-styles map that matches the style name.

Parameters
Name	Description	Type	Default Value
`$style`	The typography style to get value(s) for. This should be one of the keys from the `$rmd-typography-styles` map.	`String`	—
`$properties`	A list of properties to get and create. When no properties are provided, it will default to using `font-size`.	`String...`	`font-size`

Examples

Simple Examples

Compiled output

.body-1-font-size {
  // when no properties are provided, it will default to font-size
  @include rmd-typography-value(body-1);
}

.headline-4-letter-spacing {
  @include rmd-typography-value(headline-4, letter-spacing);
}

.caption-styles {
  @include rmd-typography-value(
    caption,
    font-size,
    letter-spacing,
    line-height
  );
}

Used By

Requires

rmd-typography-base

mixin

Applies the base typography styles to an element.

Examples

Example Usage SCSS

Compiled output

.custom-class-name {
  @include rmd-typography-base;

  font-size: 1.3rem;
}

Used By

Requires

rmd-typography

mixin

Applies one of the provided material design styles to an element.

Parameters
Name	Description	Type	Default Value
`$style`	One of the typography styles from `$rmd-typography-styles`.	`String`	—
`$omit`	A list of keys to omit	`List`	—

Used By

Requires

rmd-text-container-base

mixin

Creates the base styles required for the text container. These styles are used to be able to center the text in a container once the max-width value has also been applied.

Used By

Requires

rmd-text-container-auto

mixin

This will generate the styles to apply to an element that will set the max width for legibility. By default, this will create styles that change based on the provided $mobile-breakpoint and apply different max widths on a media query. This feature can be disabled by setting the $mobile-breakpoint or the $desktop-max-width parameters to null.

Unlike everything else in react-md, the text container relies on having the box-sizing set to content-box so that the text contents can be centered correctly with a max width and padding. When this is set to border-box, you will lose the padding real estate in your text container which is something that might not be desired. Keeping this as content-box will allow padding to be applied without shrinking the max line length.

Parameters
Name	Description	Type	Default Value
`$mobile-max-width`	The max width for a line of text on mobile devices. This number is recommended to be between 17em and 18em.	`Number`	`$rmd-typography-mobile-max-line-length`
`$desktop-max-width`	The max width for a line of text on desktop screens. This number is recommended to be between 38em and 42em.	`Number`	`$rmd-typography-desktop-max-line-length`
`$mobile-breakpoint`	The breakpoint for switching between a mobile device and a desktop screen. This is used to automatically change the max line-width for better legibility.	`Number`	`$rmd-typography-text-container-breakpoint`

Examples

Creating a "blog"

Compiled output

.blog {
  @include rmd-text-container-base;
  @include rmd-text-container-auto;
}

.title {
  @include rmd-typography(headline-2);
}

.paragraph {
  @include rmd-typography(headline-4);

  @media (max-width: 800px) {
    @include rmd-typography(headline-5);
  }
}

Creating a "blog"

<main class="blog">
  <h1 class="title">Blog Title</h1>
  <p class="paragraph">Lorem ipsum...</p>
  <p class="paragraph">Lorem ipsum...</p>
</main>

Used By

Requires

rmd-text-container

mixin

Creates all the styles for the text container component.

Used By

Requires

rmd-typography-text-overflow-ellipsis

mixin

A simple mixin that can be used to update an element to ellipsis text when it is too long.

Examples

Example Usage

Compiled output

.truncate-this {
  @include rmd-typography-text-overflow-ellipsis;

  width: 5rem;
}

Used By

rmd-typography-line-clamp

mixin

A simple mixin that allows you to use the -webkit-box behavior for overflowing text that spans multiple lines

Parameters
Name	Description	Type	Default Value
`$lines`	The number of lines that the text should be clamped to.	`String\|Number`	`2`

Used By

react-md-typography

mixin

Creates all the typography styles from the react-md typography variables.

Used By

Requires

rmd-typography-google-font-face

mixin

Creates the font face declaration for a Google font with a provided font weight. This will need to be called multiple times if you are including multiple font weights.

This should only be used if you are hosting the Google font locally instead of through the Google fonts service.

Parameters
Name	Description	Type	Default Value
`$font-name`	The font name to use.	`String`	`Roboto`
`$font-weight`	The font weight to use.	`String`	`map-get($rmd-typography-font-weights, regular)`
`$font-url-or-prefix`	This is either a font url prefix for the folder containing the font on your server or a url string to the font icon file on your server. If you are using create-react-app, you must use the url string approach for it to be correctly included in the build process. If this value is null, it will default to have '/fonts/' prefix and then a caterpillar-cased string. See the examples above for more details.	`String`	`null`

Examples

Example Usage SCSS

Compiled output

@include rmd-typography-google-font-face(Roboto, regular, null);
@include rmd-typography-google-font-face('Source Code Pro', regular, null);

Used By

Requires

rmd-typography-host-google-font

mixin

Generates all the font faces (with font weights) for a Google font. This should only be used if you are hosting the Google font on your own servers instead of through the Google fonts service.

If you are using create-react-app, you must provide the $font-url-prefix-or-url-map as a Map of urls to have the font files correctly included and bundled during your build. See the examples for more details.

Parameters
Name	Description	Type	Default Value
`$font-name`	The font name to use.	`String`	`Roboto`
`$weights`	A list of font weights to use. These should be one of the `$rmd-typography-font-weights` keys.	`List`	`$rmd-typography-default-font-weights`
`$font-url-prefix-or-url-map`	This is either a font url prefix for the folder containing the font on your server or a url string to the font icon file on your server. If you are using create-react-app, you must use the url string approach for it to be correctly included in the build process. If this value is null, it will default to have '/fonts/' prefix and then a caterpillar-cased string. See the `rmd-typography-google-font-face` mixin for more details.	`Map\|String`	`null`

Examples

Using Absolute Paths

Compiled output

// This example will assume that your fonts have been downloaded and
// copied into a `public/fonts` directory within create-react-app.
// The fonts will not be bundled with your normal build process and just
// will be static assets.

// The next 3 lines are equivalent
@include rmd-typography-host-google-font;
@include rmd-typography-host-google-font(
  Roboto,
  $rmd-typography-default-font-weights,
  null
);
@include rmd-typography-host-google-font(
  Roboto,
  $rmd-typography-default-font-weights,
  '/fonts/roboto'
);

@include rmd-typography-host-google-font('Source Code Pro');

Using Relative Paths

Compiled output

// Since it might be useful to include the font in the normal build
// process to hash and prefix the urls as needed, you can also use
// relative paths instead of absolute paths.
// This example will assume you are working within a `src/fonts.scss` file
// and have copied your fonts into a `src/fonts` directory

// Note the `~./`. This will resolve this import to the `src` directory
// within create-react-app
@include rmd-typography-host-google-font(
  Roboto,
  $rmd-typography-default-font-weights,
  '~./fonts/roboto'
);

@include rmd-typography-host-google-font(
  'Source Code Pro',
  regular,
  '~./fonts/source-code-pro'
);

Custom Font Map Declarations

Compiled output

// This is going to assume you have downloaded the material-icons zip with
// all the icon font files and copied it into `src/fonts/material-icons` and
// you are including the fonts in `src/index.scss`
@include rmd-typography-host-google-font(
  Roboto,
  $rmd-typography-default-font-weights,
  (
    light: url(/fonts/roboto/Roboto-Light.ttf),
    regular: url(/fonts/roboto/Roboto-Regular.ttf),
    medium: url(/fonts/roboto/Roboto-Medium.ttf),
    bold: url(/fonts/roboto/Roboto-Bold.ttf),
  )
);

@include rmd-typography-host-google-font(
  SourceCodePro,
  $rmd-typography-default-font-weights,
  (
    light: url(/fonts/source-code-pro/SourceCodePro-Light.ttf),
    regular: url(/fonts/source-code-pro/SourceCodePro-Regular.ttf),
    medium: url(/fonts/source-code-pro/SourceCodePro-Medium.ttf),
    bold: url(/fonts/source-code-pro/SourceCodePro-Bold.ttf),
  )
);

Requires

Functions

rmd-typography-theme

function

This function is used to quickly get one of the typography's theme values. This is really just for the rmd-typography-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — `Color|String|Number`

one of the typography's theme values.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-typography-theme-values` map keys to get a value for.	`String`	—

Requires

rmd-typography-theme-var

function

This function is used to get one of the typography's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-typography-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — `String`

one of the typography's theme values as a css variable.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-typography-theme-values` map keys to set a value for.	`String`	—
`$fallback`	An optional fallback color to apply. This is set to `null` by default and not used since the link's theme variables should always exist.	`Color\|String\|Number`	`null`

Used By

Requires

rmd-typography-google-font-suffix

function

Gets the Google font suffix for the provided font weight.

Returns — `String`

the suffix for the provided font weight.

Parameters
Name	Description	Type	Default Value
`$weight`	The font weight to get a font suffix string for. This should be one of the `$rmd-typography-google-font-weight-suffixes` keys.	`String`	—

Used By

Requires

rmd-typography-value

function

Gets the current typography style from the $rmd-typography-styles variable.

Returns — `String`

the typography style value.

Parameters
Name	Description	Type	Default Value
`$style`	One of the keys for the `$rmd-typography-styles` map.	`String`	—
`$property`	One of the property values to extract.	`String`	—

Examples

Simple Examples

Compiled output

.test {
  font-size: rmd-typography-value(headline-1, font-size);
  line-height: rmd-typography-value(headline-4, line-height);
}

Used By

Requires

rmd-typography-get-global-variable

function

Gets the global variable value for a provided typography style name. This assumes that the global variable exists already.

Returns — `Map`

a map of the style properties from the global typography variable.

Parameters
Name	Description	Type	Default Value
`$style`	The typography style name to return a variable for	`String`	—

Used By

rmd-typography-set-styles

function

A utility function to help merge typography styles together with global definition overrides.

Returns — `Map`

a Map of the base-styles and additional styles merged together

Parameters
Name	Description	Type	Default Value
`$base-styles`	The base styles to merge with	`Map`	—
`$additional-styles`	Any additional styles to merge with	`Map`	—

Requires

rmd-typography-get-letter-spacing

function

A small utility function to get the letter spacing based on tracking and font-size

Returns — `Number`

the letter spacing value in em

Parameters
Name	Description	Type	Default Value
`$tracking`	The tracking to use	`Number`	—
`$font-size`	The font size to use	`Number`	—

#Variables

#rmd-typography-font-family

#rmd-typography-mobile-max-line-length

#rmd-typography-desktop-max-line-length

#rmd-typography-text-container-breakpoint

#rmd-typography-base

Used By

#rmd-typography-thin

#rmd-typography-light

#rmd-typography-regular

#rmd-typography-medium

#rmd-typography-bold

#rmd-typography-semi-bold

#rmd-typography-black

#rmd-typography-font-weights

Used By

#rmd-typography-default-font-weights

Used By

#rmd-typography-colors

Used By

#rmd-typography-alignments

Used By

#rmd-typography-decorations

Used By

#rmd-typography-transforms

Used By

#rmd-typography-font-styles

Used By

#rmd-typography-google-font-weight-suffixes

Used By

#rmd-typography-styles

Examples

Default Typography Values

Overriding Typography Values

Used By

#rmd-typography-theme-values

Used By

#Mixins

#rmd-typography-theme

Used By

Requires

#rmd-typography-theme-update-var

Used By

Requires

#rmd-typography-value

Examples

Simple Examples

Used By

Requires

#rmd-typography-base

Examples

Example Usage SCSS

Used By

Requires

#rmd-typography

Used By

Requires

#rmd-text-container-base

Used By

Requires

#rmd-text-container-auto

Examples

Creating a "blog"

Creating a "blog"

Used By

Requires

#rmd-text-container

Used By

Requires

#rmd-typography-text-overflow-ellipsis

Examples

Example Usage

Used By

#rmd-typography-line-clamp

See also

Used By

#react-md-typography

Used By

Requires

#rmd-typography-google-font-face

Variables

rmd-typography-font-family

rmd-typography-mobile-max-line-length

rmd-typography-desktop-max-line-length

rmd-typography-text-container-breakpoint

rmd-typography-base

rmd-typography-thin

rmd-typography-light

rmd-typography-regular

rmd-typography-medium

rmd-typography-bold

rmd-typography-semi-bold

rmd-typography-black

rmd-typography-font-weights

rmd-typography-default-font-weights

rmd-typography-colors

rmd-typography-alignments

rmd-typography-decorations

rmd-typography-transforms

rmd-typography-font-styles

rmd-typography-google-font-weight-suffixes

rmd-typography-styles

rmd-typography-theme-values

Mixins

rmd-typography-theme

rmd-typography-theme-update-var

rmd-typography-value

rmd-typography-base

rmd-typography

rmd-text-container-base

rmd-text-container-auto

rmd-text-container

rmd-typography-text-overflow-ellipsis

rmd-typography-line-clamp

react-md-typography

rmd-typography-google-font-face

rmd-typography-host-google-font

Functions

rmd-typography-theme

Returns — `Color|String|Number`

rmd-typography-theme-var

Returns — `String`

rmd-typography-google-font-suffix

Returns — `String`

rmd-typography-value

Returns — `String`

rmd-typography-get-global-variable

Returns — `Map`

rmd-typography-set-styles

Returns — `Map`

rmd-typography-get-letter-spacing

Returns — `Number`