Typography
We use a single typographic scale for all fonts. Our scale ranges from -2 to 10. Consider scale 0 the baseline, with ascending and descending values in each direction.
- Our legacy typographic scale uses the same values as our latest scale. See our legacy Foundations library and legacy o-typography component in Storybook.
- Modern Origami introduces the Metric2 font family as a variable font, replacing legacy Metric font files. Metric2 renders larger than Metric for the same font size, therefore you may need to use a smaller scale to align with legacy Metric typography.
- Figma Variables are available for each scale in your brand’s Figma library.
Font Families
Metric, Financier Display, and Georgia are used across FT Group brands to convey information to our users in different aspects of digital products.
- Aa Metric 2 VF --o3-font-family-metric
- Aa Financier Display --o3-font-family-financier-display
- Aa Georgia --o3-font-family-georgia
Metric
Metric is our primary typeface. Clear, contemporary and rational, Metric communicates with clarity best used for CTAs, body copy to headings across all sub-brands.
Modern Origami introduces the Metric2 font family, replacing legacy Metric font files. Metric2 renders larger than Metric for the same font size. For brevity, we refer to Metric2 as “Metric” going forward.
Financier Display
Financier is a secondary typeface. Elegant, authoritative and has a distinct voice. Primarily used for large article titles and headings in editorial pages only.
Learn more about Financier Display.
Georgia
Georgia is solely used for editorial article body copy. This is an alternate to Financier Text, as a system font it avoids the performance implications of users downloading additional custom fonts.
Typographic Scale
Metric Scale
| Sample | Scale | Font Size | Line Height |
|---|---|---|---|
| Make sense of it all | 10 | 72px --o3-font-size-metric2-10 | 84px --o3-font-lineheight-metric2-10 |
| Make sense of it all | 9 | 64px --o3-font-size-metric2-9 | 72px --o3-font-lineheight-metric2-9 |
| Make sense of it all | 8 | 48px --o3-font-size-metric2-8 | 56px --o3-font-lineheight-metric2-8 |
| Make sense of it all | 7 | 40px --o3-font-size-metric2-7 | 48px --o3-font-lineheight-metric2-7 |
| Make sense of it all | 6 | 32px --o3-font-size-metric2-6 | 40px --o3-font-lineheight-metric2-6 |
| Make sense of it all | 5 | 28px --o3-font-size-metric2-5 | 32px --o3-font-lineheight-metric2-5 |
| Make sense of it all | 4 | 24px --o3-font-size-metric2-4 | 32px --o3-font-lineheight-metric2-4 |
| Make sense of it all | 3 | 20px --o3-font-size-metric2-3 | 28px --o3-font-lineheight-metric2-3 |
| Make sense of it all | 2 | 18px --o3-font-size-metric2-2 | 24px --o3-font-lineheight-metric2-2 |
| Make sense of it all | 1 | 16px --o3-font-size-metric2-1 | 20px --o3-font-lineheight-metric2-1 |
| Make sense of it all | 0 | 14px --o3-font-size-metric2-0 | 20px --o3-font-lineheight-metric2-0 |
| Make sense of it all | -1 | 12px --o3-font-size-metric2-negative-1 | 16px --o3-font-lineheight-metric2-negative-1 |
| Make sense of it all | -2 | 10px --o3-font-size-metric2-negative-2 | 16px --o3-font-lineheight-metric2-negative-2 |
Financier Display / Georgia Scale
| Sample | Scale | Font Size | Line Height |
|---|---|---|---|
| Make sense of it all | 10 | 84px --o3-font-size-10 | 84px --o3-font-lineheight-10 |
| Make sense of it all | 9 | 72px --o3-font-size-9 | 72px --o3-font-lineheight-9 |
| Make sense of it all | 8 | 56px --o3-font-size-8 | 56px --o3-font-lineheight-8 |
| Make sense of it all | 7 | 48px --o3-font-size-7 | 48px --o3-font-lineheight-7 |
| Make sense of it all | 6 | 40px --o3-font-size-6 | 40px --o3-font-lineheight-6 |
| Make sense of it all | 5 | 32px --o3-font-size-5 | 32px --o3-font-lineheight-5 |
| Make sense of it all | 4 | 28px --o3-font-size-4 | 32px --o3-font-lineheight-4 |
| Make sense of it all | 3 | 24px --o3-font-size-3 | 28px --o3-font-lineheight-3 |
| Make sense of it all | 2 | 20px --o3-font-size-2 | 24px --o3-font-lineheight-2 |
| Make sense of it all | 1 | 18px --o3-font-size-1 | 20px --o3-font-lineheight-1 |
| Make sense of it all | 0 | 16px --o3-font-size-0 | 20px --o3-font-lineheight-0 |
| Make sense of it all | -1 | 14px --o3-font-size-negative-1 | 16px --o3-font-lineheight-negative-1 |
| Make sense of it all | -2 | 12px --o3-font-size-negative-2 | 16px --o3-font-lineheight-negative-2 |
Font Weight
Font weight can be used to express hierarchy or urgency of information.
We recommend using our standard UI typography styles or Editorial typography styles where possible. For custom typography, align to these standard styles where possible. For example when using Metric2 for UI use semibold over other bold weights.
| Preview | Value | Token |
|---|---|---|
| light | 300 | —o3-font-weight-light |
| regular | 400 | —o3-font-weight-regular |
| medium | 500 | —o3-font-weight-medium |
| semibold | 700 | —o3-font-weight-semibold |
| bold | 800 | —o3-font-weight-bold |