Typography

The size, weight, and color of type conveys meaning and establishes a hierarchy.

Opattern’s typographic system is designed to provide structure, draw attention to the most important messages, and make the interface easy to scan.

Typography v3.41.0

Display large

Display medium

Display small

Display smaller

Display smallest

Primary heading

Section heading

Section subheading

A Paragraph with a link.

A Paragraph with an important link.

A quiet paragraph with a link.

Bar Chart Label
Text Label

Mixins v3.41.0

Opattern provides mixins for all of the typography classes. Use @mixin <typography-class-name> instead of @extend <typography-class-name> to apply the typography to your own custom classes, for example:


.my-custom-display {
    @include display-medium;
}
.my-custom-heading {
    @include heading-primary;
}

Check the reference section to see what mixins available.

Content Strategy

Displays

We use display type to call attention to an interface’s main message. Think of it as a newspaper headline: if your reader is skimming quickly, what’s the one thing you want them to see?

  • Use display type sparingly—too many different sizes can look messy.
  • Don’t use display type to do the job of a heading.

Headings

Hierarchical headings are short phrases that describe the content that follows. They create structure and order and make a page more scannable.

  • Make sure the heading describes the content below.
  • Be brief (3-5 words).
  • Use sentence case.
  • Don’t use punctuation. Exception: OK to use a question mark if needed.

Body and Aside

Write in full sentences and do not use bold. Avoid using all caps for emphasis.

Customization v3.41.0

Font family

Much like color, fonts are defining elements of a brand identity. The Opattern default font stack is Helvetica Neue, Helvetica, Arial, sans-serif (and Arial, sans-serif for emails), but we intend for this to be overridden for each client to match their brand.

Size

Avoid customizing font sizes—you don’t want to mess up the hierarchy. Instead of changing individual font sizes, change all the typography at once by customizing the $root-font-size variable.

Variables

Sass Variable Description Default
$text-color Default text color $darkest-gray
$quiet-font-color Default quiet font color $dark-gray
$header-font-color Header font color $text-color
$anchor-font-color Anchor font color $primary-color
$anchor-font-color-hover Anchor font color on hover lighten($primary-color, 20%)
$anchor-text-decoration Anchor text decoration none
$paragraph-font-size Paragraph font size $font-size-medium
$paragraph-aside-font-size Aside text font size $font-size-tiny
$paragraph-aside-font-color Aside text font color $quiet-font-color
$bar-chart-label-font-color Bar chart font color $quiet-font-color
$text-label-font-color Text label font color $quiet-font-color
$text-label-text-transform Text label transform uppercase

Reference v3.41.0

Class Mixin Font Size Variable Size Styles
.display-large display-large $font-size-xxx-huge 84px normal
.display-medium display-medium $font-size-xx-huge 44px normal
.display-small display-small $font-size-x-huge 34px normal
.display-smaller display-smaller $font-huge 24px normal
.display-smallest display-smallest $font-size-large 20px normal
.heading-primary heading-primary $font-size-huge 24px bold
.heading-section heading-section $font-size-large 20px bold
.heading-section-subheading heading-section-subheading $font-size-medium 16px bold
.paragraph or <p> paragraph $font-size-medium 16px normal
.text-label text-label $font-size-small 14px normal and uppercase
.bar-chart-label bar-chart-label $font-size-small 14px normal
.aside or <aside> aside $font-size-tiny 12px normal