Font Families and Fluid Type Scale
Font Families
This project will use Barlow as the main sans-serif font. This is the official alternative font family for our brand sans-serif font, DIN Next. DIN Next is very expensive to use on our website and impacts performance. Barlow is a close alternative and is open source. This font will be used by default but can also be selected using the custom property --ff-sans or the utility class ff-sans.
A serif font is also available but should be used sparingly. We are relying on the system font of Georgia for this font, this is also the official brand serif font family alternative to Minion Pro which is also very expensive to use on our website. This font can be selected using the custom property --ff-serif or the utility class ff-serif.
Fluid Type Scale
This project uses a Fluid Type Scale. This article explains fluid type scales in more details, 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. Our default type scale is documented below:
// 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 Size 6 (--fs-6 | fs-6)
Font Size 5 (--fs-5 | fs-5)
Font Size 4 (--fs-4 | fs-4)
Font Size 3 (--fs-3 | fs-3)
Font Size 2 (--fs-2 | fs-2)
Font Size 1 (--fs-1 | fs-1)
Font Size 0 (--fs-0 | fs-0 | default text size/weight)
Font Size -1 (--fs--1 | fs--1)
Font Size -2 (--fs--2 | fs--2)
|| 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 Size 6
Font Size 5
Font Size 4
Font Size 3 (heading 2 | h2)
Font Size 2 (heading 3 | h3)
Font Size 1 (heading 4 | h4)
Font Size 0 (heading 5 | h5)
Font Size -1 (heading 6 | h6)
Font Size -2
|| 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
Custom Property Value Reference
--Custom Property // value // output range
--fs--2: clamp(0.78rem, 0.77rem + 0.04vw, 0.8rem); // 12.5px → 12.8px
--fs--1: clamp(0.94rem, 0.91rem + 0.12vw, 1rem); // 15px → 16px
--fs-0: clamp(1.13rem, 1.08rem + 0.24vw, 1.25rem); // 18px → 20px
--fs-1: clamp(1.35rem, 1.27rem + 0.41vw, 1.56rem); // 21.6px → 25px
--fs-2: clamp(1.62rem, 1.49rem + 0.65vw, 1.95rem); // 25.92px → 31.25px
--fs-3: clamp(1.94rem, 1.75rem + 0.97vw, 2.44rem); // 31.1px → 39.06px
--fs-4: clamp(2.33rem, 2.05rem + 1.4vw, 3.05rem); // 37.32px → 48.83px
--fs-5: clamp(2.8rem, 2.4rem + 1.98vw, 3.82rem); // 44.79px → 61.04px
--fs-6: clamp(3.36rem, 2.81rem + 2.75vw, 4.77rem); // 53.75px → 76.29px