Skip to main content

Font Sizes

Version: 0.9.0
Edit

Utilities for setting the font size for an element.

Display Type

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/font-sizes.scss#L11

Display 1
Display 2
Display 3
Display 4
Display 5 
<!-- display 1 -->
<span class="u-font-size-display-1">Display 1</span>
<!-- display 2 -->
<span class="u-font-size-display-2">Display 2</span>
<!-- display 3 -->
<span class="u-font-size-display-3">Display 3</span>
<!-- display 4 -->
<span class="u-font-size-display-4">Display 4</span>
<!-- display 5 -->
<span class="u-font-size-display-5">Display 5</span>

Copy Type

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/font-sizes.scss#L51

Copy

Small Copy

Large Copy

XL Copy

<!-- copy -->
<p class="u-font-size-copy">Copy</p>
<!-- copy sm -->
<p class="u-font-size-copy-sm">Small Copy</p>
<!-- copy lg -->
<p class="u-font-size-copy-lg">Large Copy</p>
<!-- copy xl -->
<p class="u-font-size-copy-xl">XL Copy</p>