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.

  • ms-font-su

    42px

    Segoe UI Light

    ms-color-neutralPrimary

  • ms-font-xxl

    28px

    Segoe UI Light

    ms-color-neutralPrimary

  • ms-font-xl-plus

    24px

    Segoe UI Light

    ms-color-neutralPrimary

  • ms-font-xl

    21px

    Segoe UI Light

    ms-color-neutralPrimary

  • ms-font-l

    17px

    Segoe UI Semilight

    ms-color-neutralPrimary

  • ms-font-m-plus

    15px

    Segoe UI Regular

    ms-color-neutralPrimary

  • ms-font-m

    14px

    Segoe UI Regular

    ms-color-neutralPrimary

  • ms-font-s-plus

    13px

    Segoe UI Regular

    ms-color-neutralPrimary

  • ms-font-s

    12px

    Segoe UI Regular

    ms-color-neutralPrimary

  • ms-font-xs

    11px

    Segoe UI Regular

    ms-color-neutralPrimary

  • ms-font-mi

    10px

    Segoe UI Semibold

    ms-color-neutralPrimary

Font weight

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

Font size

Use these classes to set the font size, independent of its weight and color.

Class

Size

ms-fontSize-su
42px
ms-fontSize-xxl
28px
ms-fontSize-xlPlus
24px
ms-fontSize-xl
21px
ms-fontSize-l
17px
ms-fontSize-mPlus
15px
ms-fontSize-m
14px
ms-fontSize-sPlus
13px
ms-fontSize-s
12px
ms-fontSize-xs
11px
ms-fontSize-mi
10px

Alternative fonts

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:

  1. Use Selawik, an open source alternative to Segoe UI from Microsoft. With support for this font built-in to Fabric, it's as simple as applying an additional class to the root "ms-Fabric" class that wraps your application. If Segoe UI is not installed on the user's system, Selawik will be used instead.

    <div class="ms-Fabric ms-Fabric--selawik">...</div>
    

    This text is now in Selawik.

    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.

  2. Specify a custom font for your application. This can be a commonly-installed local font, such as Helvetica, or a web font that you have included a @font-face declaration for.

    .ms-Fabric {
      font-family: Helvetica, Arial, sans-serif;
    }
    

    This text is now in Helvetica.

    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.