Typography
タイポグラフィ
A wrapper that applies the type scale to plain HTML, so markdown or CMS output picks up headings, lists, quotes, code and tables without touching each tag. Built with Tailwind arbitrary variants↗↗, no plugin required.
Deploying to the edge
A short introduction that sits above the body copy and reads slightly larger.
Every push to main triggers a build. Preview deployments are created for pull requests, and the production alias only moves once the build passes.
What gets cached
- Static assets, immutable for a year
- Server responses, revalidated on demand
- Build artifacts, reused across deployments
Cache invalidation is hard, so we made it explicit.
| Region | Latency |
|---|---|
| Paris | 12 ms |
| Frankfurt | 18 ms |
Measured from a cold start, median of 100 requests.
Installation
Install the following dependencies:1
npm install clsxnpm install tailwind-mergeCopy and paste the following code into a new component file:2
How to use it3
Props
Typography
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Rich text to style, usually rendered markup you do not control |
| className | — | string Additional classes on the wrapper, use it to override the 65ch max width |
TypographyLead
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Intro paragraph, larger than body copy |
| className | — | string Additional classes on the paragraph |
TypographyLarge
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Emphasised block of text at the base size |
| className | — | string Additional classes on the block |
TypographySmall
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Small label, rendered as a small element |
| className | — | string Additional classes on the label |
TypographyMuted
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Secondary note in the muted colour |
| className | — | string Additional classes on the note |