public/components/fonts/_typography.scss

/**
 * Workflow typography.
 *
 * Extracted from https://github.com/guardian/guss-typography for sass-lib compatibility.
 */

@mixin font-size($size, $line-height) {
    font-size: 0px + $size;
    font-size: 0rem + calc($size / 10);
    line-height: 0px + $line-height;
    line-height: 0rem + calc($line-height / 10);
}


%f-data {
    font-family: "GuardianAgateSans1Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

// Partials for font-sizes
// fs = font scale
%fs-data-1 {
    @include font-size(11, 14);
}

%fs-data-2 {
    @include font-size(12, 14);
}

%fs-data-3 {
    @include font-size(13, 16);
}

%fs-data-4 {
    @include font-size(14, 18);
}

%fs-data-5 {
    @include font-size(16, 20);
}

%fs-data-6 {
    @include font-size(18, 22);
}