Typography

Using the Fonts

To use the typefaces chosen for this design system, add the html from the codepen below into the head section of each page of your website, and add the body and header CSS rules to your stylesheet. The remaining CSS rules are helper classes to apply specific font weights/sizes to specific elements.

See the Pen Typography by Tyson Foster (@Foster-Design-System) on CodePen.

Font sizes are defined in ems using a default body font size of 16px

  • Font sizes

  • XXS: 0.8em
  • XS: 0.9em
  • S: 1em
  • M: 1.2em
  • L: 1.5em
  • XL: 1.8em
  • XXL: 2em

  • Font weights

  • Light: 300
  • Regular: 400
  • Semibold: 600
  • Bold: 700

Header Typeface: Arimo

H1 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic

H2 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic

H3 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic

H4 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic

H5 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic
H6 Regular Regular Italic Semibold Semibold Italic Bold Bold Italic

Content Typeface: Aleo

XXS font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

XS font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

S font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

M font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

L font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

XL font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content

XXL font: Light text for image captions Light italic text for image captions Regular text for body content Regular italic text for body content Bold text for emphasized content Bold italic text for emphasized content