Skip to main contentSkip to sidebarSkip to headerSkip to footer

Font & Typography

Passport UI uses "Open Runde" as the default typeface, a modern sans-serif font optimized for digital interfaces.

Open Runde ↗

Attribution

Special thanks to the creators of the fonts that inspire our typography system. Open Runde is a rounded variant of the typeface Inter by Rasmus Andersson (@rsms).

Laurids Kern ↗Rasmus Andersson ↗

Font Weights

Open Runde includes four carefully selected weights for optimal hierarchy and readability.

font-normal (400)
The quick brown fox jumps over the lazy dog
font-medium (500)
The quick brown fox jumps over the lazy dog
font-semibold (600)
The quick brown fox jumps over the lazy dog
font-bold (700)
The quick brown fox jumps over the lazy dog

Typography Scale

The typography scale follows semantic heading levels with consistent spacing and hierarchy.

h1 - text-2xl font-medium
The quick brown fox jumps over the lazy dog
h2 - text-lg font-medium
The quick brown fox jumps over the lazy dog
h3 - text-base font-medium
The quick brown fox jumps over the lazy dog
h4 - text-sm font-medium
The quick brown fox jumps over the lazy dog
h5 - text-sm font-medium text-muted-foreground
The quick brown fox jumps over the lazy dog
h6 - text-xs font-semibold uppercase tracking-wide
The quick brown fox jumps over the lazy dog
body - text-sm (default)
The quick brown fox jumps over the lazy dog
small - text-xs text-muted-foreground
The quick brown fox jumps over the lazy dog

Using Custom Fonts

You can easily override the default fonts in your project using several approaches. Choose the method that best fits your project setup.

Method:

CSS Custom Properties

Override the font variables after importing passport-ui styles.

app/globals.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* In your main CSS file (e.g., app/globals.css) */
@import 'passport-ui/styles.css';
 
/* Override the default font after importing passport-ui styles */
@font-face {
  font-family: "Custom Font";
  src: url("./fonts/custom-font-regular.woff2") format("woff2"),
       url("./fonts/custom-font-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: "Custom Font";
  src: url("./fonts/custom-font-bold.woff2") format("woff2"),
       url("./fonts/custom-font-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
 
:root {
  --font-sans: "Custom Font", ui-sans-serif, system-ui, sans-serif;
}