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

View demo Open in new window
320 x 568
View code
    
<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

View demo Open in new window
320 x 568
View code
    <p>Sample text <sup class="gg-u-text-super">super</sup></p>

  

Adding superscript text to whisper text

View demo Open in new window
320 x 568
View code
    <p class="gg-u-text-whisper">Sample text <sup class="gg-u-text-super">super</sup></p>

  

4. Centring text

View demo Open in new window
320 x 568
View code
    <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.

View demo Open in new window
320 x 568
View code
    
<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.

View demo Open in new window
320 x 568
View code
    <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>