Body 2

<h1 class="a__typography--body2">Medium 15sp</h1>

%a__typography--body2 {
    font-size: e__sp-to-rem(15);
    font-weight: 500;
}

Body 1

<h1 class="a__typography--body1">Regular 15sp</h1>

%a__typography--body1 {
    @extend %reset;
    font-size: e__sp-to-rem(15);
}

Caption

<div class="a__typography--caption">Regular 13sp</div>

%a__typography--caption {
    @extend %reset;
    font-size: e__sp-to-rem(13);
}

Button

<a href="#dummy" class="a__typography--button">Medium 15sp</a>

%a__typography--button {
    @extend %reset;
    @extend %font--button !optional;
    font-size: e__sp-to-rem(15);
    font-weight: 500;
    text-decoration: none;
}