Typography Utilities

{: .no_toc }

Table of contents

{: .no_toc .text-delta }

1. TOC

   {:toc}

Font size

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

Class	Small screen size font-size	Large screen size font-size
.fs-1	9px	10px
.fs-2	11px	12px
.fs-3	12px	14px
.fs-4	14px	16px
.fs-5	16px	18px
.fs-6	18px	24px
.fs-7	24px	32px
.fs-8	32px	38px
.fs-9	38px	42px
.fs-10	42px	48px

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 }

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 {: .fw-300 } Font weight 400 {: .fw-400 } Font weight 500 {: .fw-500 } Font weight 700 {: .fw-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.

Class	line-height value	Notes
.lh-0	0
.lh-tight	1.1	Default for headings
.lh-default	1.4	Default for body (paragraphs)

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

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

Default line height Default line height {: .fh-default } </div>

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 }

Text justification

By default text is justified left. Use these text- classes to override settings:

Class	What it does
.text-left	text-align: left
.text-right	text-align: right
.text-center	text-align: center