Font Size

Utilities to change an element's font-size.

Usage

Use d-{fs|headline}-{stop} to change an element's font-size in the product or d-{fs|headline}-{stop}-{platform} to change in other platforms (mobile, tc8, tv).

<p class="d-fs-100">...</p>
<p class="d-fs-200">...</p>
<p class="d-fs-300">...</p>
<p class="d-fs-400">...</p>
<p class="d-fs-500">...</p>

Classes by Platform

Product

Size	Class	Output
12px	.d-fs-100	font-size: 1.2rem !important; Aa
15px	.d-fs-200	font-size: 1.5rem !important; Aa
19px	.d-fs-300	font-size: 1.9rem !important; Aa
27px	.d-fs-400	font-size: 2.7rem !important; Aa
38px	.d-fs-500	font-size: 3.8rem !important; Aa

Mobile

Size	Class	Output
12px	.d-fs-100-mobile	font-size: 1.2rem !important; Aa
16px	.d-fs-200-mobile	font-size: 1.6rem !important; Aa
20px	.d-fs-300-mobile	font-size: 2rem !important; Aa
29px	.d-fs-400-mobile	font-size: 2.9rem !important; Aa
41px	.d-fs-500-mobile	font-size: 4.1rem !important; Aa

TC8

Size	Class	Output
17px	.d-fs-100-tc8	font-size: 1.7rem !important; Aa
21px	.d-fs-200-tc8	font-size: 2.1rem !important; Aa
27px	.d-fs-300-tc8	font-size: 2.7rem !important; Aa
38px	.d-fs-400-tc8	font-size: 3.8rem !important; Aa
54px	.d-fs-500-tc8	font-size: 5.4rem !important; Aa

TV

Size	Class	Output
25px	.d-fs-100-tv	font-size: 2.5rem !important; Aa
32px	.d-fs-200-tv	font-size: 3.2rem !important; Aa
41px	.d-fs-300-tv	font-size: 4.1rem !important; Aa
58px	.d-fs-400-tv	font-size: 5.8rem !important; Aa
82px	.d-fs-500-tv	font-size: 8.2rem !important; Aa