Typography

Two fonts walk into a bar, the bartender says sorry, we don't serve your type.

Typeface

We use the Poppins font available from Google Fonts. Put the following in the head of your HTML document.

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

Typography scale

The typography scale names are based on design rather than HTML tags, decoupling HTML semantics from the style. This allows developers to choose the correct tag which adds semantic value rather than selecting based on the styles associated with the tag.

To copy any typography attribute, simply click on the text of the class or mixin and it will be copied to your clipboard.

• megaphone

  Usage:

  Utility class:	gg-u-text-megaphone
  Mixin:	@include typography-scale(megaphone);

  Details

  font-size:	40px
  font-weight:	700
  line-height:	48px
  This scale changes on screens larger than 768px:
  font-size:	82px
  letter-spacing:	-.02em
  line-height:	88px

• shout

  Usage:

  Utility class:	gg-u-text-shout
  Mixin:	@include typography-scale(shout);

  Details

  font-size:	32px
  font-weight:	700
  line-height:	40px
  This scale changes on screens larger than 768px:
  font-size:	54px
  line-height:	64px

• louder

  Usage:

  Utility class:	gg-u-text-louder
  Mixin:	@include typography-scale(louder);

  Details

  font-size:	24px
  font-weight:	700
  line-height:	32px
  This scale changes on screens larger than 768px:
  font-size:	36px
  line-height:	48px

• louder-regular

  Usage:

  Utility class:	gg-u-text-louder-regular
  Mixin:	@include typography-scale(louder-regular);

  Details

  font-size:	24px
  font-weight:	500
  line-height:	32px
  This scale changes on screens larger than 768px:
  font-size:	36px
  line-height:	48px

• loud-bold

  Usage:

  Utility class:	gg-u-text-loud-bold
  Mixin:	@include typography-scale(loud-bold);

  Details

  font-size:	20px
  font-weight:	700
  line-height:	24px
  This scale changes on screens larger than 768px:
  font-size:	24px
  line-height:	32px

• loud

  Usage:

  Utility class:	gg-u-text-loud
  Mixin:	@include typography-scale(loud);

  Details

  font-size:	20px
  font-weight:	500
  line-height:	24px
  This scale changes on screens larger than 768px:
  font-size:	24px
  line-height:	32px

• speak-up

  Usage:

  Utility class:	gg-u-text-speak-up
  Mixin:	@include typography-scale(speak-up);

  Details

  font-size:	16px
  font-weight:	700
  line-height:	24px

• speak

  Usage:

  Utility class:	gg-u-text-speak
  Mixin:	@include typography-scale(speak);

  Details

  font-size:	16px
  font-weight:	400
  line-height:	24px

• murmur-bold

  Usage:

  Utility class:	gg-u-text-murmur-bold
  Mixin:	@include typography-scale(murmur-bold);

  Details

  font-size:	14px
  font-weight:	700
  letter-spacing:	.02em
  line-height:	21px

• murmur

  Usage:

  Utility class:	gg-u-text-murmur
  Mixin:	@include typography-scale(murmur);

  Details

  font-size:	14px
  font-weight:	400
  letter-spacing:	.02em
  line-height:	21px

• whisper-loud

  Usage:

  Utility class:	gg-u-text-whisper-loud
  Mixin:	@include typography-scale(whisper-loud);

  Details

  font-size:	12px
  font-weight:	700
  letter-spacing:	.02em
  line-height:	18px

• whisper

  Usage:

  Utility class:	gg-u-text-whisper
  Mixin:	@include typography-scale(whisper);

  Details

  font-size:	12px
  font-weight:	400
  letter-spacing:	.02em
  line-height:	18px

How to use it

In most instances the text utility classes can be used.

When you need to change the size of the text dynamically (e.g. different sizes for small and large screens), the text sizes can be obtained by using the typography-scale($size) mixin, where $size is the English term for the size required.

Utility classes

    
<p class="gg-u-text-megaphone">Megaphone</p>
<p class="gg-u-text-shout">Shout</p>
<p class="gg-u-text-louder">Louder</p>
<p class="gg-u-text-louder-regular">Louder regular</p>
<p class="gg-u-text-loud-bold">Loud Bold</p>
<p class="gg-u-text-loud">Loud</p>
<p class="gg-u-text-speak-up">Speak up</p>
<p class="gg-u-text-speak">Speak</p>
<p class="gg-u-text-murmur-bold">Murmur bold</p>
<p class="gg-u-text-murmur">Murmur</p>
<p class="gg-u-text-whisper-loud">Whisper loud</p>
<p class="gg-u-text-whisper">Whisper</p>

  

Mixins

Show “shout” text for small screens and “megaphone” text for larger screens:

.el {
  @include typography-scale(shout);

  @media (min-width: 960px) {
    @include typography-scale(megaphone);
  }
}

Using LESS?

These mixins are available for our community and php implementations:

.el {
    .typography-shout;

    @media (min-width: 960px) {
      .typography-megaphone;
    }
}

3. Adding superscript text

    <p>Sample text <sup class="gg-u-text-super">super</sup></p>

  

Adding superscript text to whisper text

    <p class="gg-u-text-whisper">Sample text <sup class="gg-u-text-super">super</sup></p>

  

4. Centring text

    <p class="gg-u-text-center">Centred text</p>

  

5. Strikethrough text

If you are striking through text your best option is to use the <s> html tag. This also requires a span with class .gg-u-screen-reader-only to explain the text that has been struck out to a screen reader user.

    
<p class="gg-u-text-megaphone">Megaphone 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-shout">Shout 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-louder">Louder 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-louder-regular">Louder regular 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-loud-bold">Loud bold 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-loud">Loud 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-speak-up">Speak up 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-speak">Speak 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-murmur-bold">Murmur bold 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-murmur">Murmur 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-whisper-loud">Whisper loud 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>
<p class="gg-u-text-whisper">Whisper 
  <span class="gg-u-screen-reader-only">Struck out text reading</span>
  <s class="gg-u-text-strikethrough">strikethrough</s>
</p>

  

A real-world example

Here is a real-world example of strikethrough text being used, using .gg-u-text-loud-bold and .gg-u-text-speak.

    <p class="gg-u-text-loud-bold">
  <span class="gg-u-screen-reader-only">Was</span>
  <s class="gg-u-text-strikethrough">£599</s>
  <span class="gg-u-screen-reader-only">Now</span>
  £499
</p>

<p class="gg-u-text-speak">
  <span class="gg-u-screen-reader-only">Was</span>
  <s class="gg-u-text-strikethrough">£599</s>
  <span class="gg-u-screen-reader-only">Now</span>
  £499
</p>