We use typography to communicate our brand with a consistent visual identity across all of our communications. Below is a guide to our key font choices and how they reflect the key qualities of our brand.
Typefaces
Magistral
Used as our logo font, Magistal is bold, confident, and forward-looking, reflecting our ambition to be at the forefront of the emerging quantum industry.
Satoshi Variable
Used for display text and headings. Satoshi is clean, legible, and elegant whilst offering a more human element to technology.
Roboto
Used for body copy, chosen for its clean and legible qualities. It makes for an easy read in longer pieces of content such as reports and blog posts.
Roboto Mono
Used for code block and blockquotes. A mono-spaced font that is clean, legible and pairs will with Roboto.
abcćdefghijklmnopqrsštuvwxyzž
1234567890
abcćdefghijklmnopqrsštuvwxyzž
1234567890
abcćdefghijklmnopqrsštuvwxyzž
1234567890
abcćdefghijklmnopqrsštuvwxyzž
1234567890
abcćdefghijklmnopqrsštuvwxyzž
1234567890
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Type scale
Hierachy
Display 1
Headers & hero areas
Take control of your quantum future
Display 2
Headers & hero areas
Take control of your quantum future
Headline 1
Headers & hero areas
Take control of your quantum future. Take control of your quantum future.
Headline 2
Page headings
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Headline 3
Section headings, content headings, modal headings
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Headline-4
Card headings, content subheadings
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Headline 5
Content sub-subheadings
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Headline 6
Pre-title
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Body 1
Main copy
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Body 2
Captions
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Body 3
Small & short informational bits titles
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Caption Text
Breadcrumbs, small & short informational bits
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Caption Title
Headers & hero areas
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Block Quote 2
Block quotes, Testimonials
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Block Quote 1
Block quotes, Testimonials
Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future. Take control of your quantum future.
Alignment
Examples
Promotional
Promotional typography should grab attention and draw viewers in. Favor an exaggerated type scale with a clear call to action.
- Logo:
Over hang the logo by the width of 1 ring-width. - Title:
Use to introduce the main topic and grab the reader's attention.
Heading 1, Gray 100 - Subheading:
Use to provide additional context or details to elaborate on the main heading.
Heading 2, Gray 100 - Text:
Use as body copy to provide additional information or context.
Body Copy 1, Gray 100
Articles
When arranging typography for a long-form document, prioritize rhythm by considering hierarchy, spacing, font size, and contrast. Maintain consistent styles for improved readability and aesthetics.
- Pre-title/ Category:
Use to provide additional context to the main title.
Heading 4, violet 400 - Title:
Use to introduce the main topic and grab the reader's attention.
Heading 1, Gray 100 - Date / Meta:
Use for additional details like dates, authors, etc.
Body copy 3, Gray 100 - Link:
Use to reference external content or direct readers to additional resources.
Body copy 2, Accent - Block quote:
Use to highlight an important or notable section of text, often from another source.
Block quote, Gray 0 - Citation:
Use to give credit to sources and provide credibility to the information presented in the content.
Citation, Gray 400
Website
When laying out website typography, prioritize user engagement by leveraging hierarchy, size, spacing, and contrast for readability.
- VP Statement:
Use to provide a compelling reason for visitors to engage with the website.
Heading 1, violet 400 - Supporting Statement:
Used to reinforce the value proposition and provide additional information or clarification to visitors.
Heading 2, Gray 100 - Button:
Use to trigger an action, link to another page or reference external content.
Body copy 1, Gray 100
Usage guidelines
Avoid ending lines with 'to', 'and', 'or', 'with', 'of', etc or using hyphenating words that wrap to next line.
