Origami Frontend Components & Services

SassDoc: o-typography

o-typography-is-silent

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

Links

o-typography-load-fonts

When true, webfonts will be downloaded

Links

o-typography-sans

Sans font-family

Links

o-typography-serif

Serif font-family

Links

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

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

Links

oTypographyGetScale(index)

Returns a single list on the scale

parameter type default description
index number of the scale to return

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(scale, optimal-characters-per-line)

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

Returns

Number - maximum line width in px

Links

oTypographySize(scale, line-height)

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

Links

oTypographyProgressiveFontFallback(font, scale)

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
scale number on scale the size is based on

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

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) false 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

oTypographyBody

Body text styles

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

oTypographyFooter

Style for <footer> tags

Links

oTypographyCaption

Styles for photo or video credit/caption

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

oTypographySub

Subscript text

Links

oTypographySuper

Superscript text

Links

oTypographyLinkCustom

Custom link styles

Links

oTypographyItalic

Make something italic

Links

oTypographyList

Styling for <ul> and <ol>

Links

oTypographyListOrdered

Styles for <ol> tags

Links

oTypographyListUnordered

Styles for <ul> tags

Links

oTypographyBlockquote

Style for <blockquote> tags including p and footer elements

Links

oTypographyHeadline

Headline styles

Links

oTypographyHeadlineLarge

Large headline styles with an underline

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; }
non-article { @include oTypographyWrapper($style: product); }

Links

Switch component view

GitHub Repository

Install o-typography

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

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

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