Skip to content

Typography

Info

The typography function is currently only supported when the predecessor office.theme will be imported. Currently there is no support in the uif.theme available yet.

These functions can be used to create custom CSS classes fore the typography. Font values are based on Office UI Fabric and use em/rem instead of pixel values.

uiFontSize(fontSizeParam)

Possible font size values that can be passed to this SASS @mixin are:

fontSizeParam Output font size UI Fabric UI Fabric size
su 3em .ms-fontSize-su 42px
xxl 2em .ms-fontSize-xxl 28px
xl 1.5em .ms-fontSize-xl 21px
l 1.21429em .ms-fontSize-l 17px
m-plus 1.07143em .ms-fontSize-mPlus 15px
m 1em .ms-fontSize-m 14px
s-plus 0.92857em .ms-fontSize-sPlus 13px
s 0.85714em .ms-fontSize-s 12px
xs 0.78571em .ms-fontSize-xs 11px
mi 0.71429em .ms-fontSize-mi 10px

To use this mixin simply includes this style with and the parameter.

.mySuperLargeClass{
    @include uiFontSize(su); /* Will return font-size 3em = 42px; */
}

Result in CSS

.mySuperLargeClass{
    font-size: 3em; /* 3em at a base font size of 14px = 42px */
}

Result in SPFx Projects

.mySuperLargeClass_714f5755{
    font-size: 3em; /* 3em at a base font size of 14px = 42px */
}

uiFontWidth(fontWeightParam)

This function will return you one of the following four defined font weights.

fontWeightParam Name CSS value Office UI Fabric Definition
light Thin / Hairline 100 .ms-fontWeight-light
semilight Light 300 .ms-fontWeight-semilight
regular Normal 400 .ms-fontWeight-regular
semibold Bold 700 .ms-fontWeight-semibold

To use this mixin use the following syntax in your classes:

.myBoldText{
    @include(semibold); /* will return the numeric value 700 / bold */
}

.myCustomTextStyle{
    @include(light);
}

Result in CSS

.myBoldText{
    font-weight: 700;
}

.myCustomTextStyle{
    font-weight: 100;
}

Result in SPFx Projects

.myBoldText_714f5755{
    font-weight: 700;
}

.myCustomTextStyle_714f5755{
    font-weight: 100;
}

uiFont($fontPara)

This @mixin will return a combination font weight and font size defined by Office UI Fabric.

fontSizeParam Font size Font weight UI Fabric UI Fabric size
su 3em 100 .ms-font-su 42px
xxl 2em 100 .ms-font-xxl 28px
xl 1.5em 100 .ms-font-xl 21px
l 1.21429em 300 .ms-font-l 17px
m-plus 1.07143em 400 .ms-font-mPlus 15px
m 1em 400 .ms-font-m 14px
s-plus 0.92857em 400 .ms-font-sPlus 13px
s 0.85714em 400 .ms-font-s 12px
xs 0.78571em 400 .ms-font-xs 11px
mi 0.71429em 700  .ms-font-mi 10px

To use this @mixin:

.myClass{
    @include uiFont(su);
}

.mySmallText{
    @include uiFont(mi);
}

Result in CSS

.myBoldText{
    font-size: 3em;
    font-weight: 100;
}

.myCustomTextStyle{
    font-size: 0.71429em;
    font-weight: 100;
}

Result in SPFx Projects

.myBoldText_714f5755{
    font-size: 3em;
    font-weight: 100;
}

.myCustomTextStyle_714f5755{
    font-size: 0.71429em;
    font-weight: 100;
}

Configure output

All mixin returns the font size values as em by default. This behaviour can be changed by calling the following mixin.

uiUseRem(boolean)

  • true
    turns output to REM units
  • false - default value
    turns output to EM units

The following sample shows how to switch between REM and EM units.

// turn rem return values ON.
@include uiUseRem(true);

// output font size in REM
.myTextInRem{
    @include uiFont(su);
}

// turn rem return values OFF.
@include uiUseRem(false);

// font size will now returned in EM
.myTextInRem{
    @include uiFont(su);
}