Font Size
- src
- utilities
- font-size.scss
Class list
- .huge-1
- .huge-2
- .h1
- .h2
- .h3
- .h4
- .h5
- .h6
- .huge-1-(breakpoint)
- .huge-2-(breakpoint)
- .h1-(breakpoint)
- .h2-(breakpoint)
- .h3-(breakpoint)
- .h4-(breakpoint)
- .h5-(breakpoint)
- .h6-(breakpoint)
Description
The font-size utility classes follow the naming convention used for headings, where the smaller the number, the larger the size.
| Class Name | Font Size |
|---|---|
| .huge-1 | 6.7rem |
| .huge-2 | 5.1rem |
| .h1 | 3.8rem |
| .h2 | 2.8rem |
| .h3 | 2.1rem |
| .h4 | 1.6rem |
| .h5 | 1.2rem |
| .h6 | 0.9rem |
Responsive
Plug in the desired breakpoint suffix (sm, md, lg) into (breakpoint) to have that font-size applied during that breakpoint. Reduce the width of your browser to see the example.
Responsive font size
<p class="huge-2-lg h3-md h6-sm">Responsive font size</p>