Controlling typography with Sass

Sass’ @extend feature is great for applying different typographic styles but be careful about the output.

Using %placeholder instead of .class makes sure that the placeholder isn’t outputted into the css.

%font-header {
    font-family: Georgia;
    font-weight: 600;
    line-height: 1.2;
}
%font-body {
    font-family: Arial;
    line-height: 1.4;
}
html {
    @extend %font-body;
}
h1,
h2,
h3,
h4 {
    @extend %font-header;
}