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


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


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.


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.