o-typography

variables

o-typography-is-silent

$o-typography-is-silent: true !default;

Description

When silent mode is active, css classes will not be output

Type

Bool

Links

o-typography-load-fonts

$o-typography-load-fonts: true !default;

Description

When true, webfonts will be downloaded

Type

Bool

Links

o-typography-sans

$o-typography-sans: oFontsGetFontFamilyWithFallbacks(MetricWeb) !default;

Description

Sans font-family

Type

String

Used by

Links

o-typography-serif

$o-typography-serif: Georgia, serif !default;

Description

Serif font-family

Type

String

Used by

Links

o-typography-display

$o-typography-display: oFontsGetFontFamilyWithFallbacks(FinancierDisplayWeb) !default;

Description

Display font-family

Type

String

Used by

Links

o-typography-baseline-unit

$o-typography-baseline-unit: 4;

Description

Unitless size representing the baseline grid

Type

Number

Used by

Links

o-typography-loading-prefix

$o-typography-loading-prefix: 'o-typography--loading' !default;

Description

Prefix for the class used when loading fonts

Type

String

Used by

Links

o-typography-font-scale

$o-typography-font-scale: (
   -2: (12, 16),
   -1: (14, 16),
    0: (16, 20),
    1: (18, 20),
    2: (20, 24),
    3: (24, 28),
    4: (28, 32),
    5: (32, 32),
    6: (40, 40),
    7: (48, 48),
    8: (56, 56),
    9: (72, 72),
   10: (84, 84),
);

Description

Scale of font-sizes and line-heights for all font-families

Type

Map

Used by

Links

[private] _o-typography-progressive-font-fallbacks

$_o-typography-progressive-font-fallbacks: (
	sans: (
		font: $o-typography-sans,
		fallback: sans-serif,
		fallback-scale: 0.87
	),
	sansBold: (
		font: $o-typography-sans,
		fallback: sans-serif,
		fallback-scale: 0.83
	),
	sansItalic: (
		font: $o-typography-sans,
		fallback: sans-serif,
		fallback-scale: 0.87
	),
	display: (
		font: $o-typography-display,
		fallback: serif,
		fallback-scale: 0.9
	),
	displayBold: (
		font: $o-typography-display,
		fallback: serif,
		fallback-scale: 0.9
	),
	displayItalic: (
		font: $o-typography-display,
		fallback: serif,
		fallback-scale: 0.9
	)
);

Description

Configuration for fallback fonts when loading fonts progressively

Type

Map

Used by

Links

General

functions

oTypographyGetScale

@function oTypographyGetScale($index) { ... }

Description

Returns a single list on the scale

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$index

number of the scale to return

Numbernone

Returns

List

list of the requested scale value

Requires

Used by

[private] _oTypographyFontSizeFromScale

@function _oTypographyFontSizeFromScale($scale, $font-adjust) { ... }

Description

Returns the font-size value from the scale passed in modified by the font-adjust if present

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to return

Numbernone
$font-adjust

multiplier if used as a progressive font

Numbernone

Returns

Number

size in px

Requires

Used by

[private] _oTypographyLineHeightFromScale

@function _oTypographyLineHeightFromScale($scale, $line-height) { ... }

Description

Returns the line-height value from the scale passed in or the line-height setting if one is passed

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to return

Numbernone
$line-height

size to output if not false

Numbernone

Returns

Number

size in px

Requires

Used by

oTypographySpacingSize

@function oTypographySpacingSize($units: 0) { ... }

Description

Returns a spacing size in px based on the baseline unit and number of units passed to the function

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$units

multiple of the baseline unit

Number0

Returns

Number

size in px

Requires

Used by

mixins

[private] _oTypographyFontSize

@mixin _oTypographyFontSize($scale, $progressive-font-adjust) { ... }

Description

Outputs the font size based on the scale, also accepts a font adjustment parameter for when outputting styles for progressively loaded fonts

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number on scale the sizes are based on

Numbernone
$progressive-font-adjust

multiplier for font-size adjustments when adding styles for progressively loaded font

Numbernone

Requires

Used by

[private] _oTypographyProgressiveFontFallbackSize

@mixin _oTypographyProgressiveFontFallbackSize($font, $scale) { ... }

Description

Outputs the the fallback font size only for progressively loaded fonts

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font

font to output fallback styles for

Stringnone
$scale

number on scale the sizes are based on

Numbernone

Requires

oTypographySize

@mixin oTypographySize($scale, $line-height) { ... }

Description

Outputs the font size and line height based on the scale, also accepts an override line-height to output and a font adjustment parameter for when outputting styles for progressively loaded fonts

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number on scale the sizes are based on

Numbernone
$line-height

size to override the line-height property

Bool or Numbernone

Requires

Used by

oTypographyProgressiveFontFallback

@mixin oTypographyProgressiveFontFallback($font, $scale) { ... }

Description

Outputs the progressive font fallback styles based on font and scale if the font has fallback settings

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font

font to output fallback styles for

Stringnone
$scale

number on scale the size is based on

Numbernone

Requires

Used by

oTypographyMargin

@mixin oTypographyMargin($top: false, $bottom: false) { ... }

Description

Outputs margin-top and/or margin-bottom based on multiples of the baseline unit passed to the mixin

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$top

multiple of the baseline unit for top margin

Bool or Numberfalse
$bottom

multiple of the baseline unit for bottom margin

Bool or Numberfalse

Requires

Used by

oTypographyPadding

@mixin oTypographyPadding($top: false, $bottom: false) { ... }

Description

Outputs padding-top and/or padding-bottom based on multiples of the baseline unit passed to the mixin

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$top

multiple of the baseline unit for top padding

Bool or Numberfalse
$bottom

multiple of the baseline unit for bottom padding

Bool or Numberfalse

Requires

Used by

oTypographyBold

@mixin oTypographyBold($font: false) { ... }

Description

Outputs font-weight property for the given font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font

font-family that is going to be styled bold

Bool or Stringfalse

Used by

oTypographySerif

@mixin oTypographySerif($scale: false, $line-height: false, $progressive: false) { ... }

Description

Outputs font-family, size and line-height, and progressive font loading styles for Serif font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Boolfalse

Requires

Used by

oTypographyDisplay

@mixin oTypographyDisplay($scale: false, $line-height: false, $progressive: true) { ... }

Description

Outputs font-family, size and line-height, and progressive font loading styles for Display font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Booltrue

Requires

Used by

oTypographySans

@mixin oTypographySans($scale: false, $line-height: false, $progressive: true) { ... }

Description

Outputs font-family, size and line-height, and progressive font loading styles for Sans font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Booltrue

Requires

Used by

oTypographyDisplayBold

@mixin oTypographyDisplayBold($scale: false, $line-height: false, $progressive: true) { ... }

Description

Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Display font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Booltrue

Requires

Used by

oTypographySansBold

@mixin oTypographySansBold($scale: false, $line-height: false, $progressive: true) { ... }

Description

Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Sans font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Booltrue

Requires

Used by

oTypographySerifBold

@mixin oTypographySerifBold($scale: false, $line-height: false, $progressive: true) { ... }

Description

Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Serif font

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$scale

number of the scale to use

Bool or Numberfalse
$line-height

line-height value to use instead of scale default

Bool or Numberfalse
$progressive

whether to output progressive font loading styles

Booltrue

Requires

oTypographyBody

@mixin oTypographyBody() { ... }

Description

Body text styles

Parameters

None.

Requires

Used by

oTypographyTimestamp

@mixin oTypographyTimestamp() { ... }

Description

Style for timestamps

Parameters

None.

Requires

oTypographyStandfirst

@mixin oTypographyStandfirst() { ... }

Description

Article Standfirst styles

Parameters

None.

Requires

oTypographyTag

@mixin oTypographyTag() { ... }

Description

Common tag styles - not used directly. Includes styles for a and span child elements

Parameters

None.

Used by

oTypographyAuthor

@mixin oTypographyAuthor() { ... }

Description

Article author styles - inherits from oTypographyTag mixin

Parameters

None.

Requires

oTypographyTopic

@mixin oTypographyTopic() { ... }

Description

Article Topic styles - inherits from oTypographyTag mixin

Parameters

None.

Requires

oTypographyFooter

@mixin oTypographyFooter() { ... }

Description

Style for

tags

Parameters

None.

Requires

Used by

oTypographyCaption

@mixin oTypographyCaption() { ... }

Description

Styles for photo or video credit/caption

Parameters

None.

Requires

Used by

oTypographyReadNext

@mixin oTypographyReadNext() { ... }

Description

Styles for read next aside header

Parameters

None.

Requires

oTypographyBigNumber

@mixin oTypographyBigNumber() { ... }

Description

Style for big-number aside

Parameters

None.

Requires

oTypographyCollectionHeader

@mixin oTypographyCollectionHeader() { ... }

Description

Styles for collection headers including full-width top border

Parameters

None.

Requires

use cases

mixins

oTypographySub

@mixin oTypographySub() { ... }

Description

Subscript text

Parameters

None.

Requires

Used by

Links

oTypographySuper

@mixin oTypographySuper() { ... }

Description

Superscript text

Parameters

None.

Requires

Used by

Links

oTypographyLinkCustom

@mixin oTypographyLinkCustom() { ... }

Description

Custom link styles

Parameters

None.

Used by

Links

oTypographyItalic

@mixin oTypographyItalic() { ... }

Description

Make something italic

Parameters

None.

Used by

Links

oTypographyList

@mixin oTypographyList() { ... }

Description

Styling for

    and

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyListOrdered

    @mixin oTypographyListOrdered() { ... }

    Description

    Styles for

      tags

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyListUnordered

    @mixin oTypographyListUnordered() { ... }

    Description

    Styles for

      tags

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyBlockquote

    @mixin oTypographyBlockquote() { ... }

    Description

    Style for

    tags including p and footer elements

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyHeadline

    @mixin oTypographyHeadline() { ... }

    Description

    Headline styles

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyHeadlineLarge

    @mixin oTypographyHeadlineLarge() { ... }

    Description

    Large headline styles with an underline

    Parameters

    None.

    Requires

    Links

    oTypographyHeadingLevel2

    @mixin oTypographyHeadingLevel2() { ... }

    Description

    Level 2 heading styles

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyHeadingLevel3

    @mixin oTypographyHeadingLevel3() { ... }

    Description

    Level 3 heading styles

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyHeadingLevel4

    @mixin oTypographyHeadingLevel4() { ... }

    Description

    Level 4 heading styles

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyHeadingLevel5

    @mixin oTypographyHeadingLevel5() { ... }

    Description

    Level 5 heading styles

    Parameters

    None.

    Requires

    Used by

    Links

    oTypographyWrapper

    @mixin oTypographyWrapper() { ... }

    Description

    General typography Apply to a wrapper to style all text inside it

    Parameters

    None.

    Example

    article { @include oTypographyWrapper; }

    Requires

    Links