Utility classes

• Introduction
• Color
• Background-color
• Font-size
• Font-family
• Text-align
• Text-transform
• Hidden
• Visible
• Float
• Clear
• Clearfix
• Border
• Margin
• Padding
• Row-padding
• Image

Font-size

Font-size utility classes allow authors to apply a specific font-size to any element and at different screen sizes.

Overall usage

Used to apply specific font sizes to any element or component.

Accessibility

Where possible, font-sizes should be left as default szies to allow users to scale as needed.

All sizes

<div class="u-font-50">u-font-50</div>
<div class="u-font-48">u-font-48</div>
<div class="u-font-46">u-font-46</div>
<div class="u-font-44">u-font-44</div>
<div class="u-font-42">u-font-42</div>
<div class="u-font-40">u-font-40</div>
<div class="u-font-38">u-font-38</div>
<div class="u-font-36">u-font-36</div>
<div class="u-font-34">u-font-34</div>
<div class="u-font-32">u-font-32</div>
<div class="u-font-30">u-font-30</div>
<div class="u-font-28">u-font-28</div>
<div class="u-font-26">u-font-26</div>
<div class="u-font-24">u-font-24</div>
<div class="u-font-22">u-font-22</div>
<div class="u-font-20">u-font-20</div>
<div class="u-font-18">u-font-18</div>
<div class="u-font-16">u-font-16</div>
<div class="u-font-14">u-font-14</div>

xs only

<div class="u-font-50-xs">u-font-50-xs</div>
<div class="u-font-48-xs">u-font-48-xs</div>
<div class="u-font-46-xs">u-font-46-xs</div>
<div class="u-font-44-xs">u-font-44-xs</div>
<div class="u-font-42-xs">u-font-42-xs</div>
<div class="u-font-40-xs">u-font-40-xs</div>
<div class="u-font-38-xs">u-font-38-xs</div>
<div class="u-font-36-xs">u-font-36-xs</div>
<div class="u-font-34-xs">u-font-34-xs</div>
<div class="u-font-32-xs">u-font-32-xs</div>
<div class="u-font-30-xs">u-font-30-xs</div>
<div class="u-font-28-xs">u-font-28-xs</div>
<div class="u-font-26-xs">u-font-26-xs</div>
<div class="u-font-24-xs">u-font-24-xs</div>
<div class="u-font-22-xs">u-font-22-xs</div>
<div class="u-font-20-xs">u-font-20-xs</div>
<div class="u-font-18-xs">u-font-18-xs</div>
<div class="u-font-16-xs">u-font-16-xs</div>
<div class="u-font-14-xs">u-font-14-xs</div>

sm only

<div class="u-font-50-sm">u-font-50-sm</div>
<div class="u-font-48-sm">u-font-48-sm</div>
<div class="u-font-46-sm">u-font-46-sm</div>
<div class="u-font-44-sm">u-font-44-sm</div>
<div class="u-font-42-sm">u-font-42-sm</div>
<div class="u-font-40-sm">u-font-40-sm</div>
<div class="u-font-38-sm">u-font-38-sm</div>
<div class="u-font-36-sm">u-font-36-sm</div>
<div class="u-font-34-sm">u-font-34-sm</div>
<div class="u-font-32-sm">u-font-32-sm</div>
<div class="u-font-30-sm">u-font-30-sm</div>
<div class="u-font-28-sm">u-font-28-sm</div>
<div class="u-font-26-sm">u-font-26-sm</div>
<div class="u-font-24-sm">u-font-24-sm</div>
<div class="u-font-22-sm">u-font-22-sm</div>
<div class="u-font-20-sm">u-font-20-sm</div>
<div class="u-font-18-sm">u-font-18-sm</div>
<div class="u-font-16-sm">u-font-16-sm</div>
<div class="u-font-14-sm">u-font-14-sm</div>

md only

<div class="u-font-50-md">u-font-50-md</div>
<div class="u-font-48-md">u-font-48-md</div>
<div class="u-font-46-md">u-font-46-md</div>
<div class="u-font-44-md">u-font-44-md</div>
<div class="u-font-42-md">u-font-42-md</div>
<div class="u-font-40-md">u-font-40-md</div>
<div class="u-font-38-md">u-font-38-md</div>
<div class="u-font-36-md">u-font-36-md</div>
<div class="u-font-34-md">u-font-34-md</div>
<div class="u-font-32-md">u-font-32-md</div>
<div class="u-font-30-md">u-font-30-md</div>
<div class="u-font-28-md">u-font-28-md</div>
<div class="u-font-26-md">u-font-26-md</div>
<div class="u-font-24-md">u-font-24-md</div>
<div class="u-font-22-md">u-font-22-md</div>
<div class="u-font-20-md">u-font-20-md</div>
<div class="u-font-18-md">u-font-18-md</div>
<div class="u-font-16-md">u-font-16-md</div>
<div class="u-font-14-md">u-font-14-md</div>

lg only

<div class="u-font-50-lg">u-font-50-lg</div>
<div class="u-font-48-lg">u-font-48-lg</div>
<div class="u-font-46-lg">u-font-46-lg</div>
<div class="u-font-44-lg">u-font-44-lg</div>
<div class="u-font-42-lg">u-font-42-lg</div>
<div class="u-font-40-lg">u-font-40-lg</div>
<div class="u-font-38-lg">u-font-38-lg</div>
<div class="u-font-36-lg">u-font-36-lg</div>
<div class="u-font-34-lg">u-font-34-lg</div>
<div class="u-font-32-lg">u-font-32-lg</div>
<div class="u-font-30-lg">u-font-30-lg</div>
<div class="u-font-28-lg">u-font-28-lg</div>
<div class="u-font-26-lg">u-font-26-lg</div>
<div class="u-font-24-lg">u-font-24-lg</div>
<div class="u-font-22-lg">u-font-22-lg</div>
<div class="u-font-20-lg">u-font-20-lg</div>
<div class="u-font-18-lg">u-font-18-lg</div>
<div class="u-font-16-lg">u-font-16-lg</div>
<div class="u-font-14-lg">u-font-14-lg</div>