GoComponents

# Typography

# GoCompare Font

To use the GoCompare Font you can either apply it directly the element you are styling or apply it at the top level of your project using the body tag.

.element {
  font-family: $font-gocompare;
  // Fix font aliasing
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

// Or

body {
  font-family: $font-gocompare;
  // Fix font aliasing
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

# Font weight

The GoCompare font is available in 3 weights: regular(400), bold(700), and headline(900). Applying these directly in your CSS is outlined below, however, in the majority of cases you should use the typography scales to apply font styling instead.

.text-regular {
  font-weight: $font-weight-regular;
}

.text-bold {
  font-weight: $font-weight-bold;
}

.text-headline {
  font-weight: $font-weight-headline;
}

# Typography scales

The typography scales are used as a baseline for all designs. There are 4 scales in total, these are: display, heading, label and paragraph. Each scale offers a range of sizes. Each item on a scale or 'size' combines font-size,font-weight and line-height. When building UI's, you should almost always be using the typography scales.

NOTE

Looking at the design document for the typography scales will make this much easier to visualize, you can view it in figma. It is generally a useful file to have on hand when working with typography.

There is a mixin available for each typography scale, seen below:

// Display
@include text-display($size);
// sizes available: XS, S, M, L

// Heading
@include text-heading($size);
// sizes available: XS, S, M, L, XL, XXL

// Label
@include text-label($size);
// sizes available: XS, S, M, L, XL, XXL

// Paragraph
@include text-paragraph($size);
// sizes available: XS, S, M, L, XL, XXL

To use a scale in your project, simply include the relevant mixin and pass in the size you need. These styles do not have responsive behavior so it is likely you will need to specify your desired size at specific breakpoints as per designs. A comprehensive list of every size on each scale is included below.

# Display text scale

# Display / Large

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-display(l);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 60px;
  // line-height: 68px;
}

# Display / Medium

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-display(m);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 52px;
  // line-height: 64px;
}

# Display / Small

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-display(s);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 44px;
  // line-height: 56px;
}

# Display / XSmall

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-display(xs);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 40px;
  // line-height: 52px;
}

# Heading text scale

# Heading / XXLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(xxl);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 36px;
  // line-height: 44px;
}

# Heading / XLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(xl);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 36px;
  // line-height: 44px;
}

# Heading / Large

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(l);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 28px;
  // line-height: 36px;
}

# Heading / Medium

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(m);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 24px;
  // line-height: 32px;
}

# Heading / Small

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(s);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 20px;
  // line-height: 28px;
}

# Heading / XSmall

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-heading(xs);
  
  /* Compiled CSS */
  // font-weight: 900;
  // font-size: 18px;
  // line-height: 24px;
}

# Label / XXLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(xxl);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 24px;
  // line-height: 32px;
}

# Label / XLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(xl);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 20px;
  // line-height: 28px;
}

# Label / Large

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(l);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 18px;
  // line-height: 24px;
}

# Label / Medium

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(m);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 16px;
  // line-height: 24px;
}

# Label / Small

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(s);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 14px;
  // line-height: 20px;
}

# Label / XSmall

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-label(xs);
  
  /* Compiled CSS */
  // font-weight: 700;
  // font-size: 12px;
  // line-height: 20px;
}

# Paragraph / XXLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(xxl);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 24px;
  // line-height: 32px;
}

# Paragraph / XLarge

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(xl);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 20px;
  // line-height: 28px;
}

# Paragraph / Large

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(l);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 18px;
  // line-height: 24px;
}

# Paragraph / Medium

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(m);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 16px;
  // line-height: 24px;
}

# Paragraph / Small

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(s);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 14px;
  // line-height: 20px;
}

# Paragraph / XSmall

The quick brown fox jumps over a lazy dog. 0123456789
.example-text {
  /* SCSS Mixin */
  @include text-paragraph(xs);
  
  /* Compiled CSS */
  // font-weight: 400;
  // font-size: 12px;
  // line-height: 20px;
}

← Spacing →