The typography system allows each brand to designate two typefaces: A display font for headings etc. and a body font for editorial and UI elements. Similar to the colour system, a reference (variable) is created for each font; brand and body. By using this reference rather than the physical name of the font we can quickly and efficiently implement brand specific typography across multiple applications and brands.

Never use a web font without prior confirmation that you have the correct licence agreement in place.

Fonts

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 Typography

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! 👏

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBG)

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.0

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

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBG)

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.0

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

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.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
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 Typography

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! 👏

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBG)

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! 👏

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBG)

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! 👏

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! 👏
2.0.3

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 Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

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 Typography

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏
2.0.4

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 Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

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 Typography

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏
2.0.5

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 Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • brand-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

CSS

Modifier class:
  • body-font

LESS

The main mixin is called: _fonts(WBG)

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 Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

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 Typography

What’s new since v2.0.4

This version changed: CSS/LESS but not: HTML, JS
  • Updated BOM brand’s font to ‘LL Brown’

What’s new since v2.0.3

This version changed: CSS/LESS but not: HTML, JS
  • Exposed some new Less mixins to help when styling elements with brand and body text styling.

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Added BSA brand’s new font ‘Aller’
  • Simplified the brand-font stack, removing brand-font’s (body-font) fallbacks; already provided via body styling

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! 👏

Text Styling

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.

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)
<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(WBG)

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.

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)
<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(WBG)
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.

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)
<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(WBG)

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.

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)
<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(WBG)
4.0.0

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.

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)
<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(WBG)
4.0.1

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.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<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(WBG)
4.0.2

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.

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<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(WBG)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBG)
4.0.3

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.

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<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(WBG)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBG)
4.0.4

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.

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<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(WBG)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

The main mixin is called: _text-styling(WBG)
4.0.5

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.

What’s new since v4.0.4

This version changed: CSS/LESS, but not: HTML JS
  • Dependency: GUI_colors v3.0.2
  • Updating focus outline styling (#433)
  • Reset default browser focus outline styling; applied to default interative and programatically focussed elements as required

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<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(WBG)

Headings

Heading styles are not managed by the GUI Framework, however we do maintain a @color-Headings variable for each brand and have mapped this through; setting the appropriate heading colour for all heading elements (h1h6).

What’s new since v4.0.4

This version changed: CSS/LESS, but not: HTML JS
  • Dependency: GUI_colors v3.0.2
  • Updating focus outline styling (#433)
  • Reset default browser focus outline styling; applied to default interative and programatically focussed elements as required

What’s new since v4.0.3

This version changed: CSS/LESS, but not: HTML JS
  • Ensure OpenType ligatures are enabled for IE (modern browsers do this by default)

What’s new since v4.0.2

This version changed: CSS/LESS, but not: HTML JS
  • Removed body element background-color setting for simplicity; it was never our intention for GUI to enforce a website background colour. Removing this setting makes things clearer. (#376)
  • Removed redundant a plain link background-color and text color styling

What’s new since v4.0.1

This version changed: CSS/LESS, but not: HTML JS
  • Remapped BT’s text selection colour as we’ve deprecated the previous colour variable
  • Added colour styling of heading elements, utilising the Colors module’s new @color-Heading variable.

What’s new since v4.0.0

This version changed: CSS/LESS, but not: HTML JS
  • Normalize was overriding the body font-family for button, input, textarea, select and optgroup by setting font-family to san-serif. The change applies the same font-family as body to these elements specifically to override normalize. (#306)

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)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

LESS

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

Text Extensions

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! 👏
<p class="lead">
	YOUR TEXT
</p>

LESS

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

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! 👏
<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(WBG)

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! 👏
<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(WBG)