University of Leeds Design System v1.0.19

Typography

Fonts

We use 2 web font families from the Freight Pro group.

  • Freight Sans Pro (sans-serif)
  • Freight Text Pro (serif)

In addition, for smaller screens, we use a system font stack when rendering sans-serif text. This has to following benefits:

  • It reduces to number of font files that need to be downloaded on smaller screens (typically mobile devices with variable network bandwidth availability)
  • It improves readability of sans-serif fonts (typocally used for smaller body copy) as system fonts should have improved readability on the specific device.

Small screen san-serif font stack

font-family:  "San Francisco",
              Roboto,
              "Helvetica Neue",
              Helvetica,
              "Noto Sans",
              "Segoe UI",
              Arial,
              sans-serif;

For maintainability, each font stack can be referenced using the following SASS variables:

  • $font-family-serif
  • $font-family-serif--desktop
  • $font-family-sans-serif
  • $font-family-sans-serif--desktop

Weights

Font weights are set specific to the font family with regular and bold weights for each that can be referenced with the following SASS variables:

  • $font-weight-regular--serif
  • $font-weight-bold--serif
  • $font-weight-regular--sans-serif
  • $font-weight-bold--sans-serif

Sizes

Font sizes are responsive and include line height settings and can be referenced using the following SASS placeholder classes:

  • %text-size-epic
  • %text-size-heading-1
  • %text-size-heading-2
  • %text-size-heading-3
  • %text-size-heading-4
  • %text-size-heading-5
  • %text-size-heading-6
  • %text-size-paragraph
  • %text-size-paragraph–small
  • %text-size-paragraph–intro
  • %text-size-blockquote
  • %text-size-pullquote
  • %text-size-caption

Styles

In most scenarios the following typography styles are used that combine font faces, weights, sizing and line heights:

Headings

Paragraphs

Lists

Quotes

Misc