Font Size
Utilities for controlling the font size of an element.
| Class | Properties |
|---|---|
| .f-2 | font-size: .694rem; |
| .f-1 | font-size: .833rem; |
| .f1 | font-size: 1rem; |
| .f2 | font-size: 1.2rem; |
| .f3 | font-size: 1.44rem; |
| .f4 | font-size: 1.728rem; |
| .f5 | font-size: 2.074rem; |
| .f6 | font-size: 2.488rem; |
| .f7 | font-size: 2.986rem; |
| .f8 | font-size: 3.583rem; |
| .f9 | font-size: 4.3rem; |
| .f10 | font-size: 5.16rem; |
| .f11 | font-size: 6.192rem; |
| .f12 | font-size: 7.43rem; |
| .f13 | font-size: 8.916rem; |
| .f14 | font-size: 10.699rem |
Usage
Control the font size of an element using the .f{size} utilities.
Extra Small Text 2
Extra Small Text 1
Text with size 1 (default text size)
Text with size 2
Text with size 3
Text with size 4
Text with size 5
Text with size 6
Text with size 7
Text with size 8
Text with size 9
Customization
By default, nitron provides 16 font sizes. The standard sizes are represented by f1-f14. Font sizes that are smaller than the base font size by f-1 and f-2. All values can be changed in _settings.scss.
Variants
By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.