Typography

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

    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

Light

ms-fontWeight-light

Semilight

ms-fontWeight-semilight

Regular

ms-fontWeight-regular

Semi Bold

ms-fontWeight-semibold

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-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