Body styles

Base text classes

Base typography classes does not apply any external margins nor font-colors, because they are contextuals. This mean that color and margins will be either inherited or applied through new classes set on your dom elements, depending on their position and usage.

You can import all base typography scss files by importing the _a.all-base-typography sub-bundle from the atoms directory

@import 'settings-tools/all-settings';
@import 'typography/_t.all-base-typography';

Body classes

Each body atom come with a modifier to set the font-weight to 'semi bold' and a modifier to use an alternative line-height. Body classes font-size do not vary depending on the viewport, because thoses font-sizes are optimized for any viewport.


@import 'settings-tools/all-settings';
@import 'typography/_t.bodys';


<p class="mt-body-m">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--semi-bold">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--line-height-m">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--line-height-m mt-body-m--semi-bold">
Lorem ipsum...

Class namesfont-size (any viewport)line-heightweight
body L
.mt-body-l06 : 18px (1.125mu)L : 28px (1.175mu)regular
.mt-body-l .mt-body-l--semi-bold06 : 18px (1.125mu)L : 28px (1.175mu)semi bold
.mt-body-l .mt-body-l--line-height-m06 : 18px (1.125mu)M : 24px (1.5mu)regular
body M
.mt-body-m05 : 16px (1mu)L : 24px (1.5mu)regular
.mt-body-m .mt-body-m--semi-bold05 : 16px (1mu)L : 24px (1.5mu)semi-bold
.mt-body-m .mt-body-m--line-height-m05 : 16px (1mu)M : 22px (1.375mu)regular
body S
.mt-body-s04 : 14px (0.875mu)L : 22px (1.375mu)regular
.mt-body-s .mt-body-s--semi-bold04 : 14px (0.875mu)L : 22px (1.375mu)semi-bold
.mt-body-s .mt-body-s--line-height-m04 : 14px (0.875mu)M : 18px (1.125mu)regular