Typography
- Aa Metric 2 VF --o3-font-family-metric
- Aa Financier Display --o3-font-family-financier-display
- Aa Financier Text --o3-font-family-financier-text
Metric
Metric is our primary typeface. Clear, contemporary and rational, Metric communicates with clarity best used for CTAs, body copy and headings across all sub-brands.
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.
Financier Text
Financier Text is our main editorial typeface and is used predominantly in our journalism. It is elegant and authoritative, has a distinct voice, and works well across long copy formats.
Learn more about Financier Text.
Typographic Scale
We use multiple typographic scales for different font families. Our scale ranges from -3 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.
| Sample | Scale | Font size / line height |
|---|---|---|
| Make sense of it all | 9 | 72px / 84px |
| Make sense of it all | 8 | 64px / 72px |
| Make sense of it all | 7 | 48px / 56px |
| Make sense of it all | 6 | 40px / 48px |
| Make sense of it all | 5 | 32px / 40px |
| Make sense of it all | 4 | 28px / 32px |
| Make sense of it all | 3 | 24px / 32px |
| Make sense of it all | 2 | 20px / 28px |
| Make sense of it all | 1 | 18px / 24px |
| Make sense of it all | 0 | 16px / 20px |
| Make sense of it all | -1 | 14px / 20px |
| Make sense of it all | -2 | 12px / 16px |
| Make sense of it all | -3 | 10px / 16px |
| Sample | Scale | Font size / line height |
|---|---|---|
| Make sense of it all | 10 | 84px / 84px |
| Make sense of it all | 9 | 72px / 72px |
| Make sense of it all | 8 | 56px / 56px |
| Make sense of it all | 7 | 48px / 48px |
| Make sense of it all | 6 | 40px / 40px |
| Make sense of it all | 5 | 32px / 32px |
| Make sense of it all | 4 | 28px / 32px |
| Make sense of it all | 3 | 24px / 28px |
| Make sense of it all | 2 | 20px / 24px |
| Make sense of it all | 1 | 18px / 20px |
| Make sense of it all | 0 | 16px / 20px |
| Make sense of it all | -1 | 14px / 16px |
| Make sense of it all | -2 | 12px / 16px |
| Sample | Scale | Font size / line height |
|---|---|---|
| Make sense of it all | 10 | 84px / 84px |
| Make sense of it all | 9 | 72px / 72px |
| Make sense of it all | 8 | 56px / 56px |
| Make sense of it all | 7 | 48px / 48px |
| Make sense of it all | 6 | 40px / 40px |
| Make sense of it all | 5 | 32px / 32px |
| Make sense of it all | 4 | 28px / 32px |
| Make sense of it all | 3 | 24px / 28px |
| Make sense of it all | 2 | 20px / 24px |
| Make sense of it all | 1 | 18px / 20px |
| Make sense of it all | 0 | 16px / 20px |
| Make sense of it all | -1 | 14px / 16px |
| Make sense of it all | -2 | 12px / 16px |
Font Weight
Font weight can be used to express hierarchy or urgency of information.
We recommend using our standard UI typography 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 | |
| regular | 400 | |
| medium | 500 | |
| semibold | 700 | |
| bold | 800 | |
UI Typography
User interface (UI) typography is intended for all design elements except those with an editorial voice, such as article page content (see editorial typography). We exclusively use the Metric font family for UI designs, rather than Financier.
UI Headings
The following headlines have the same values across all screen sizes, mobile, tablet, desktop.
| Preview | Usage |
|---|---|
Heading level 1 | Heading 1 is for the main title of a general content page. |
Heading level 2 | Heading 2 is for section headings. |
Heading level 3 | Heading 3 is for sub-section headings. |
Heading level 4 | Heading 4 is for smaller titles, inside a component such as cards or teasers. |
Heading level 5 | Heading 5 is for lowest level headings, titles with less hierarchy inside a component such as cards or teasers. |
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
<> <Heading level="1">Heading level 1</Heading> <Heading level="2">Heading level 2</Heading> <Heading level="3">Heading level 3</Heading> <Heading level="4">Heading level 4</Heading> <Heading level="5">Heading level 5</Heading></>;<h1 class="o3-typography-h1">Heading level 1</h1><h2 class="o3-typography-h2">Heading level 2</h2><h3 class="o3-typography-h3">Heading level 3</h3><h4 class="o3-typography-h4">Heading level 4</h4><h5 class="o3-typography-h5">Heading level 5</h5>UI Body
| Preview | Usage |
|---|---|
Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Body big is primarily used to create a comfortable reading experience on long-form content such as main sub-titles, standfirst and paragraphs. |
Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Body standard is the default text size. Used for detailed or descriptive content, in components, or where space is limited. |
Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Body small serves secondary level content such as small details in tags, locations, teasers and cards. Avoid using this for long-form text for good readability and user experience. |
Body Small (bold) - Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Use to emphasise secondary text such as author name or topic tags. |
Body small (caps) - Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Use to emphasise secondary text such as author name or topic tags. |
Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Body Small Caps - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<> <Body size="big"> Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </Body> <Body size="standard"> Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </Body> <Body size="small"> Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </Body> <Body size="small-caps"> Body Small Caps - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </Body> <Body size="small-bold"> Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit. </Body></>;<p class="o3-typography-body-big"> Body Big - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><p class="o3-typography-body-standard"> Body Standard - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><p class="o3-typography-body-small"> Body Small - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><p class="o3-typography-body-small-caps"> Body Small Caps - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p><p class="o3-typography-body-small-bold"> Body Small Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>Links
For general links in UI pages. The link style can be applied inline (within a paragraph or body text) or standalone. The inline links inherits the text properties of the body it is in.
Link focus style follows the global Origami focus for single ring element.
This is example of
Standard Links.Footer
For footers and copyright notices.
Caption
A caption is a brief text description or explanation that provides context to visual elements such as images, illustrations, charts, or infographics. Captions should be kept brief.
<Caption> Cost of the rights expected to increase by one-third or about £13.7m a year although some anticipate inflation of up to 70%</Caption>;<figcaption class="o3-typography-caption"> Cost of the rights expected to increase by one-third or about £13.7m a year although some anticipate inflation of up to 70%</figcaption>List
For lists in UI pages. 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.
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
<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.
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
<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>Editorial Typography
Editorial typography is intended for editorial and article content e.g article and home pages, live news, teasers.
Headings
Names of heading styles in Editorial typography are now aligned with the Editorial naming to allow the freedom to use heading styles as needed. H1 to H5 should be set during development.
Headline Large
Responsive headlines used for titles and headlines of Main news pages and articles. Usually in the full-bleed topper component. Use in moderation.
Don’t settle for black and white
Headline
For titles and introductions of Feature posts and other new stories. Usage example: Top Stories , Opinion
Don’t settle for black and white
Lower Headings
The following headlines have the same values across all screen sizes, mobile, tablet, desktop.
Chapter
For in-page titles / chapters.
Don’t settle for black and white
Subheading
For in-page sub-titles / sub-headings.
Don’t settle for black and white
Label
To provide short details about a chapter, kickers (additional headline) just above a chapter.
Don’t settle for black and white
Body
Use for body text, paragraphs and lists. This is responsive.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum illum facere totam architecto eum porro exercitationem, ea, accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?
<Body> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum illum facere totam architecto eum porro exercitationem, ea, accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?</Body>;<p class="o3-editorial-typography-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at voluptatum illum facere totam architecto eum porro exercitationem, ea, accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?</p>Quotes
The quote component is used to highlight notable statements, excerpts, or phrases from articles, interviews, and other types of content. It draws attention to key information and enhances the reading experience.
Pull quote
Pull quote is used to highlight important points within a body of text. It is usually placed within the body of the text and left-aligned.
This paragraph is for snippet of contents from an author’s speech to be quote. The following elements in the quote components are optional to provide flexibility appropriate for your use case: caption that tells more information about the author and the vertical bar on the side.
<Quote type="pull" quoteAuthor="Jon Doe"> This paragraph is for snippet of contents from an author’s speech to be quote. The following elements in the quote components are optional to provide flexibility appropriate for your use case: caption that tells more information about the author and the vertical bar on the side.</Quote>;<blockquote class="o3-editorial-typography-pullquote"> <p> This paragraph is for snippet of contents from an author’s speech to be quote. The following elements in the quote components are optional to provide flexibility appropriate for your use case: caption that tells more information about the author and the vertical bar on the side. </p> <cite> <span class="o3-editorial-typography-pullquote__author">Jon Doe</span> </cite></blockquote>Lists
For lists in article content. Refer to guidelines under UI lists above.
Ordered List
Ordered list contains items in a sequential order or priority. List items follow an alphanumeric sequence.
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
<Body> <List type="ordered" listItems={[ "Lorem ipsum adipiscing elit.", "Sed feugiat turpis at massa tristique.", "Curabitu r accumsan elit luctus.", ]} /></Body>;<div class="o3-editorial-typography-body"> <ol class="o3-editorial-typography-list-ordered"> <li>Lorem ipsum adipiscing elit.</li> <li>Sed feugiat turpis at massa tristique.</li> <li>Curabitu r accumsan elit luctus.</li> </ol></div>Unordered List
Unordered lists make blocks of related text easier to read. Use for non-sequential lists.
- Lorem ipsum adipiscing elit.
- Sed feugiat turpis at massa tristique.
- Curabitu r accumsan elit luctus.
<Body> <List type="unordered" listItems={[ "Lorem ipsum adipiscing elit.", "Sed feugiat turpis at massa tristique.", "Curabitu r accumsan elit luctus.", ]} /></Body>;<div class="o3-editorial-typography-body"> <ul class="o3-editorial-typography-list-unordered"> <li>Lorem ipsum adipiscing elit.</li> <li>Sed feugiat turpis at massa tristique.</li> <li>Curabitu r accumsan elit luctus.</li> </ul></div>Links
For links in article content. Refer to guidelines under UI links above.
Big Number
Big Number is a composite component that includes a large number and a label. It is used to describe a big number in the editorial content.
<BigNumber title="£27.5"> Cost expected to increase by £13.7m a year.</BigNumber>;<div class="o3-editorial-typography-big-number"> <div class="o3-editorial-typography-big-number__title">£27.5</div> <div class="o3-editorial-typography-big-number__content"> Cost expected to increase by £13.7m a year. </div></div>Byline
Byline component tells information about the author of a piece. The elements that constitute a byline include, author name, location and timestamp.
<Byline> <a className="o3-editorial-typography-byline-author" href="#"> Joe Doe </a> <span className="o3-editorial-typography-byline-location">in London</span> <time className="o3-editorial-typography-byline-timestamp" dateTime="2019-10-11T20:51:54Z" title="October 11 2019 9:51 pm" > October 11 2019 </time></Byline>;<div class="o3-editorial-typography-byline"> <a class="o3-editorial-typography-byline-author" href="#">Joe Doe</a>
<span class="o3-editorial-typography-byline-location">in London</span>
<time class="o3-editorial-typography-byline-timestamp" datetime="2019-10-11T20:51:54Z" title="October 11 2019 9:51 pm" > October 11 2019 </time></div>Topic Tag
Topic tag is used to indicate the category of a post. Its default colour may be customised to suit your product need.
Topic tag customisation options
| Option | Description |
|---|---|
| Topic tag color | The colour of the topic tag. |
| Topic tag hover color | The colour of the topic tag on hover. |
E.g. To make the topic tag pink.
:root{ --o3-editorial-typography-topic-tag-color: hotpink; --o3-editorial-typography-topic-tag-hover-color: deeppink;}Standfirst
Short intro below the headline that provides context about a post. Used in combination with a header in the topper component.
StandFirst
Caption
For additional information about a piece or image that should be less prominent.
Usage Guidelines
Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognisable when scanning the page.
Use descriptive words to describe links
Link text should be clear, concise, and descriptive enough to make sense out of context. Avoid vague phrases like “click here” or “read more.” for example: use “Read our accessibility guidelines” Instead.
Define heading levels
Styles can be assigned a heading level that is independent of style name, size, weight, or other properties.
Don’t use Financier fonts for UI
The Financier Display font must be used for Editorial article content only, use Metric for UI. .
Avoid negative font scales
Scales less than zero, o3-font-size--1(14px) and o3-font-size--2(12px), are edge cases. Avoid these as they can be hard to read especially on large screens. Negative scales may be used to present short, secondary information where needed to align to existing designs. However we recommend using predefined ui typography styles where possible.
