Origami Frontend Components & Services

SassDoc: o-typography

oTypography

Output all default typography styles.

Links

oTypographyGetScale(index, font)

Returns a single list on the scale

parameter type default description
index Number of the scale to return.
font (optional) '' The font to get the scale number for, as fonts may have different scales. Uses the default scale if not specified.

Returns

List - List of the requested scale value.

Links

oTypographySpacingSize(units)

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

parameter type default description
units (optional) 0 multiple of the baseline unit

Returns

Number - size in px

Links

oTypographyMaxLineWidth(...)

Returns a maximum line width based on the given scale

parameter type default description
scale number of the scale to return
optimal-characters-per-line number of the characters per line
font (optional) '' The font to get the max line width for, as fonts may have different scales. Uses the default scale if not specified.

Returns

Number - maximum line width in px

Links

oTypographySize(...)

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

parameter type default description
scale number on scale the sizes are based on
line-height size to override the line-height property
font (optional) '' The font to get the font size for, as fonts may have different scales. Uses the default scale if not specified.

Links

oTypographyMargin(top, bottom)

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

parameter type default description
top (optional) false multiple of the baseline unit for top margin
bottom (optional) false multiple of the baseline unit for bottom margin

Links

oTypographyPadding(top, bottom)

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

parameter type default description
top (optional) false multiple of the baseline unit for top padding
bottom (optional) false multiple of the baseline unit for bottom padding

Links

oTypographyBold(font)

Outputs font-weight property for the given font

parameter type default description
font (optional) false font-family that is going to be styled bold

Links

oTypographySetFont(type, family)

Set a custom font.

parameter type default description
type One of 'sans', 'serif', or 'display'.
family The font family to set.

Example

example shows setting a custom font "MySansFont" as the "sans" font.

@include oTypographySetFont($type: 'sans', $family: 'MySansFont, sans');

Links

oTypographyDefineFontScale(family, scale)

Define the typographic scale for a given font. The font may be an existing or custom font.

parameter type default description
family The font name or family to apply a scale to.
scale A map of scale numbers as keys (-2 to 10), with list values of font size and line height "(-2: (12, 16), -1: (14, 16), 0: (16, 20))" etc...

Example

example shows defining a custom font scale for a custom font "MySansFont". At scale "0" the font size will be 16px, and the line-height 20px.

@include oTypographyDefineFontScale($family: 'MySansFont, sans', (
   -2: (12, 16),
   -1: (14, 18),
    0: (16, 20),
    1: (18, 24),
    2: (20, 26),
    3: (24, 32),
    4: (28, 36),
    5: (32, 42),
    6: (40, 52),
    7: (48, 62),
    8: (56, 72),
    9: (72, 94),
   10: (84, 110)
));

Links

The mixin "oTypographyProgressiveFontFallback" is deprecated. The progressive font fallback is output by other `o-typography` mixins, and should not be needed directly within products.

oTypographyProgressiveFontFallback(...)

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

parameter type default description
font Font to output fallback styles for (or .
scale Number on scale the size is based on.
weight (optional) null The weight of the font which needs a fallback e.g. 'bold'.
style (optional) null The style of the font which needs a fallback e.g. 'italic'.

Links

oTypographySerif(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographyDisplay(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographySans(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographyDisplayBold(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographySansBold(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographySerifBold(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

oTypographySerifItalic(...)

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

parameter type default description
scale (optional) false number of the scale to use
line-height (optional) false line-height value to use instead of scale default
progressive (optional) true whether to output progressive font loading styles

Links

o-typography-is-silent

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

Links

o-typography-relative-units

Use relative units (rem) or not (px) when outputting typographic styles. When true, the user will be able to modify their font size using browser settings.

For legacy reasons, this defaults to false (outputs px units). Components and projects may need to be updated to support relative units.

Links

o-typography-load-fonts

When true, webfonts will be downloaded

Links

The variable "o-typography-sans" is deprecated. Output/set font family using the provided mixins.

o-typography-sans

Sans font-family

Links

The variable "o-typography-serif" is deprecated. Output/set font family using the provided mixins.

o-typography-serif

Serif font-family

Links

The variable "o-typography-display" is deprecated. Output/set font family using the provided mixins.

o-typography-display

Display font-family

Links

o-typography-baseline-unit

Unitless size representing the baseline grid

Links

o-typography-loading-prefix

Prefix for the class used when loading fonts

Links

o-typography-font-scale

The default font scale of font-sizes and line-heights. For backward compatibility this scale is used by default when a scale is needed but the font family is not known.

Links

oTypographyTimestamp

Style for timestamps

Links

oTypographyStandfirst

Article Standfirst styles

Links

oTypographyTag

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

Links

oTypographyAuthor

Article author styles - inherits from oTypographyTag mixin

Links

oTypographyTopic

Article Topic styles - inherits from oTypographyTag mixin

Links

oTypographyReadNext

Styles for read next aside header

Links

oTypographyBigNumber

Style for big-number aside

Links

oTypographyCollectionHeader

Styles for collection headers including full-width top border

Links

oTypographyBody

Body text styles

Links

oTypographySub

Subscript text

Links

oTypographySuper

Superscript text

Links

oTypographyLinkCustom

Custom link styles

Links

oTypographyLinkExternal

Standard link styles + external link icon.

Links

oTypographyLinkExternalIcon(color)

External link icon.

parameter type default description
color Color of the icon. Default to the link `o-color` usecase.

Links

oTypographyItalic

Make something italic

Links

oTypographyList

Styling for <ul> and <ol>

Links

oTypographyListOrdered

Styles for <ol> tags

Links

oTypographyListUnordered

Styles for <ul> tags Bullet size and spacing was suited to article font-size (18px at time of writing). This has since been updated to use em units but maintain that ratio.

Links

oTypographyBlockquote

Style for <blockquote> tags including p and footer elements

Links

oTypographyFooter

Style for <footer> tags

Links

oTypographyCaption

Styles for photo or video credit/caption

Links

oTypographyHeadlineLarge

Large headline styles with an underline.

Links

oTypographyHeadline

Headline styles.

Links

oTypographyHeadingLevel1

Level 1 heading styles.

Links

oTypographyHeadingLevel2

Level 2 heading styles.

Links

oTypographyHeadingLevel3

Level 3 heading styles.

Links

oTypographyHeadingLevel4

Level 4 heading styles.

Links

oTypographyHeadingLevel5

Level 5 heading styles.

Links

oTypographyProductHeadingLevel1

Level 1 product heading styles

Links

oTypographyProductHeadingLevel2

Level 2 product heading styles

Links

oTypographyProductHeadingLevel3

Level 3 product heading styles

Links

oTypographyProductHeadingLevel4

Level 4 heading styles

Links

oTypographyProductHeadingLevel5

Level 5 heading styles

Links

oTypographyProductHeadingLevel6

Level 6 heading styles

Links

oTypographyProductHeadingLevel7

Level 7 heading styles

Links

oTypographyProductHeadingLevel8

Level 8 heading styles

Links

oTypographyWrapper(style)

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

parameter type default description
style will change the headings in a body that is not an article

Example

article { @include oTypographyWrapper; }

Links

oTypography

Output all default typography styles.

Links

Switch component view

GitHub Repository

Install o-typography

If using the Build Service, add o-typography@^5.8.3 to your script and link tags.

If running a Manual Build, run bower install --save "o-typography@^5.8.3".

Help & Support

o-typography is maintained directly by the Origami team. If you have any questions about o-typography or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com