Open
Conversation
…f-typography-to-git-hub
j-mes
commented
Feb 26, 2026
Comment on lines
+290
to
+302
| ## UI Components | ||
|
|
||
| User interface (UI) typography components apply [typography usecase tokens](#usecase-tokens). They are intended for all design elements except those with an editorial voice, such as article page content (see [editorial typography](#editorial-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. | ||
|
|
||
| #### Unordered List | ||
|
|
||
| Unordered lists make blocks of related text easier to read. Use for non-sequential lists. |
Member
Author
There was a problem hiding this comment.
Question: Do we need this section for engineers?
Contributor
There was a problem hiding this comment.
If it also exists on the zeroheight website, I'd say no
j-mes
commented
Feb 26, 2026
Comment on lines
+304
to
+400
| ## Editorial Components | ||
|
|
||
| Editorial typography components bring together [typography usecases](#usecase-tokens) for a specific purpose. For example combining the 3 display sizes into one responsive heading. They are intended for editorial and article content e.g article and home pages, live news, teasers. | ||
|
|
||
| ### Headings | ||
|
|
||
| Names of heading styles in Editorial typography are broadly aligned with the naming used within Editorial, however “display” is sometimes called “headline large”. | ||
|
|
||
| #### Display | ||
|
|
||
| Responsive headlines used for titles and headlines of Main news pages and articles, applying the [display typography use-cases](#display). Usually in the full-bleed topper component. Use in moderation. | ||
|
|
||
| #### Headline | ||
|
|
||
| For titles and introductions of Feature posts and other new stories. Usage example: [Top Stories](https://www.ft.com/content/0d1326b7-8c83-46bc-a9c2-56ce7bb1a109#:~:text=Add%20to%20myFT-,Keir%20Starmer%20defends%20green%20spending%20U%2Dturn%20as%20Sunak%20claims%20Labour%20policy%20is%20in%20%E2%80%98tatters%E2%80%99,-Opposition%20leader%20wants), [Opinion](https://www.ft.com/content/65593173-7f85-47f6-a253-29cc374fd3ca#:~:text=Opinion%20Corporate%20governance-,Sunak%20take%20note%3A%20diluting%20corporate%20governance%20has%20consequences,-Proposed%20reforms%20to) . Applies the [headline typography use-cases](#headline) in one responsive style. | ||
|
|
||
| #### Chapter | ||
|
|
||
| For in-page titles / chapters. | ||
|
|
||
| #### Subheading | ||
|
|
||
| For in-page sub-titles / sub-headings. | ||
|
|
||
| #### Label | ||
|
|
||
| To provide short details about a chapter, kickers (additional headline) just above a chapter. | ||
|
|
||
| ### Body | ||
|
|
||
| For article body use the [body-content](#body-content) [typography use-case](#body-content) as above. | ||
|
|
||
| ### Drop Cap | ||
|
|
||
| Use for stylistic emphasis on the first letter of an article. | ||
|
|
||
| ### 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. | ||
|
|
||
| We have two variants: | ||
|
|
||
| #### Block quote | ||
|
|
||
| For direct quotations of an author's words from other sources. It’s usually indented from the main body of text. | ||
|
|
||
| #### 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. | ||
|
|
||
| ### Lists | ||
|
|
||
| For lists in article content. Refer to guidelines under [UI lists above](#list). | ||
|
|
||
| #### Ordered List | ||
|
|
||
| Ordered list contains items in a sequential order or priority. List items follow an alphanumeric sequence. | ||
|
|
||
| #### Unordered List | ||
|
|
||
| Unordered lists make blocks of related text easier to read. Use for non-sequential lists. | ||
|
|
||
| ### 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. | ||
|
|
||
| ### Byline | ||
|
|
||
| Byline component tells information about the author of a piece. The elements that constitute a byline include, author name, location and timestamp. | ||
|
|
||
| ### 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 | ||
|
|
||
| ```css | ||
| :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. | ||
|
|
||
| ### Caption | ||
|
|
||
| For additional information about a piece or image that should be less prominent. |
Member
Author
There was a problem hiding this comment.
Question: Do we need this as well?
Contributor
There was a problem hiding this comment.
If it also exists on the zeroheight website, I'd say no
j-mes
commented
Feb 26, 2026
Comment on lines
+402
to
+418
| ## Usage Guidelines | ||
|
|
||
| ### 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](#ui-typography) styles where possible. No newline at end of file |
Member
Author
There was a problem hiding this comment.
Question: Do we need this as well?
Contributor
There was a problem hiding this comment.
No, these are guidelines that are also applicable to the design process
Member
Author
|
@joelcarr @frshwtr I’ve highlighted three sections of the Typography documentation that I’ve migrated into a markdown file under o3-foundation/docs. The Figma and Storybook links aren’t included at this stage. I also noticed some parts of the documentation may not be essential for engineers using typography from o3-foundation. Let me know if you’d like me to remove or revise these sections. |
Contributor
|
This looks good but I'd like to ask why do we need this in our GitHub repo? |
Member
Author
It's part of the work to migrate the technical documentation from the website to be closer to the code for engineers. It's on the JIRA board. I think we're covering this in the MoD meeting anyhow |
Contributor
|
I am happy with this change however I am concerned we will have to manually update these values when changes to the design system are made, resulting in both a change in Zeroheight and in our docs. Are we ok with this? |
…f-typography-to-git-hub
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This work migrates Typography documentation from the website into a docs folder on o3-foundation.