Fabric includes 10 base font classes that represent the type ramp for the Office Design Language. Each base class sets a default size, weight, and color.
42px
Segoe UI Light
ms-color-neutralPrimary
28px
Segoe UI Light
ms-color-neutralPrimary
24px
Segoe UI Light
ms-color-neutralPrimary
21px
Segoe UI Light
ms-color-neutralPrimary
17px
Segoe UI Semilight
ms-color-neutralPrimary
15px
Segoe UI Regular
ms-color-neutralPrimary
14px
Segoe UI Regular
ms-color-neutralPrimary
13px
Segoe UI Regular
ms-color-neutralPrimary
12px
Segoe UI Regular
ms-color-neutralPrimary
11px
Segoe UI Regular
ms-color-neutralPrimary
10px
Segoe UI Semibold
ms-color-neutralPrimary
Use these classes to set the font weight, independent of its size and color.
Class
Weight
ms-fontWeight-light
Light
ms-fontWeight-semilight
Semilight
ms-fontWeight-regular
Regular
ms-fontWeight-semibold
Semi Bold
ms-fontWeight-bold
Bold
Use these classes to set the font size, independent of its weight and color.
Class
Size
Usage of Fabric's default web font, Segoe UI, is subject to the assets license. If your app does not meet these requirements, you can substitute another font in place of Segoe UI. There are two methods available:
<div class="ms-Fabric ms-Fabric--selawik">...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper leo a elit malesuada scelerisque. Nam et accumsan nibh. Nulla facilisi. Nulla commodo vestibulum lobortis. Mauris interdum vitae mi a blandit. Duis odio mi, gravida et velit sit amet, pulvinar porta magna. Ut fermentum erat tortor, eu bibendum felis laoreet vel. Nulla vitae erat lacinia, mollis felis id, mollis risus. Integer in metus lacus. Ut ac ligula nunc. Vivamus sed lacinia ante.
.ms-Fabric {
font-family: Helvetica, Arial, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper leo a elit malesuada scelerisque. Nam et accumsan nibh. Nulla facilisi. Nulla commodo vestibulum lobortis. Mauris interdum vitae mi a blandit. Duis odio mi, gravida et velit sit amet, pulvinar porta magna. Ut fermentum erat tortor, eu bibendum felis laoreet vel. Nulla vitae erat lacinia, mollis felis id, mollis risus. Integer in metus lacus. Ut ac ligula nunc. Vivamus sed lacinia ante.