Origami Frontend Components & Services

SassDoc: o-typography

oTypography(opts)

Output o-typography features.

parameter type default description
opts (optional) ('headings': (1, 2, 3, 4, 5, 6), 'wrapper': true, 'body': true, 'links': true, 'lists': ('ordered', 'unordered'), 'caption': true, 'footer': true, 'utilities': true) The features of o-typography to output classes for. See the [README](https://registry.origami.ft.com/components/o-typography/readme) for more details.

Examples

Example #1

all o-typography css classes.

@include oTypography();

Example #2

a granular selection of o-typography css classes. See the README for a full list of options.

@include oTypography((
	'body': true,
	'headings': (1, 2, 3),
	'lists': ('unordered'),
));

Links

oTypographyCustomize(variables)

Helper for whitelabel brand variable customisation.

parameter type default description
variables Brand variables to customise

Example

@include oTypographyCustomize((
    'heading-level-one': (
        'scale': 7,
    ),
    'heading-level-two': (
        'scale': 6
    ),
    'heading-level-three': (
        'scale': 5
    ),
    'heading-level-four': (
        'scale': 4
    ),
    'heading-level-five': (
        'scale': 3
    ),
    'heading-level-six': (
        'scale': 2
    )
));

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

oTypographyMaxLineWidth(optimal-characters-per-line)

Returns a maximum line width based on the given scale

parameter type default description
optimal-characters-per-line number of the characters per line

Returns

String - maximum line width in ch

Links

oTypographySerif(...)

Outputs typography styles for the Serif font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.

parameter type default description
scale (optional) null a scale number to output a font-size and line-height property
line-height (optional) null custom line-height value to use instead of the scale's default
weight (optional) null output a font-weight property, e.g. 'bold', 'semibold'
style (optional) null output a font-style property, e.g. 'italic'
include-font-family (optional) true Set to false to exclude the font-family property from the output. This is useful when resizing typography, where the serif font-family is inherited from a parent element.
include-progressive (optional) true Set to false to exclude styles used for progressive font loading (font-family and size fallbacks for loading fonts).

Examples

Example #1

a font-family property only for the serif font.

@include oTypographySerif();

Example #2

font-family, font-size, and line-height for the serif font.

@include oTypographySerif($scale: 1);

Example #3

font-family, font-size, and line-height for the serif font. Set a custom line-height of 1.6.

@include oTypographySerif($scale: 1, $line-height: 1.6);

Example #4

font-family, font-size, line-height, and font-weight for the serif font.

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

Example #5

font-family, font-size, line-height, and font-style for the serif font.

@include oTypographySerif($scale: 1, $style: 'italic');

Example #6

serif font properties without font-family.

@include oTypographySerif($scale: 1, $style: 'italic', $include-font-family: false);

Example #7

serif font properties without sizes for the fallback font (without progressive font loading).

@include oTypographySerif($scale: 1, $style: 'italic', $include-progressive: false);

Links

oTypographyDisplay(...)

Outputs typography styles for the Display font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.

parameter type default description
scale (optional) null a scale number to output a font-size and line-height property
line-height (optional) null custom line-height value to use instead of the scale's default
weight (optional) null output a font-weight property, e.g. 'bold', 'semibold'
style (optional) null output a font-style property, e.g. 'italic'
include-font-family (optional) true Set to false to exclude the font-family property from the output. This is useful when resizing typography, where the display font-family is inherited from a parent element.
include-progressive (optional) true Set to false to exclude styles used for progressive font loading (font-family and size fallbacks for loading fonts).

Examples

Example #1

a font-family property only for the display font.

@include oTypographyDisplay();

Example #2

font-family, font-size, and line-height for the display font.

@include oTypographyDisplay($scale: 1);

Example #3

font-family, font-size, and line-height for the display font. Set a custom line-height of 1.6.

@include oTypographyDisplay($scale: 1, $line-height: 1.6);

Example #4

font-family, font-size, line-height, and font-weight for the display font.

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

Example #5

font-family, font-size, line-height, and font-style for the display font.

@include oTypographyDisplay($scale: 1, $style: 'italic');

Example #6

display font properties without font-family.

@include oTypographyDisplay($scale: 1, $style: 'italic', $include-font-family: false);

Example #7

display font properties without sizes for the fallback font (without progressive font loading).

@include oTypographyDisplay($scale: 1, $style: 'italic', $include-progressive: false);

Links

oTypographySans(...)

Outputs typography styles for the Sans font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.

parameter type default description
scale (optional) null a scale number to output a font-size and line-height property
line-height (optional) null custom line-height value to use instead of the scale's default
weight (optional) null output a font-weight property, e.g. 'bold', 'semibold'
style (optional) null output a font-style property, e.g. 'italic'
include-font-family (optional) true Set to false to exclude the font-family property from the output. This is useful when resizing typography, where the sans font-family is inherited from a parent element.
include-progressive (optional) true Set to false to exclude styles used for progressive font loading (font-family and size fallbacks for loading fonts).

Examples

Example #1

a font-family property only for the sans font.

@include oTypographySans();

Example #2

font-family, font-size, and line-height for the sans font.

@include oTypographySans($scale: 1);

Example #3

font-family, font-size, and line-height for the sans font. Set a custom line-height of 1.6.

@include oTypographySans($scale: 1, $line-height: 1.6);

Example #4

font-family, font-size, line-height, and font-weight for the sans font.

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

Example #5

font-family, font-size, line-height, and font-style for the sans font.

@include oTypographySans($scale: 1, $style: 'italic');

Example #6

sans font properties without font-family.

@include oTypographySans($scale: 1, $style: 'italic', $include-font-family: false);

Example #7

sans font properties without sizes for the fallback font (without progressive font loading).

@include oTypographySans($scale: 1, $style: 'italic', $include-progressive: false);

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

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

o-typography-progressive-font-loading

When true, progressive font fallbacks are output.

Links

o-typography-baseline-unit

Unitless size representing the baseline grid

Links

oTypographyHeading(level)

Output styles for page headings.

parameter type default description
level The heading level 1-5.

Examples

Example #1

heading level 1 styles.

h1 {
	@include oTypographyHeading($level: 1);
}

Example #2

heading level 5 styles.

h5 {
	@include oTypographyHeading($level: 5);
}

Links

oTypographyBody

Body text styles

Links

oTypographySub

Subscript text

Links

oTypographySuper

Superscript text

Links

oTypographyList(type, include-base-styles)

Output styles for lists. Styles child li elements. Apply to a containing list element such as ul or ol. Does not output font styles, these are inherited (@see oTypographyBody).

parameter type default description
type (optional) null "ordered", "unordered", or null for just the base styles shared by all lists
include-base-styles (optional) true set to false to exclude base styles which are shared by all list types

Examples

Example #1

the styles for an unordered list.

.my-unordered-list {
	@include oTypographyList('unordered');
}

Example #2

the styles for an ordered and unordered list, sharing base list styles.

.my-list {
	@include oTypographyList();
}

.my-list--ordered {
	@include oTypographyList('ordered', $include-base-styles: false);
}

.my-list--unordered {
	@include oTypographyList('unordered', $include-base-styles: false);
}

Links

oTypographyFooter

Style for <footer> tags

Links

oTypographyCaption

Styles for photo or video credit/caption

Links

oTypography(opts)

Output o-typography features.

parameter type default description
opts (optional) ('headings': (1, 2, 3, 4, 5, 6), 'wrapper': true, 'body': true, 'links': true, 'lists': ('ordered', 'unordered'), 'caption': true, 'footer': true, 'utilities': true) The features of o-typography to output classes for. See the [README](https://registry.origami.ft.com/components/o-typography/readme) for more details.

Examples

Example #1

all o-typography css classes.

@include oTypography();

Example #2

a granular selection of o-typography css classes. See the README for a full list of options.

@include oTypography((
	'body': true,
	'headings': (1, 2, 3),
	'lists': ('unordered'),
));

Links

Switch component view

GitHub Repository

Install o-typography

If using the Build Service, add o-typography@^6.0.0-beta.3 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=whitelabel.

If running a Manual Build, run bower install --save "o-typography@^6.0.0-beta.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