Typography

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


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.

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.

1. Using 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-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-whisper-loud">Whisper loud</p>
<p class="gg-u-text-whisper">Whisper</p>

2. Changing size based on screen size

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);
    }
}

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

View demo Open in new window
320 x 568
View code
<p class="gg-u-text-megaphone">Megaphone <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-shout">Shout <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-louder">Louder <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-loud">Loud <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-speak-up">Speak up <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-speak">Speak <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-whisper-loud">Whisper loud <s class="gg-u-text-strikethrough">strikethrough</s></p>
<p class="gg-u-text-whisper">Whisper <s class="gg-u-text-strikethrough">strikethrough</s></p>