Future Forward

Technology with personality

Geometric precision with distinctive character. Space Grotesk brings the confident irregularity that tech brands need to stand apart, while Inter handles the interface with quiet competence.

Tech-forward and confident. Space Grotesk's distinctive geometric character makes headlines pop, while Inter handles UI and body text with precision.

saas uidashboardlanding page

Typefaces Used

Primarysans

Space Grotesk

Geometric sans with distinctive character. Tech-forward yet approachable.

Released 2018

Available weights: 300, 400, 500, 600, 700

Secondarysans

Inter

The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Released 2016

Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900

Recommended Scale

Headline One

Space Grotesk · 700 · 48px · 1.1

Headline Two

Space Grotesk · 600 · 32px · 1.15

Headline Three

Space Grotesk · 500 · 22px · 1.25

Body

Body text for paragraphs and long-form content.

Inter · 400 · 16px · 1.65

Caption

Caption and metadata text

Inter · 500 · 13px · 1.5

In Context

Design Essay · 12 min read

Future Forward

Technology with personality

Geometric precision with distinctive character. Space Grotesk brings the confident irregularity that tech brands need to stand apart, while Inter handles the interface with quiet competence.

“Design is not just what it looks like. Design is how it works.”
Steve Jobs

Developer Exports

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.body-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.caption {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        spacegrotesk: [""Space Grotesk"", "sans-serif"],
        inter: [""Inter"", "sans-serif"],
      },
      fontSize: {
        "h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
        "h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
        "h3": ["22px", { lineHeight: "1.25", fontWeight: "500" }],
        "body": ["16px", { lineHeight: "1.65", fontWeight: "400" }],
        "caption": ["13px", { lineHeight: "1.5", fontWeight: "500" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Space Grotesk, 700 weight
  Used for H1–H3
  Geometric sans with distinctive character. Tech-forward yet approachable.

Body:
  Inter, 400 weight
  Used for paragraphs and UI
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Tone:
  tech, modern, bold
  Tech-forward and confident. Space Grotesk's distinctive geometric character makes headlines pop, while Inter handles UI and body text with precision.

Use this scale:
  H1 — 48px / 1.1 / -0.03em
  H2 — 32px / 1.15 / -0.02em
  H3 — 22px / 1.25
  Body — 16px / 1.65
  Caption — 13px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Space Grotesk — 700 — 48px — line-height 1.1 — letter-spacing -0.03em
H2 — Space Grotesk — 600 — 32px — line-height 1.15 — letter-spacing -0.02em
H3 — Space Grotesk — 500 — 22px — line-height 1.25
Body — Inter — 400 — 16px — line-height 1.65
Caption — Inter — 500 — 13px — line-height 1.5

Headings should feel tech and modern.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.