Typography

By assuming a base font of 15sp and calculating all other typography relative to this base font, this file contains the same list as the typography section on the google specs.

%a__headers {
    @extend %reset;
    @extend %font--header !optional;

    @include e__owl {
        margin-top: e__sp-to-rem(24);
    }
}

Display 4

%a__header--display4 {
    @extend %a__headers;
    font-size: e__sp-to-rem(112);
    font-weight: 300;
}

Display 3

%a__header--display3 {
    @extend %a__headers;
    font-size: e__sp-to-rem(56);
}

Display 2

%a__header--display2 {
    @extend %a__headers;
    font-size: e__sp-to-rem(45);
}

Display 1

%a__header--display1 {
    @extend %a__headers;
    font-size: e__sp-to-rem(34);
}

Headline

%a__header--headline {
    @extend %a__headers;
    font-size: e__sp-to-rem(24);
}

Title

%a__header--title {
    @extend %a__headers;
    font-size: e__sp-to-rem(21);
    font-weight: 500;
}

Subhead

%a__header--subhead {
    @extend %a__headers;
    font-size: e__sp-to-rem(17);
}