Fonts and Typography

Font Family — Sans-serif

Our website uses Barlow as the main sans-serif font. This is the official font family for the Tyndale University brand. Barlow is an open source font and is available for use on your computer as well. This font will be used by default but can also be selected using the utility class ff-sans.

Font Family — Serif

A serif font is also available but should be used sparingly. We are relying on the system font of Georgia which is the official brand serif font family for Tyndale University. This font can be selected using the utility class ff-serif and is available as an option in some components.

Fluid Type Scale

The Tyndale University website uses a Fluid Type Scale. This article explains fluid type scales in more detail, but the main idea is to define a type scale for small screens, define a type scale for large screens and tell the browser to interpolate between the two scales, based on the current viewport width. The font sizes should also be in scale with one another so that they grow or shrink at a defined scale. The scale is created by defining the base font size (0) and then growing or shrinking from there.

// Default type scale

- MIN[@320px | Size: 18px | Type Scale: 1.2 (Minor Third)] → →
+ MAX[@1140px | Size: 20px | Type Scale: 1.25 (Major Third)]

View fluid typography scale on Utopia

Fluid Typescale Examples

This is a demonstration of the Barlow font at each font size (-2 → 6) using each font weight (400, 500, 700, 800). This is intended to help view the font scale relationships. Font size custom properties and utility classes match with the utility classes removing the -- prior to the name. For example, the custom property of --fs-0 has a utility class of fs-0. These are outlined below in the font-weight 400 view. Default text sizes for regular copy and all headings are also noted below.

|| Font scale at regular weight — 400 (fw-400)

|| Font scale at medium weight — 500 (fw-500)

Font Size 6
Font Size 5
Font Size 4
Font Size 3
Font Size 2
Font Size 1
Font Size 0
Font Size -1
Font Size -2

|| Font scale at bold weight — 700 (fw-700 | text-bold)

|| Font scale at extra bold weight — 800 (fw-800)

Font Size 6
Font Size 5
Font Size 4 (heading 1 | h1)
Font Size 3
Font Size 2
Font Size 1
Font Size 0
Font Size -1
Font Size -2