Typography

Aa Metric 2 VF --o3-font-family-metric

FT typography uses the following typefaces, to convey information to our users in different aspects of FT products.

Metric

Metric is our primary typeface. Clear, contemporary and rational, Metric communicates with clarity. It is best used for CTAs, body copy, and headings across all sub-brands.

Learn more about Metric.

Typographic Scale

We do not recommend the direct use of our typographic scale within projects. Instead use a usecase token, which defines family, scale, weight, and style as one token for specific scenarios.

These usecases are based on multiple typographic scales, for different font families. Our scale ranges from -2 to 10, depending on the font family. Consider scale 0 the baseline, with ascending and descending values in each direction. Avoid using styles below zero for long form content.

Scale values

Metric2

Sample	Scale	Font size / line height
Make sense of it all	9	72px / 84px `font-size: var(--o3-font-size-metric2-9); line-height: var(--o3-font-lineheight-metric2-9);`
Make sense of it all	8	64px / 72px `font-size: var(--o3-font-size-metric2-8); line-height: var(--o3-font-lineheight-metric2-8);`
Make sense of it all	7	48px / 56px `font-size: var(--o3-font-size-metric2-7); line-height: var(--o3-font-lineheight-metric2-7);`
Make sense of it all	6	40px / 48px `font-size: var(--o3-font-size-metric2-6); line-height: var(--o3-font-lineheight-metric2-6);`
Make sense of it all	5	32px / 40px `font-size: var(--o3-font-size-metric2-5); line-height: var(--o3-font-lineheight-metric2-5);`
Make sense of it all	4	28px / 32px `font-size: var(--o3-font-size-metric2-4); line-height: var(--o3-font-lineheight-metric2-4);`
Make sense of it all	3	24px / 32px `font-size: var(--o3-font-size-metric2-3); line-height: var(--o3-font-lineheight-metric2-3);`
Make sense of it all	2	20px / 28px `font-size: var(--o3-font-size-metric2-2); line-height: var(--o3-font-lineheight-metric2-2);`
Make sense of it all	1	18px / 24px `font-size: var(--o3-font-size-metric2-1); line-height: var(--o3-font-lineheight-metric2-1);`
Make sense of it all	0	16px / 24px `font-size: var(--o3-font-size-metric2-0); line-height: var(--o3-font-lineheight-metric2-0);`
Make sense of it all	-1	14px / 20px `font-size: var(--o3-font-size-metric2-negative-1); line-height: var(--o3-font-lineheight-metric2-negative-1);`
Make sense of it all	-2	12px / 16px `font-size: var(--o3-font-size-metric2-negative-2); line-height: var(--o3-font-lineheight-metric2-negative-2);`

Font Weight

Font weight can be used to express hierarchy or urgency of information. As with our typographic scale, we do not recommend the direct use of our font weight values within projects. Instead apply a usecase token.

Weight values

Preview	Value	Token
light	300	`font-weight: var(--o3-font-weight-light);`
regular	400	`font-weight: var(--o3-font-weight-regular);`
medium	500	`font-weight: var(--o3-font-weight-medium);`
semibold	700	`font-weight: var(--o3-font-weight-semibold);`
bold	800	`font-weight: var(--o3-font-weight-bold);`

Usecase Tokens

Typography usecase tokens provide low level typography styles for use in a variety of contexts.

Title

Titles should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or story paragraph.

title-lg

Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-title-lg">Make sense of it all</span>

Inspect title-lg values

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-lg-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-lg-font-weight	700
fontSize	--o3-type-title-lg-font-size	28px
lineHeight	--o3-type-title-lg-line-height	32px

title-md

Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-title-md">Make sense of it all</span>

Inspect title-md values

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-md-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-md-font-weight	400
fontSize	--o3-type-title-md-font-size	24px
lineHeight	--o3-type-title-md-line-height	32px

title-sm

Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-title-sm">Make sense of it all</span>

Inspect title-sm values

Name	CSS Custom Property	Value
fontFamily	--o3-type-title-sm-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-title-sm-font-weight	400
lineHeight	--o3-type-title-sm-line-height	28px
fontSize	--o3-type-title-sm-font-size	20px

Body

Body styles are used for longer passages of text in your features and components.

body-lg

Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-body-lg">Make sense of it all</span>

Inspect body-lg values

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-lg-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-lg-font-weight	400
fontSize	--o3-type-body-lg-font-size	18px
lineHeight	--o3-type-body-lg-line-height	24px

body-base

Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-body-base">Make sense of it all</span>

Inspect body-base values

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-base-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-base-font-weight	400
fontSize	--o3-type-body-base-font-size	16px
lineHeight	--o3-type-body-base-line-height	24px

body-highlight

Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-body-highlight">Make sense of it all</span>

Inspect body-highlight values

Name	CSS Custom Property	Value
fontFamily	--o3-type-body-highlight-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-body-highlight-font-weight	700
fontSize	--o3-type-body-highlight-font-size	16px
lineHeight	--o3-type-body-highlight-line-height	24px

Label and Details

Label styles are smaller, utilitarian styles, used for very small text within body copy such as captions, contextual info, and label tags.

detail

Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-detail">Make sense of it all</span>

Inspect detail values

Name	CSS Custom Property	Value
fontFamily	--o3-type-detail-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-detail-font-weight	400
fontSize	--o3-type-detail-font-size	14px
lineHeight	--o3-type-detail-line-height	20px

label

Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.

Theme: Show code

Make sense of it all

HTML

<span class="o3-type-label">Make sense of it all</span>

Inspect label values

Name	CSS Custom Property	Value
fontFamily	--o3-type-label-font-family	metric 2 VF, sans-serif
fontWeight	--o3-type-label-font-weight	400
fontSize	--o3-type-label-font-size	14px
lineHeight	--o3-type-label-line-height	20px
textCase	--o3-type-label-text-case	uppercase

Links

The link style can be applied inline (within a paragraph or body text) or standalone. The inline links inherit the text properties of the body it is in. Its focus style follows the global Origami focus for single ring element.

This example shows a link within copy that uses body-base.

Theme: Show code

Make sense of it all.

HTML

<span class="o3-type-body-base">Make <a href="#">sense of</a> it all.</span>

Here is another example which shows a link within body-content-base.

Theme: Show code

Make sense of it all.

HTML

<span class="o3-type-body-content-base">Make <a href="#">sense of</a> it all.</span>

UI Components

List

Lists allow users to view two or more individual, but related, text items grouped together. We have ordered and unordered lists.

Ordered list contains items in a sequential order or priority. List items follow an alphanumeric sequence.

Theme: Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<OrderedList>
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</OrderedList>;

<ol class="o3-typography-ol">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ol>

Unordered List

Unordered lists make blocks of related text easier to read. Use for non-sequential lists.

Theme: Show code

Lorem ipsum adipiscing elit.
Sed feugiat turpis at massa tristique.
Curabitu r accumsan elit luctus.

JSX
HTML

<UnorderedList>
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</UnorderedList>;

<ul class="o3-typography-ul">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ul>

Suggest an edit