Skip to main content
Styles

Typography

Draft

Arch typography is flexible and modular and can be used in various ways. Below are the principles behind how our type system was created and examples of how it can be used.

Display

Heading

Label

Paragraph

Common alternative names

Type styles, labels, text styles, type, font

Principles​

Go big​

We prioritize larger font sizes because Arch values legibility and accessibility. We love our type and aren't afraid to let it shine.

Less is more​

We optimize for fewer style options, so there's no decision paralysis when choosing the right type of style. We include a simple set of text styles to provide the right balance of control and creative freedom.

Simple semantics​

Our semantic groupings give you guidance on how the style can be used while not being overly prescriptive.

Anatomy​

Roles​

Type styles are defined based on four roles: Display, Heading, Label, and Paragraph.

We build interfaces that work for everyone. 0123456789

Display

The largest text on the screen is reserved for short, important text or numerals.

We build interfaces that work for everyone. 0123456789

Heading

Used to break up content into sections and provide a clear hierarchy of information.

We build interfaces that work for everyone. 0123456789

Label

A short phrase or sentence that provides context or information about a specific block of text.

We build interfaces that work for everyone. 0123456789

Paragraph

Longer blocks of text, used for mostly text-based content.

Scale​

Modular scale

Much like notes written in this key on a music scale, our type sizes create a visual rhythm and harmony that is as pleasing to the eyes as music is to the ears.

Our scale is modeled after the intervals in a major second musical scale (ratio of 8:9). Songs created with the major second musical scale are upbeat and happy, the feelings we want our design system to evoke. Some common examples are "Happy Birthday" and "Frère Jacques."

Arch UI leverages a modular scale to define a set of harmonious and hierarchical type sizes. It starts with a base font size of 14 and scales by multiplying 1.125 at each interval. We've chosen a key set of sizes from this scale that work well across interfaces.

121416182024283236404452...96

Line height

Proper line height is achieved by multiplying the type size by 1.45 and rounding to the nearest interval of 4. This ensures all type aligns with our 4 px baseline grid.

We build interfaces that work for everyone

Spacing​

Calculate the space below a text box by subtracting the font size from the line height, then round the result to a 4-interval. Add an extra line height for spaces below Paragraphs.

Spacing = (line-height - font-size) rounded to nearest 4

Size​

Within our roles, we use four key sizes to ensure a clear typographic scale and rhythm:

We also support additional sizes exclusively for creating more visual emphasis on an interface.

Display • Small
RoleSize
SizeParagraphLabelHeadingDisplay
XSmallYesYesYesYes
SmallYesYesYesYes
MediumYesYesYesYes
LargeYesYesYesYes
X LargeNoNoYesNo
XX LargeNoNoYesNo

Fonts​

The default font family that Arch UI uses is Inter. It comes with three distinct typefaces: Display, Text, and Mono.

They are all used in different sizes and weights throughout our typography tokens.

Inter Display
Inter Display
Inter Text
Inter Text
Inter Mono
Inter Mono
TokenStack
--typography-family-sans'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
--typography-family-serifGeorgia, Cambria, 'Times New Roman', Times, serif
--typography-family-monoui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace

Looking for our font files? You can download Inter from Google Fonts. The serif and monospace stacks use system fonts that ship with every major operating system.

Inter Mono​

We've created a sister version of our main typographic styles, which solely uses Inter Mono. It is designed specifically for money and number-related use cases.

$1,234,567,890

Monospaced vs Regular typefaces

A monospaced font is designed in a way that each character occupies the same amount of space on a horizontal line of text and offers better vertical alignment than proportional numbers.

This makes it perfect for displaying numbers such as the price of a product or a payment balance.

Inter
$11,111
$99,999
Inter Mono
$11,111
$99,999

Ramps​

The design system currently supports two typographical ramps, standard and monospaced. While both ramps leverage the same core sizes to ensure harmony between the styles when displayed alongside each other, they are not meant to be used interchangeably.

Inter
Standard
Mono
Monospaced (Mono)

Usage​

Clear typographic hierarchy​

A clear, logical information architecture enhances the readability and scannability of an interface, which can enable users to find important content more quickly.

Typography is a powerful tool that can be used to create this architecture, by visually emphasizing and drawing attention to specific elements of an interface.

Display
Heading
Label
Paragraph
Your rides
Economy
Premium
6 min

Content hierarchy​

Combining the same sizes from each class creates a simple, beautiful hierarchy.

In this example, we're using pairings to combine a heading, label, and paragraph.

Heading XSmall
Label Small
Paragraph Small. We build interfaces that work for everyone. 0123456789
Small
Heading Small
Label Medium
Paragraph Medium. We build interfaces that work for everyone. 0123456789
Medium
Heading Medium
Label Large
Paragraph Large. We build interfaces that work for everyone. 0123456789
Large

Legibility​

Balancing data density and legibility

Good paragraph legibility is crucial for users to read and understand the content. When the text is legible, users can quickly scan the content and find the information they need.

You should use Paragraph Medium (16) or Paragraph Large (18) for multi-line text whenever you can.

You unlocked a higher level based on your activity and orders in the past 6 months.

Enjoy your new benefits through April 1, 2026.

✓ Do

Use Paragraph Medium or Large for long-form text.

You unlocked a higher level based on your activity and orders in the past 6 months.

Enjoy your new benefits through April 1, 2026.

✕ Don't

Don't use Paragraph X Small for long form text. Use it sparingly for things like disclaimer text.

Do not use Paragraph X Small at 12 for long-form text on small devices.

The smaller size can strain the eyes. Use sparingly at a max of 3 lines for items like legal disclaimers.

Using typography to create emphasis​

Page headers/structure

Branded moments

Use the Inter Display font for large titles and heading text. Don't apply the Inter Display font to most other UI text, like labels, paragraphs, and buttons.

Premium
✓ Do

Do use the Inter Display font for large titles and heading text.

We build interfaces that work for everyone.

✕ Don't

Don't use the Inter Display font for paragraphs.

Component overrides​

Default sizes are provided to consolidate the basics of our user interface. When designing default screens, for example, in settings or lists, you should strictly follow the default sizes.

You might use large or small variances whenever you want to create higher contrast.

Favorites
■
Home
123 Main St.
■
Work
555 Market St.
Other places
■
The Bakery
222 Pan St.
■
Piccino
222 Lombard St.
✓ Do

Use default sizes for all screens that don't require customization.

Favorites
●
Home
123 Main St.
●
Work
555 Market St.
Favorites
■
The Bakery
222 Pan
■
Piccino
222 Lombard
✕ Don't

Don't reinvent the wheel and use design cycles to overly design consolidated UI.

Embedded links in a body of text​

Links embedded inside a sentence can be unfriendly to screen readers and localization. It's much better to use a link or button below a paragraph. But if you must, you should use an underline to indicate that the text is tappable.

See also Link versus button.

Avoid using text color alone because an underline is a more visible, accessible option. Links should use label weight inside paragraph weight blocks of text.

Messages sent using the Dashboard are subject to the Privacy Notice, User Generated Content Terms, and Merchant Terms & Conditions.

Using the Mono ramp​

Metrics

Use the Mono ramp when designing data-intensive views, tables, and dashboard overviews, where the monospace font has significant benefits in terms of alignment and legibility.

RegionView optionsCompletedHealthC/SEfficiency
Total for US & Canada377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%
San Francisco377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%
San Diego377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%
Los Angeles377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%
Portland377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%377.5K -2.5%
$1,234.56
✓ Do

Use Inter Mono only when displaying a number or amount in isolation. Use the regular Inter font when the value is part of a string.

+1 (555) 123-4567
✕ Don't

Do not use Mono for nominal numbers where the number is used to identify something such as a phone number or an address.

Increasing legibility

In some cases, Mono can be used where the legibility of every character is critical.

Payment code

Use this code when submitting your payment:

4400-1913-0920
✓ Do

Use Inter Mono for codes that need to be read clearly from a distance.