Typography Utilities

Table of contents

  1. Font size
  2. Font weight
  3. Line height

Font size

Use the .fs-1 - .fs-10 to set an explicit font-size.

ClassSmall screen size font-sizeLarge screen size font-size
.fs-19px10px
.fs-211px12px
.fs-312px14px
.fs-414px16px
.fs-516px18px
.fs-618px24px
.fs-724px32px
.fs-832px38px
.fs-938px42px
.fs-1042px48px

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Font size 8

Font size 9

Font size 10

In Markdown, use the `{: }` wrapper to apply custom classes:

Font size 1
{: .fs-1 }
Font size 2
{: .fs-2 }
Font size 3
{: .fs-3 }
Font size 4
{: .fs-4 }
Font size 5
{: .fs-5 }
Font size 6
{: .fs-6 }
Font size 7
{: .fs-7 }
Font size 8
{: .fs-8 }
Font size 9
{: .fs-9 }
Font size 10
{: .fs-10 }

Font weight

Use the .fw-300 - .fw-700 to set an explicit font-size.

Font weight 300

Font weight 400

Font weight 500

Font weight 700

In Markdown, use the `{: }` wrapper to apply custom classes:

Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }

Line height

Use the lh- classes to explicitly apply line height to text.

Classline-height valueNotes
.lh-00 
.lh-tight1.1Default for headings
.lh-default1.4Default for body (paragraphs)

No Line height No Line height

Tight line height Tight line height

Default line height Default line height

In Markdown, use the `{: }` wrapper to apply custom classes:

No Line height
No Line height
{: .lh-0 }

Tight line height
Tight line height
{: .lh-tight }

Default line height
Default line height
{: .fh-default }