Multiple scales and custom fonts.

[notlee]

👇 This is where we started. See comments for final outcome.

Goals

• Non-breaking.
• Scale per font, rather than one shared scale.
• Fonts outside of sans/serif/display.
• Path to transition to a simplified interface in next major.

Progress

Scale per font

• A new public variable $o-typography-font-scale-by-font stores a map of font names to their scale. The existing variable $o-typography-font-scale remains to avoid a major. It acts as a default scale.
• The public mixins oTypographySize, oTypographyGetScale, and oTypographyMaxLineWidth have a new $font parameter, so their output can use the correct scale. The default scale is used if $font is not given making this non-breaking.

Fonts outside of sans/serif/display.

• A new mixin oTypography accepts a $font argument which could me any custom font registered with o-fonts (@todo add the ability to register new fonts). It also accepts an opts argument to output one or more of family, scale, weight, style etc.

  @include oTypography($font, $opts: (
  'family': false,
  'scale': false,
  'custom-line-height': false,
  'weight': false,
  'style': false,
  'progressive': true
  ));

To show how this works existing typography mixins wrap these e.g. oTypographySerif, oTypographyDisplay, oTypographyDisplayBold:

@mixin oTypographySerif($scale: false, $line-height: false, $progressive: true) {
    @include oTypography($o-typography-serif, $opts: (
        'family': true,
        'scale': $scale,
        'custom-line-height': $line-height,
        'progressive': $progressive
    ));
}

In a future major these mixins may be trimmed down, e.g. oTypographyDisplayBold could be removed and replaced with just oTypographyDisplay and an opts param:

@mixin oTypographyDisplay($opts) {
    @include oTypography($o-typography-display, $opts));
}

@include oTypographyDisplay(($scale: 1, $weight: 'bold'));

• Progressive font loading is not supported for custom fonts which do not belong to one of the sans/serif/display variables, but could be added.

Other

• Corrected progressive loading classes in demos.

Potential Future Direction

Brain dump:

// Keep
oTypography // new, output custom fonts
oTypographySerif
oTypographyDisplay
oTypographySans
oTypographyLink (accepts theme, external flag)
oTypographyWrapper
oTypographyBody
oTypographyCaption
oTypographyFooter
oTypographySub
oTypographySuper
oTypographyBlockquote
oTypographyHeadingLevel1 // new
oTypographyHeadingLevel2
oTypographyHeadingLevel3
oTypographyHeadingLevel4
oTypographyHeadingLevel5
oTypographyListOrdered
oTypographyListUnordered

// Remove
oTypographySize // replace with opts
oTypographyBold // replace with opts
oTypographyDisplayBold // replace with opts
oTypographySansBold // replace with opts
oTypographySerifBold // replace with opts
oTypographySerifItalic // replace with opts
oTypographyLinkCustom // replace with theme
oTypographyProgressiveFontFallback // why public?
oTypographyMargin // just use spacing?
oTypographyPadding // just use spacing?
oTypographyList // use ordered or unordered
oTypographyLinkExternal // replace with flag
oTypographyLinkExternalIcon // why public?
oTypographyItalic // replace with opts
oTypographyProductHeadingLevel1 // "product" headings default
oTypographyProductHeadingLevel2 // "product" headings default
oTypographyProductHeadingLevel3 // "product" headings default
oTypographyProductHeadingLevel4 // "product" headings default
oTypographyProductHeadingLevel5 // "product" headings default
oTypographyProductHeadingLevel6 // "product" headings default
oTypographyProductHeadingLevel7 // "product" headings default
oTypographyProductHeadingLevel8 // "product" headings default

// Break out article specific
oTypographyTimestamp
oTypographyStandfirst
oTypographyTag
oTypographyAuthor
oTypographyTopic
oTypographyReadNext
oTypographyBigNumber
oTypographyCollectionHeader
oTypographyHeadline // should oTypographyArticalHeadingLevel1 exist?
oTypographyHeadlineLarge // should oTypographyArticalHeadingLevel1 exist?
oTypographyArticalHeadingLevel1 // new, with product headings default
oTypographyArticalHeadingLevel2 // new, with product headings default
oTypographyArticalHeadingLevel3 // new, with product headings default
oTypographyArticalHeadingLevel4 // new, with product headings default
oTypographyArticalHeadingLevel5 // new, with product headings default
oTypographyArticalHeadingLevel6 // new, with product headings default
oTypographyArticalHeadingLevel7 // new, with product headings default
oTypographyArticalHeadingLevel8 // new, with product headings default

[notlee]

Why register a custom font with o-fonts? Component implementations should be able to call oFontsVariantExists and get a reliable result. Else breaking changes might creep in for whitelabel users without us noticing.

[notlee]

Thanks for the feedback! I'm going to make this real and not a proof of concept. Ignore the branch name 😬

[notlee]

@Financial-Times/origami-core This is ready for review. I'm going to merge this into a base branch which will include branding work, just in case branding gives me reason to change the interface of the new oTypographyFor mixin.

This PR

Features:

• Custom font support.
• Multiple font scales.
• Rearranged README. I think revamping the README after these flurry of changes is a good idea.
• Adds a hidden demo to show the above in action.

Implementation:

• Bumps o-fonts, to register supported fonts / font variants.
• Adds oTypography to output all features with silent mode on.
• Adds oTypographyDefineFontScale to register a custom font scale.
• Adds oTypographyFor, a more flexible mixin to output typography for any font.
• Updates oTypographyProgressiveFontFallback, so font fallbacks may be conditionally included based on typographic attributes (font, style, weight) rather than passing a hardcoded key 'sansBold'.
• Adds an optional $font param to oTypographySize, oTypographyGetScale, oTypographyMaxLineWidth, etc. so they may use a the correct scale for the given font.

Up Next

• Brand o-typography e.g. so heading mixins don't output article styles for the internal brand, same for the wrapper etc, and to remove styles that are master brand only. As part of the same PR add an $opts argument to oTypography, so that select classes may be output.
• Revisit README

[notlee]

Based on feedback from @gvonkoss I added a helper mixin oTypographySetCustomFont for setting a custom font. I've also made oTypographyFor private, as access to that mixin isn't needed by consumers yet.