Trending|sans + serif
elegantmoderneditorialminimal

Jost + Instrument Serif

Geometric Poetry

Bauhaus philosophy meets modern editorial

Jost channels the spirit of Futura with contemporary refinement. Instrument Serif adds the editorial credibility that pure geometry can lack. Functional idealism with emotional depth.

Futura-inspired geometry meets contemporary editorial. Jost's refined sans paired with Instrument Serif's trending elegance.

brandingportfoliolanding page

Typefaces Used

Primarysans

Jost

Geometric sans inspired by Futura. Elegant and refined with optical sizing.

Designed by Owen Earl

Released 2020

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

Secondaryserif

Instrument Serif

Contemporary editorial serif with distinctive italic. Currently trending in design.

Designed by Rodrigo Fuenzalida

Released 2022

Available weights: 400

Recommended Scale

H1

Headline One

Jost · 600 · 52px · 1

H2

Headline Two

Jost · 500 · 34px · 1.1

H3

Headline Three

Instrument Serif · 400 · 28px · 1.2

Body

Body text for paragraphs and long-form content.

Jost · 400 · 16px · 1.7

Caption

Caption and metadata text

Jost · 400 · 13px · 1.5

In Context

Design Essay · 12 min read

Geometric Poetry

Bauhaus philosophy meets modern editorial

Jost channels the spirit of Futura with contemporary refinement. Instrument Serif adds the editorial credibility that pure geometry can lack. Functional idealism with emotional depth.

Design is not a thing you do. It's a way you live.

Alan Fletcher

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=Jost:wght@400;500;600&family=Instrument+Serif:wght@400&display=swap" rel="stylesheet">
CSS
h1 {
  font-family: "Jost", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

h2 {
  font-family: "Jost", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

h3 {
  font-family: "Instrument Serif", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

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

.caption {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
Tailwind Config
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        jost: [""Jost"", "sans-serif"],
        instrumentserif: [""Instrument Serif"", "serif"],
      },
      fontSize: {
        "h1": ["52px", { lineHeight: "1", fontWeight: "600" }],
        "h2": ["34px", { lineHeight: "1.1", fontWeight: "500" }],
        "h3": ["28px", { lineHeight: "1.2", fontWeight: "400" }],
        "body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
        "caption": ["13px", { lineHeight: "1.5", fontWeight: "400" }],
      },
    },
  },
};

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:
  Jost, 600 weight
  Used for H1–H3
  Geometric sans inspired by Futura. Elegant and refined with optical sizing.

Body:
  Jost, 400 weight
  Used for paragraphs and UI
  Geometric sans inspired by Futura. Elegant and refined with optical sizing.

Tone:
  elegant, modern, editorial
  Futura-inspired geometry meets contemporary editorial. Jost's refined sans paired with Instrument Serif's trending elegance.

Use this scale:
  H1 — 52px / 1 / -0.01em
  H2 — 34px / 1.1
  H3 — 28px / 1.2
  Body — 16px / 1.7
  Caption — 13px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Jost — 600 — 52px — line-height 1 — letter-spacing -0.01em
H2 — Jost — 500 — 34px — line-height 1.1
H3 — Instrument Serif — 400 — 28px — line-height 1.2
Body — Jost — 400 — 16px — line-height 1.7
Caption — Jost — 400 — 13px — line-height 1.5

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

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.