Skip to main content
react-md
react-md - Typography - SassDoc

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.

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

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.

$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;

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;

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;

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;

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;

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;

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;

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;

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
$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
@each $style in map-keys($rmd-typography-styles) {
  .#{$style} {
    @include rmd-typography($style);
  }
}
Overriding Typography Values
$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);
  }
}

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.

$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;

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
NameDescriptionTypeDefault 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|Numbernull

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
NameDescriptionTypeDefault 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

rmd-typography-value

mixin

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

Parameters
NameDescriptionTypeDefault 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
.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
  );
}

rmd-typography-base

mixin

Applies the base typography styles to an element.

Examples

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

  font-size: 1.3rem;
}

rmd-typography

mixin

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

Parameters
NameDescriptionTypeDefault Value
$style

One of the typography styles from $rmd-typography-styles.

String
$omit

A list of keys to omit

List

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.

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
NameDescriptionTypeDefault 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"
.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>

rmd-text-container

mixin

Creates all the styles for the text container component.

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
.truncate-this {
  @include rmd-typography-text-overflow-ellipsis;

  width: 5rem;
}

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
NameDescriptionTypeDefault Value
$lines

The number of lines that the text should be clamped to.

String|Number2
See also

react-md-typography

mixin

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

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
NameDescriptionTypeDefault Value
$font-name

The font name to use.

StringRoboto
$font-weight

The font weight to use.

Stringmap-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.

Stringnull

Examples

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

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
NameDescriptionTypeDefault Value
$font-name

The font name to use.

StringRoboto
$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|Stringnull

Examples

Using Absolute Paths
// 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
// 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
// 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),
  )
);
See also

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
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-typography-theme-values map keys to get a value for.

String

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
NameDescriptionTypeDefault 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|Numbernull

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
NameDescriptionTypeDefault 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

rmd-typography-value

function

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

Returns — String

the typography style value.

Parameters
NameDescriptionTypeDefault 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
.test {
  font-size: rmd-typography-value(headline-1, font-size);
  line-height: rmd-typography-value(headline-4, line-height);
}

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
NameDescriptionTypeDefault Value
$style

The typography style name to return a variable for

String

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
NameDescriptionTypeDefault Value
$base-styles

The base styles to merge with

Map
$additional-styles

Any additional styles to merge with

Map

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
NameDescriptionTypeDefault Value
$tracking

The tracking to use

Number
$font-size

The font size to use

Number