Typography
A fluid type scale that grows from phone to desktop without breakpoints, and a curated set of free Google Fonts. Fonts come from the active preset.
Type scale
Headings use the preset's display font; text uses its sans. Sizes with clamp() scale smoothly with the viewport.
Quiet design, loud results
Every app, one source
Tokens over magic numbers
Start with a preset
Then make it yours
A lead paragraph introduces a page and sets its tone in a sentence or two.
Body text is set for long reading: 16px with a generous 1.6 line height and balanced measure.
Small text labels controls and carries secondary details.
Captions sit under images and inputs.
Section eyebrow
const preset = "wallflower";
<h1 class="wf-text-h1">Title</h1> <!-- class -->
font: var(--wf-text-h1); /* CSS shorthand */
letter-spacing: var(--wf-text-h1-tracking);
<h1 class="font-display"> <!-- Tailwind: font-sans · font-display · font-serif · font-mono -->Font catalog
All free on Google Fonts. Presets choose one for each role (sans, display, serif, mono); you can swap any of them by overriding --wf-font-*.
sans
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Neutral workhorse for product UI.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Clean geometric-grotesk built for interfaces.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Friendly low-contrast geometric.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Modern, open and technical.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Round geometric with warmth.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Polished startup sans.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Sharp, slightly condensed neo-grotesk.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Quirky grotesk with mono roots.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Friendly geometric, great at small sizes.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Crisp modern grotesk with open shapes.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Quiet, refined grotesk for premium UIs.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Neutral government-grade workhorse.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Engineered, slightly technical.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Wide and highly readable.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Rounded terminals; soft and playful.
display
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Characterful display grotesque for headlines.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Wide techy display face.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Art-school display face that widens as it gets bolder.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Wide, bubbly, attention-grabbing.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Grotesk with a huge width range, from condensed to expanded.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Round, chunky and friendly.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Quirky Scandinavian grotesk.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Pixel terminal type. Use large.
serif
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Soft "wonky" old-style serif with optical sizes.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Condensed editorial serif for big headlines.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Readable text serif for long-form.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
High-contrast didone for luxury headlines.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Tight, punchy display serif.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Elegant classical serif.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Chunky, warm old-style serif.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Sharp high-contrast serif for statements.
mono
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Developer mono with tall x-height.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Companion mono to Geist.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Retro-futurist fixed width.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Classic engineered mono.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Mono with programming ligatures.
Aa Gg 0123
The quick brown fox jumps over the lazy dog.
Soft, low-contrast mono.
Loading fonts
The preset only names fonts; your app loads them. Use your framework's font loader for self-hosting and no layout shift.
import { Inter, Bricolage_Grotesque, JetBrains_Mono } from "next/font/google";
const sans = Inter({ subsets: ["latin"], variable: "--font-wf-sans" });
const display = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-wf-display" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-wf-mono" });
export default function RootLayout({ children }) {
return (
<html lang="en" data-preset="wallflower"
className={`${sans.variable} ${display.variable} ${mono.variable}`}>
<body>{children}</body>
</html>
);
}
/* globals.css: point Wallflower at the self-hosted files */
:root {
--wf-font-sans: var(--font-wf-sans), ui-sans-serif, system-ui, sans-serif;
--wf-font-display: var(--font-wf-display), ui-sans-serif, sans-serif;
--wf-font-mono: var(--font-wf-mono), ui-monospace, monospace;
}import { defineConfig, fontProviders } from "astro/config";
export default defineConfig({
fonts: [
{ provider: fontProviders.google(), name: "Inter", cssVariable: "--font-wf-sans" },
{ provider: fontProviders.google(), name: "Bricolage Grotesque", cssVariable: "--font-wf-display" },
],
});
---
// Layout.astro
import { Font } from "astro:assets";
---
<head>
<Font cssVariable="--font-wf-sans" preload />
<Font cssVariable="--font-wf-display" />
</head>
/* Then point --wf-font-* at them, same as Next.js. */
/* Or skip all that: each preset in ds/tokens/presets.json
has a ready-made googleFontsUrl for a <link> tag. */