styles/guss-typography/_typography.mixins.scss

// Default type settings
// =============================================================================

/**
 * Default typography settings, to be included as soon as possible in the HTML
 * 1. Make type rendering look crisper
 * 2. Set relative line spacing to 1.5 (16px * 1.5 = 24px)
 *
 * @param {String} $font-family ($f-serif-text) - Default global font
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */

@mixin guss-typography-defaults($font-family: $f-serif-text) {
    @at-root {
        html {
            font-family: $font-family;
            -moz-osx-font-smoothing: grayscale;
            /* 1 */
            -webkit-font-smoothing: antialiased;
            /* 1 */
        }
        body {
            line-height: 1.5;
            /* 2 */
        }
    }
}


// Shorthands for font declarations
// =============================================================================

/**
 * Font-size and line-height shorthand
 *
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font-size(18, 24);
 *
 * @requires {function} convert-to-px
 *
 * @group typography
 */

@mixin font-size($size, $line-height: $size) {
    font-size: convert-to-px($size);
    line-height: convert-to-px($line-height);
}


/**
 * Font styling shorthand  
 * Note: prefer the usage of the font-scale mixins to stick to the font scale
 *
 * @param {String} $family
 * @param {String} $weight
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font(arial, bold, 18, 24);
 *
 * @requires {mixin} font-size
 *
 * @group typography
 */

@mixin font($family, $weight, $size, $line-height: $size) {
    font-family: $family;
    font-weight: $weight;
    @include font-size($size, $line-height);
}


// Font scale
// =============================================================================
// Prefixes:
// f- stands for Font: use to set a font-family only
// fs- for Font Scale: documented in font-scale.png

/**
 * Header family and weight properties.
 *
 * @requires {variable} $f-serif-headline
 *
 * @group typography
 */

@mixin f-header {
    font-family: $f-serif-headline;
    font-weight: 900;
}


/**
 * Header typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-header(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-header(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-header
 *
 * @group typography
 */

@mixin fs-header($level, $size-only: false) {
    @include font-size(get-font-size(header, $level), get-line-height(header, $level));

    @if $size-only==false {
        @include f-header;
    }
}


/**
 * Healdine family and weight properties.
 *
 * @requires {variable} $f-serif-headline
 *
 * @group typography
 */

@mixin f-headline {
    font-family: $f-serif-headline;
    font-weight: normal;
}

@mixin f-headerFull {
    font-family: $f-headline-full;
    font-weight: bold;
}

@mixin f-titlepiece {
    font-family: $f-titlepiece;
    font-weight: bold;
}


/**
 * Headline typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-headline(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-headline(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-headline
 *
 * @group typography
 */

@mixin fs-headline($level, $size-only: false) {
    @include font-size(get-font-size(headline, $level), get-line-height(headline, $level));

    @if $size-only==false {
        @include f-headline;
    }
}

@mixin fs-GuardianHeadlineFull($level, $lining-nums: true) {
    @include font-size(get-font-size(header, $level), get-line-height(header, $level));
    @include f-headerFull;

    @if $lining-nums==true  {
        font-variant-numeric: lining-nums;
      -moz-font-feature-settings: "lnum";
      -webkit-font-feature-settings: "lnum";
      font-feature-settings: "lnum";
    }
}

@mixin fs-titlepiece($level, $size-only: false) {
    @include font-size(get-font-size(titlepiece, $level), get-line-height(titlepiece, $level));

    @if $size-only==false {
        @include f-titlepiece;
        font-variant-numeric: lining-nums;
      -moz-font-feature-settings: "lnum";
      -webkit-font-feature-settings: "lnum";
      font-feature-settings: "lnum";
    }
}

/**
 * Body Heading family and weight properties.
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */

@mixin f-bodyHeading {
    font-family: $f-serif-text;
    font-weight: bold;
}


/**
 * Body Heading typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-bodyHeading(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-bodyHeading(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-bodyHeading
 *
 * @group typography
 */

@mixin fs-bodyHeading($level, $size-only: false) {
    @include font-size(get-font-size(bodyHeading, $level), get-line-height(bodyHeading, $level));

    @if $size-only==false {
        @include f-bodyHeading;
    }
}


/**
 * Body Copy family property.
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */

@mixin f-bodyCopy {
    font-family: $f-serif-text;
}


/**
 * Body Copy typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-bodyCopy(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-bodyCopy(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-bodyCopy
 *
 * @group typography
 */

@mixin fs-bodyCopy($level, $size-only: false) {
    @include font-size(get-font-size(bodyCopy, $level), get-line-height(bodyCopy, $level));

    @if $size-only==false {
        @include f-bodyCopy;
    }
}


/**
 * Data family property.
 *
 * @requires {variable} $f-data
 *
 * @group typography
 */

@mixin f-data {
    font-family: $f-data;
}


/**
 * Data typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-data(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-data(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-data
 *
 * @group typography
 */

@mixin fs-data($level, $size-only: false) {
    @include font-size(get-font-size(data, $level), get-line-height(data, $level));

    @if $size-only==false {
        @include f-data;
    }
}


/**
 * Text Sans family property.
 *
 * @requires {variable} $f-sans-serif-text
 *
 * @group typography
 */

@mixin f-textSans {
    font-family: $f-sans-serif-text;
}


/**
 * Text Sans typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-textSans(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-textSans(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-textSans
 *
 * @group typography
 */

@mixin fs-textSans($level, $size-only: false) {
    @include font-size(get-font-size(textSans, $level), get-line-height(textSans, $level));

    @if $size-only==false {
        @include f-textSans;
    }
}


/**
 * Headline Sans family property.  
 * Is not currently integrated into our font scale matrix,
 * hence no `fs-` mixin; currently we're just using it as a
 * replacement font in a few places.
 *
 * @requires {variable} $f-sans-serif-headline
 *
 * @group typography
 */

@mixin f-headlineSans {
    font-family: $f-sans-serif-headline;
}