typography-mixins.md

Typography

Standard mixins for body text, fonts, headings, labels, and titles.

Live demo

All these mixins use fonts from Roboto family. In majority of cases it is easy to figure out which mixin you need for a specific element just by its font size / line height.

Body Text Mixins

• 20/25px — tc-body-lg;
• 15/25px — tc-body-md;
• 13/25px — tc-body-sm;
• 11/20px — tc-body-xs.

Heading Mixins

• 36/45px — tc-heading-xl;
• 28/35px — tc-heading-lg;
• 20/30px — tc-heading-md;
• 15/25px — tc-heading-sm;
• 13/25px — tc-heading-xs.

Label Mixins

• 20/25px — tc-label-xl;
• 15/20px — tc-label-lg;
• 13/20px — tc-label-md;
• 12/15px — tc-label-sm;
• 11/15px — tc-label-xs.

Title Mixins

• 42/50px — tc-title.

Font Mixins

In some cases you may want to only include into a component the font-family and the correct font weight. Here are some standard mixins for that (the numbers in the list specify the weight):

font-family: Roboto, Helvetica, Arial, sans-serif

• 100 — roboto-thin;
• 300 — roboto-light;
• 400 — roboto-regular;
• 500 — roboto-medium;
• 700 — roboto-bold;
• 900 — roboto-black.

font-family: Roboto Mono, monospace

• 400 — roboto-mono-regular.