Design & development
We build calm, fast websites that people enjoy reading
A small studio helping independent businesses publish clear, accessible and beautifully set content.
Why typography decides first impressions
Most visitors scan before they read. Clear headings, a comfortable line length and generous line spacing let them find what they need and stay for the rest. The body text below uses your settings, so you can judge how a full paragraph feels rather than a single line.
Good body type disappears: you notice the message, not the letters. When a font is too small, too tight or too light, reading turns into work, and readers leave sooner.
What we focus on
Readable
Comfortable sizes and spacing on every screen.
Fast
Only the font files a page actually needs.
Consistent
A type scale that keeps hierarchy predictable.
Small text: captions, footnotes and legal copy use the step below the base size.
Tip: click any heading or paragraph in the sample to edit its text.
Export your type system
The CSS uses custom properties and rem units, so text still respects the visitor's browser font-size setting.
Why preview on a full page
A font that looks great in a single specimen line can feel cramped in a navigation bar or too loud next to a button. The sample page combines the elements most websites share, so you can judge the whole system at once. Click any heading or paragraph in the sample to replace it with your own words.
Understanding the type scale
Instead of choosing every size separately, the preview uses a modular scale: each heading level is the base size multiplied by a ratio. A ratio of 1.25 with a 17px base produces headings of about 21, 27, 33 and 42px. Smaller ratios suit interfaces and dense content; larger ratios create dramatic editorial pages.
On small screens a full scale often makes headings too large, so the exported CSS includes a media query with a gentler ratio. The Mobile view shows exactly that version.
Using the exported CSS
The code defines custom properties such as --font-heading and --text-h1 on :root and applies them to headings and body text. Paste it near the top of your stylesheet and adjust selectors to match your theme. Sizes use rem, and the paragraph width uses the ch unit to keep lines at a comfortable length.
Read choosing readable font sizes and practical CSS typography examples for more on these techniques.