Typography

Typography system including fonts, scales, and usage guidelines.

Font Families

Our typography system is built on three core font families, each serving a specific purpose.

Usage Guidelines

The following guidelines apply across all applications using our design system, except our website app which uses different heading fonts and styles. See Usage Guidelines (Website only) below for details.

Body Text

We use Geist Sans for all body text and UI elements. This is the default font applied to the body element.

<p className="">Body text in Geist Sans</p>
<button className="">Button text</button>

Code

Use font-mono (Geist Mono) for code blocks, inline code, and technical content.

<code className="font-mono">const hello = "world";</code>
<pre className="font-mono">
  {`function greet() {
  return "Hello World";
}`}
</pre>

Usage Guidelines (Website only)

In the website, we use a monospaced font for the body text and a custom heading font for titles and section headings.

Body Text

We use Geist Mono for all body text and UI elements. This is the default font applied to the body element.

<p className="">Body text in Geist Mono</p>
<button className="">Button text</button>

Headings (website only)

Use font-heading for page titles and section headings. For the Xata website, we use Geist Sans for headings.

Note: font-heading is currently only available in the website app.

<h1 className="font-heading">Page Title</h1>
<h2 className="font-heading">Section Heading</h2>

Font Weights

All fonts support multiple weights for creating visual hierarchy:

FamilyWeightValueSample
Geist SansRegular400The quick brown fox jumps over the lazy dog
Medium500The quick brown fox jumps over the lazy dog
Semibold600The quick brown fox jumps over the lazy dog
Bold700The quick brown fox jumps over the lazy dog
Geist MonoRegular400const hello = "world";
Medium500const hello = "world";
Semibold600const hello = "world";
Bold700const hello = "world";

Type Scale

Consistent type sizing across all applications using Tailwind's typography scale:

text-xs

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

text-xl

The quick brown fox jumps over the lazy dog

text-2xl

The quick brown fox jumps over the lazy dog

text-3xl

The quick brown fox jumps over the lazy dog

text-4xl

The quick brown fox jumps over the lazy dog

Typography Plugin

You can use the prose class in content like blog posts, documentation, or any area with long, formatted text. However, avoid using it in UI components or forms where precise control over typography is needed.

<article className="prose dark:prose-invert">
  {/* Markdown or rich text content */}
</article>

The typography plugin automatically styles:

  • Headings (h1-h6)
  • Paragraphs and lists
  • Links
  • Code blocks
  • Blockquotes
  • Tables

Font Loading

Fonts are loaded at the application level using Next.js font optimization:

import { GeistSans } from 'geist/font/sans';
import { Geist_Mono, Unbounded } from 'next/font/google';

const geistMono = Geist_Mono({
  variable: '--font-mono',
  subsets: ['latin']
});

// Example of a custom heading font
const heading = Unbounded({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  variable: '--font-heading'
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${GeistSans.className} ${geistMono.variable} ${heading.variable}`}>
        {children}
      </body>
    </html>
  );
}

Best Practices

  1. Use semantic font classes - Prefer ``, font-mono, font-heading over direct font family declarations
  2. Maintain hierarchy - Use appropriate font sizes and weights to create clear visual hierarchy
  3. Consistent spacing - Follow the type scale for consistent sizing across the application
  4. Accessibility - Ensure sufficient contrast ratios (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
  5. Performance - Fonts are optimized and loaded automatically by Next.js
  6. Line length - Keep body text between 50-75 characters per line for optimal readability