Typography

Meet our typeface, Inter - a versatile typeface that empowers the brand to communicate with authority and grace

Inter is a variable font family carefully crafted & designed for computer screens.

Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890±!@#$%^&*()
Usage: Display
Size: 3.75rem
Weight: extrabold
Leading: 1.5
Tracking: -0.025em
Element: h1

Empowering Seamless Connections

Usage: Heading
Size: 2.25rem
Weight: bold
Leading: 2.5rem
Tracking: -0.025em
Element: h2

Empowering Seamless Connections

Usage: Title
Size: 1.5rem
Weight: semibold
Leading: 2rem
Tracking: -0.025em
Element: h3

Empowering Seamless Connections

Usage: Subtitle
Size: 1.25rem
Weight: medium
Leading: 1.75rem
Tracking: -0.025em
Element: h4

Empowering Seamless Connections

Usage: Body
Size: 1rem
Weight: normal
Leading: 1.5rem
Tracking: 0
Element: p

Empowering Seamless Connections

Usage: Link
Size: 1rem
Weight: medium
Leading: 1.5rem
Tracking: 0
Element: a
Empowering Seamless Connections
Usage: Action (button)
Size: 1rem
Weight: medium
Leading: 1.5rem
Tracking: 0
Element: h5, button
Empowering Seamless Connections
Usage: Label
Size: 0.875rem
Weight: medium
Leading: 1.25rem
Tracking: 0
Element: small
Empowering Seamless Connections
Usage: Code
Size: 0.875rem
Weight: medium
Leading: 1.25rem
Tracking: 0
Element: code
EmpoweringSeamlessConnections

When Inter isn't available, just use the system font

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

In practice - Example

The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.

The King's Plan

The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm:

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins

As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.

Jokester's Revolt

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.

And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

The People's Rebellion

The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.

King's TreasuryPeople's happiness
EmptyOverflowing
ModestSatisfied
FullEcstatic

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever after.

Inline Code:
@radix-ui/react-alert-dialog
Fraction number
1/2 3/4 5/6
Tabular (monospaced) figures
01 02 03 04 05 06 07 08 09 00
11 12 13 14 15 16 17 18 19 10
21 22 23 24 25 26 27 28 29 20
31 32 33 34 35 36 37 38 39 30
41 42 43 44 45 46 47 48 49 40
51 52 53 54 55 56 57 58 59 50
61 62 63 64 65 66 67 68 69 60
71 72 73 74 75 76 77 78 79 70
81 82 83 84 85 86 87 88 89 80
91 92 93 94 95 96 97 98 99 90
Next

Iconography