Typography

The Material Design type system is a combination of 13 styles, each with an intended application and meaning. These are all mapped to specific components but can all be overridden, if your theme needs it.

This page covers typography in Material System and how to set it up and use it in Kustom.

Material Design works with its own text scale, ranging from TV headlines to very small captions.

Headlines

Headlines span from a range of 1 through 6. They are the largest text on the screen, reserved for short, important text or numerals.

For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye. Serif or sans serif typefaces work well for headlines at smaller sizes (Headline 6).

Subtitles

Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length.

Serif or sans serif typefaces work well for subtitles. Use caution when using expressive fonts, including display, handwritten, and script styles.

Body

Body text comes in ranges 1-2, and it’s typically used for long-form writing as it works well for small text sizes.

For longer sections of text, a serif or sans serif typeface is recommended. Don’t use expressive fonts, including display, handwritten, and script styles for body copy.

Caption and Overline

Caption and overline text (text with a line above it) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.

Don’t use expressive fonts, including display, handwritten, and script styles for caption or overline.

Button

Button text is a call to action used by different types of buttons (such as text, outlined and contained buttons) and in tabs, dialogs, and cards.

Button text is typically an all caps sans serif, but it can also be sentence case, sans serif, or serif. Don’t use expressive fonts as button text, including display, handwritten, and script styles.



Kustom Setup

Set up 2 globals for each type style, one font and one number global.

When designing, use regular or morphing text and link the font and size accordingly.

Headline1

  • regular text

gv(fontH1)

gv(sizeH1)

Headline2

  • regular text

gv(fontH2)

gv(sizeH2)

Headline3

  • regular text

gv(fontH3)

gv(sizeH3)

Headline4

  • regular text

gv(fontH4)

gv(sizeH4)

Headline5

  • regular text

gv(fontH5)

gv(sizeH5)

Headline6

  • regular text

gv(fontH6)

gv(sizeH6)


Subtitle1

  • regular text

gv(fontS1)

gv(sizeS1)

Subtitle2

  • regular text

gv(fontS2)

gv(sizeS2)

Body1

  • regular text

gv(fontB1)

gv(sizeB1)

Body2

  • regular text

gv(fontB2)

gv(sizeB2)


BUTTON

  • morphing text

gv(fontB)

gv(sizeB)

Filter: UPPERCASE

Spacing: 2.5


Caption

  • regular text

gv(fontC)

gv(sizeC)


OVERLINE

  • morphing text

gv(fontO)

gv(sizeO)

Filter: UPPERCASE

Spacing: 3