Typography
Summary
Two font families: Inter for everything, Inconsolata for code. Sizes come from Tailwind's
text-* scale, and headings, paragraphs and lists follow shadcn's class recipe.
Font family
Inter comes from the poimandres shadcn preset (b1VlIttI, font inter), applied by
npx shadcn@latest init --preset b1VlIttI. On Next.js it loads through next/font/google as
--font-sans. Headings use the same family: the preset sets --font-heading: var(--font-sans).
Inconsolata comes from the font-mono registry item, which theme depends on, so adding the
theme installs it:
pnpm dlx shadcn@latest add pmndrs/design-system/theme#v0.9.0It is scoped to code, kbd, samp, pre: those elements use it without a class, and the rest of
the UI keeps Inter. In your own app code, add the font-mono utility to any other element that
should be monospace. Blocks never do: they inherit the font of the app they land in.
The specimens below render with this site's CSS, which may not load the same fonts as your project. The table is the source of truth.
Aa Bb Cc 0123
The quick brown fox jumps over the lazy dog.
font-sansAa Bb Cc 0123
The quick brown fox jumps over the lazy dog.
font-monoType scale
Inherited from Tailwind v4 defaults, not yet a pmndrs decision. See Tailwind's font-size docs.
Each text-* utility sets a font size and its paired line height, from the --text-* and
--text-*--line-height theme variables. Pixels assume the browser's default 16px root. The
previews render with this site's CSS: its root is 17px, so they draw slightly larger than in
your project.
Override the line height with a slash: text-sm/6 is 0.875rem on a 1.5rem line.
Font weight
Inherited from Tailwind v4 defaults, not yet a pmndrs decision. See Tailwind's font-weight docs.
font-* sets font-weight from the --font-weight-* theme variable. Text is font-normal
unless a class says otherwise. Inter covers every step; Inconsolata starts at 200, so
font-thin on code renders at 200.
Elements
Inherited from shadcn, not yet a pmndrs decision. See shadcn's Typography page.
No element is styled by default: this is a recipe of utility classes to put on the elements yourself. Each preview below is followed by its classes.
h1
Ready-made building blocks
<h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
h2
Getting started
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
h3
Install the theme
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
h4
Add the dark class
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
p
Every pmndrs project gets the same colours, fonts and radii by copying code in, not by depending on a package.
<p className="leading-7 [&:not(:first-child)]:mt-6">
Lead
A design system shipped as a shadcn registry.
<p className="text-xl text-muted-foreground">
Large
<div className="text-lg font-semibold">
Small
<small className="text-sm leading-none font-medium">
Muted
Add the dark class to html for the dark scheme.
<p className="text-sm text-muted-foreground">
Blockquote
Whatever the preset or the registry fixes is a pmndrs decision.
<blockquote className="mt-6 border-l-2 pl-6 italic">
List
- Colours from the theme
- Inter from the preset
- Inconsolata from the registry
<ul className="my-6 ml-6 list-disc [&>li]:mt-2">
Inline code
npx shadcn@latest add
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">