The typography system caters for our multi-brand framework allowing us to implement brand specific web typography. Due to licensing issues we currently don’t use many brand specific web fonts however we’re hoping to resolve this soon. The system will then help us to implement brand specific fonts very easily.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

Fonts

1.0.0

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example… 
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
1.0.1

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146) 
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
1.0.2

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146) 
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
2.0.0

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self-hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Font usage

The brand or body font can be applied to any text using a simple class declaration. Refer to the digital brand guidelines regarding the use of typography.
Never use a web font without prior confirmation that you have the correct licence agreement in place.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146) 
<h1 class="brand-font">I’m a Heading using the brand font</h1>

<h1 class="body-font">I’m a Heading using the body font</h1>

CSS

Modifier classes:
  • brand-font
  • body-font

LESS

The main mixin is called: _fonts(WBC)
2.0.1

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about the typography system

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.
Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about the typography system

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)
2.0.2

Brand font

Each brand has a display font typically used for headlines and marketing messages etc. These may come in several weights. If the brand font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBC)

Body font

Each brand has a body font typically used for editorial and user interface elements. The body font comes in several weights. If the body font is a web font (not a system font) then it should be self hosted and implemented using the @fontface declaration. Suitable fallbacks should also be declared in the font stack.
Never use a web font without confirmation that you have the correct licence agreement in place.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBC)

Typographic scale

Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Font weights

The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light weight (providing It’s available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUI and the digital brand guidelines.
Note: Do not use 300 (light) on text sizes below 18px or your text may fall out of an accessible colour contrast range.

Read more about the typography system

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Westpac and BOM each got a shiny new web font, pushing forward the the digital brand experience. 🌟😎 (#269, #279)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.2

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Chrome had a bug where the font weights weren't displaying correctly. No more. (#187)

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • We removed the Roboto webfont as more recent versions of windows Segoe UI now support numerical values in the font weight property. (#146)

Text Styling

1.0.0

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example… 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

loading example… 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.1

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.2

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

loading example…

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
1.0.3

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

loading example…

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
</p>

LESS

The main mixin is called: _text-styling(WBC)
2.0.0

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

loading example…

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
2.0.1

Headings

All HTML headings, are available. H1 through to h6 classes are available and should be used instead of hardcoded headline tags. This enables you to use the styling but keep the accessibility order of headlines to the information structure of your page. The default spacing used in these headings may not be suitable in all cases. Use the margin classes to adjust spacing above and below headings.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1 body-font">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR HEADLINE STYLED AS H4</h3>

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

loading example…

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="#url">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
3.0.0

Display styles

This is a group of potential heading styles. These styles establlish a visual hierachy for a project.

Designers can adjust these classes to suit their needs providing they stay within the range of fonts, weights, colors and sizes described in the fonts core module.

Classes should always be used instead of hardcoded headline tags. This gives us flexible styling options while maintaining a semantic and accessible order of headlines.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<span class="h1">YOUR NON-SEMANTIC HEADLINE IN A SPAN</span>

<h3 class="h4">YOUR SEMANTIC HEADLINE STYLED AS H4</h3>

CSS

Modifier classes:
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

LESS

The main mixin is called: _text-styling(WBC)

Editorial text

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

loading example…

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)
4.0.0

Display styles

Paragraph: The baseline body text.

Small: De-emphasise inline or blocks of text.

Strong: Emphasise a snippet of text. The default behaviour being a heavier font weight.

Emphasis: Emphasise a snippet of text. The default behaviour being italics.

Abbreviation: Explain abbreviations and acronyms by showing the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Mark: Highlight a portion of text.

Del/Ins: Show changes by marking up what has been deleted and what has been inserted.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML but not: JS
  • We have removed the classes for headlines. Wow. I know! The thing was, they were not really useful and more overwritten than used as is. Now you can go and run your own headlines. Prettier, more your. (#277)
  • Updated the normalize CSS to v4.2.0. (Everything is now even more normal)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML but not: JS
  • Headlines caused a lot of confusion. We showed tags in the examples, developers knew they should us the classes so we removed the tags from the selectors. Less shenanigans, more classes. (#251)
  • We nudged the spacing of the paragraphs ever so slightly. This should be better now. Definitely! Maybe. (#253)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • We started working on even better A11Y. Something we are passionate about. A11Y that is, not working in general. (#214) (#241)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • We’ve updated to normalizer 4.0 which comes with juicy new fixes and normalizations. (Yes! That’s a thing)

What’s new since v1.0.3

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
  • We have added support to the lesser known, but still wildly attractive HTML5 tags <mark>, <del> and <ins>.

What’s new since v1.0.2

This version changed: CSS/LESS, but not: HTML JS
  • The core two modules _fonts and _text-styling had a bit of a fight about who sets the font-family variable. This went on for a bit unnoticed until we made them sit together in timeout. Now _text-styling totally understands that everything font should be handled by _fonts and they are best buddys again. sheesh kids... right?! #163

What’s new since v1.0.1

This version changed: CSS/LESS, but not: HTML JS
  • BIG BOM brand change. All new colours, all new look, all new GUI. Brace yourselfs. #157

What’s new since v1.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Being all accessible means we highlight links when they are focused for better readability. We still do it but now only for keyboard users.
  • We also added styling for text selection. Now more trendy, more brandy. 
<p>
	I&rsquo;m a basic paragraph.
	<small>I&rsquo;m small.</small>
	<strong>I&rsquo;m strong</strong>
	<a href="?">I&rsquo;m a link</a>
	<em>I&rsquo;ve been emphasised</em>
	<mark>highlighted text</mark>
	<del>removed bit</del> <ins>replacement bit</ins>
</p>

LESS

The main mixin is called: _text-styling(WBC)

Text Extensions

1.0.0

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

loading example… 
<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

loading example… 
<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

loading example… 
<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)
2.0.0

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)
2.0.1

Lead text

Use lead text to make a paragraph stand out. Useful for skim reading. But don’t overdo it as too much will overpower the screen.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="lead">
	YOUR TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text alignment

Quickly and easily align text to components with text alignment classes.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="text-left">
	LEFT ALIGNED TEXT
</p>

<p class="text-center">
	CENTER ALIGNED TEXT
</p>

<p class="text-right">
	RIGHT ALIGNED TEXT
</p>

LESS

The main mixin is called: _text-extensions(WBC)

Text colours

Primary-text is the default colour for all text; muted-text is used to de-emphasise less important content. The colour difference is very subtle in some brands; however these colours are required to comply with accessibility requirements. Find out more about contextual text colours.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<p class="text-muted">
	I&rsquo;m text-muted. I&rsquo;m accessible on white, but always check.
</p>

<p class="text-primary">
	I&rsquo;m text-primary. I&rsquo;m super accessible. I&rsquo;m all about being seen.
</p>

LESS

The main mixin is called: _text-extensions(WBC)