Font-Size: Requirements

---

Font-Size: Variables

Add or subtract font-sizes (px).

/* --------------- Font-Size Variables --------------- */

/* Add or subtract font-sizes (px). Be careful. Because font-sizes are tied to breakpoints your css can get rather large. */
$fnt-sizes: (10, 12, 14, 16);

/* --------------- /Font-Size Variables --------------- */

---

Font-Size: Class Prefix Options (Required)

The Font-Size Class Prefix can be written in different ways depending on your desired specificity.

Minimal	.fnt
Abbr Strict	.fnt-size
Strict	.font-size

Font-Size: Class Breakpoint Extensions (Required)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

Ext	Def	Breakpoint	Device
-tn	tiny	0px	Small Phone
-xs	extra-small	480px	Phone
-sm	small	640px	Small Tablet
-md	medium	768px	Tablet
-lg	large	992px	Laptop
-xl	extra-large	1200px	Desktop
-pr	print	Printed Page	All Devices

Font-Size: Class Value Extensions (Required)

The following Font-Size values are provided as they are the most commonly used. Font-Size values can be altered in the variable-settings.scss file.

Ext	Size
-10	10px
-12	12px
-14	14px
-16	16px

Font-Size: Example Code

<!-- Minimal: Font-Size is 10px then it is 16px if the screeen is 768px wide. -->
<div class="fnt-tn-10 fnt-md-16">Font-Size</div>

<!-- Strict: Font-Size is 10px then it is 16px if the screeen is 768px wide. -->
<div class="font-tn-10 font-md-16">Font-Size</div>