Typography

Our brand typography reflects our commitment to enabling a quantum future through cutting-edge technology and real value for customers.
Cutting-edge
/
Technology

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.

Magistral
Book
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Satoshi
300
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Satoshi
400
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Roboto
Regular
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Roboto
Medium
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890
Roboto Mono
Regular
ABCĆDEFGHIJKLMNOPQRSŠTUVWXYZŽ
abcćdefghijklmnopqrsštuvwxyzž
1234567890

Type scale

Our type scale is based on a 4px baseline-grid and intended for you across the brand including all marketing and product design. As such our core type scale is verbose to account for the many uses and then subset in our marketing and product libraries to create more contextualised user experiences.
Take control of your quantum future
2xs
Size:
8px / 0.5rem
|
Leading:
162.5% / 1.625em
|
Weight:
Book
|
Tracking:
 0%
|
Paragraph spacing:
14px / 0.875rem
Take control of your quantum future
xs
Size:
10px / 0.625rem
|
Leading:
162.5% / 1.625em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
16px / 1rem
Take control of your quantum future
sm
Size:
12px / 0.75rem
|
Leading:
162.5% / 1.625em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
18px / 1.125rem
Take control of your quantum future
md
Size:
14px / 0.875rem
|
Leading:
150% / 1.5em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
20px / 1.25rem
Take control of your quantum future
lg
Size:
16px / 1rem
|
Leading:
150% / 1.5em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
24px / 1.5rem
Take control of your quantum future
xl
Size:
18px / 1.125rem
|
Leading:
150% / 1.5em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
28px / 1.75rem
Take control of your quantum future
2xl
Size:
20px / 1.25rem
|
Leading:
137.5% / 1.375em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
32px / 2rem
Take control of your quantum future
3xl
Size:
24px / 1.5rem
|
Leading:
137.5% / 1.375em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
36px / 2.25rem
Take control of your quantum future
4xl
Size:
32px / 2rem
|
Leading:
125% / 1.25em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
44px / 2.75rem
Take control of your quantum future
5xl
Size:
36px / 2.25rem
|
Leading:
125% / 1.25em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
48px / 3rem
Take control of your quantum future
6xl
Size:
48px / 3rem
|
Leading:
115% / 1.15em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
56px / 3.5rem
Take control of your quantum future
7xl
Size:
56px / 3.5rem
|
Leading:
115% / 1.15em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
64px / 4rem
Take control of your quantum future
8xl
Size:
72px / 4.5rem
|
Leading:
105% / 1.05em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
96px / 6rem
Take control of your quantum future
9xl
Size:
96px / 6rem
|
Leading:
105% / 1.05em
|
Weight:
Regular
|
Tracking:
 0%
|
Paragraph spacing:
112px / 7rem

Hierachy

To make our typography hierarchy easy we sub-set our type-scale into headings, body text, captions and block quotes.

Primary

Headings

Satoshi Variable
Light
White
Headers & hero areas
4xl
Display 1
Satoshi Variable
Light
White
Headers & hero areas
4xl
Display 2
Satoshi Variable
Light
White
Headers & hero areas
4xl
Headline 1
Satoshi Variable
Regular
White
Page headings
4xl
Headline 2
Satoshi Variable
Regular
White
Section headings, content headings, modal headings
4xl
Headline 3
Satoshi Variable
Medium
Gray 0
Card headings, content subheadings
4xl
Headline 4
Satoshi Variable
Medium
Gray 0
Content sub-subheadings
4xl
Headline 5
Satoshi Variable
Medium
Gray 500
Pre-title
4xl
Headline 6

Body text

Roboto
Regular
Gray 400
Main copy
4xl
Body 1
Roboto
Regular
Gray 400
Captions
4xl
Body 2
Roboto
Regular
Gray 400
Small & short informational bits titles
4xl
Body 3
Roboto
Regular
Gray 500
Breadcrumbs, small & short informational bits
4xl
Caption
Roboto
Medium
Gray 500
Headers & hero areas
4xl
Caption Title
Roboto Mono
Regular
White
Block quotes,
Testimonials
4xl
Blockquote

Secondary

Headings

Satoshi Variable
Light
White
Headers & hero areas
4xl
Display 1
Satoshi Variable
Light
White
Headers & hero areas
4xl
Display 2
Satoshi Variable
Light
White
Headers & hero areas
4xl
Headline 1
Satoshi Variable
Regular
White
Page headings
4xl
Headline 2
Satoshi Variable
Regular
White
Section headings, content headings, modal headings
4xl
Headline 3
Satoshi Variable
Medium
Gray 0
Card headings, content subheadings
4xl
Headline 4
Satoshi Variable
Medium
Gray 0
Content sub-subheadings
4xl
Headline 5
Satoshi Variable
Medium
Gray 500
Pre-title
4xl
Headline 6

Body text

Roboto
Regular
Gray 400
Main copy
4xl
Body 1
Roboto
Regular
Gray 400
Captions
4xl
Body 2
Roboto
Regular
Gray 400
Small & short informational bits titles
4xl
Body 3
Roboto
Regular
Gray 500
Breadcrumbs, small & short informational bits
4xl
Caption
Roboto
Medium
Gray 500
Headers & hero areas
4xl
Caption Title
Roboto Mono
Regular
White
Block quotes,
Testimonials
4xl
Blockquote

Light

Headings

Satoshi Variable
Light
Gray 900
Headers & hero areas
4xl
Display 1
Satoshi Variable
Light
Gray 900
Headers & hero areas
4xl
Display 2
Satoshi Variable
Light
Gray 900
Headers & hero areas
4xl
Headline 1
Satoshi Variable
Regular
Violet 900
Page headings
4xl
Headline 2
Satoshi Variable
Regular
Violet 900
Section headings, content headings, modal headings
4xl
Headline 3
Satoshi Variable
Medium
Violet 900
Card headings, content subheadings
4xl
Headline 4
Satoshi Variable
Medium
Violet 900
Content sub-subheadings
4xl
Headline 5
Satoshi Variable
Medium
Gray 500
Pre-title
4xl
Headline 6

Body text

Roboto
Regular
Gray 700
Main copy
4xl
Body 1
Roboto
Regular
Gray 700
Captions
4xl
Body 2
Roboto
Regular
Gray 700
Small & short informational bits titles
4xl
Body 3
Roboto
Regular
Gray 500
Breadcrumbs, small & short informational bits
4xl
Caption
Roboto
Medium
Gray 500
Headers & hero areas
4xl
Caption Title
Roboto Mono
Regular
Gray 900
Block quotes,
Testimonials
4xl
Blockquote

Alignment

To align text, it's best to align to the left and ragged right, except for narrower layouts, hero sections, and intro pages where centered alignment is better.
Do
Align text left with a ragged right
Do
Align text center
Don't
Align text right
Set the logo with type, using a hanging indent of 1 right-width.

Examples

Here are some common use cases demonstrating how to set typography with appropriate styles and sizes.

Promotional

Promotional typography should grab attention and draw viewers in. Favor an exaggerated type scale with a clear call to action.

  1. Logo:
    Over hang the logo by the width of 1 ring-width.

  2. Title:
    Use to introduce the main topic and grab the reader's attention.

    Heading 1, Gray 100
  3. Subheading: 

    Use to provide additional context or details to elaborate on the main heading.
    Heading 2, Gray 100
  4. 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.

  1. Pre-title/ Category:
    Use to provide additional context to the main title.
    Heading 4, violet 400
  2. Title:
    Use to introduce the main topic and grab the reader's attention.
    Heading 1, Gray 100
  3. Date / Meta: 

    Use for additional details like dates, authors, etc.

    Body copy 3, Gray 100
  4. Link: 

    Use to reference external content or direct readers to additional resources.
    Body copy 2, Accent
  5. Block quote: 

    Use to highlight an important or notable section of text, often from another source.
    Block quote, Gray 0
  6. 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.

  1. VP Statement:
    Use to provide a compelling reason for visitors to engage with the website.
    Heading 1, violet 400
  2. Supporting Statement:
    Used to reinforce the value proposition and provide additional information or clarification to visitors.
    Heading 2, Gray 100
  3. Button: 

    Use to trigger an action,  link to another page or reference external content.
    Body copy 1, Gray 100

Usage guidelines

Do
Ensure optimal alignment for readability by minimizing ragged edges in text layout.
Don't
Compromise readability with uneven or excessive ragged edges; aim for optimal alignment.
Do
“Q-CTRL” should always remain intact on one line.
Don't
Break “Q-CTRL” across multiple lines.
Do
Use ragged right alignment
Don't
Use justified text alignment
Do
Practice good orphan and widow control and balance line length for readability
Don't
Use single words at the end of a paragraph.
Avoid ending lines with 'to', 'and', 'or', 'with', 'of', etc or using hyphenating words that wrap to next line.
Do
Use a leading that is appropriate for the typeface and size of the text. 1.5 is optimal for most uses.
Don't
Use a leading that is too tight or too loose, which can negatively impact readability and aesthetics.