Typography & Branding
BlnkSpace has a unified design token system — one place to set your document's font, colors, and spacing, with those choices automatically applied to the editor body, navbar, and footer simultaneously. Branding presets let you apply a complete visual identity in a single click, and the full Google Fonts library gives you 120+ typefaces to choose from.
How it works
Every document has a set of design tokens — background color, text color, accent color, font family, font size, line height, and letter spacing. These are stored on the document itself and applied in three places simultaneously:
- Editor body — the font and colors cascade into all block content via the root container style.
- Navbar — the navbar block receives a patch of the relevant color and font values when you apply a preset or change a token.
- Footer — same as navbar. The footer's background and text colors are set independently but inherit from the preset.
Where to find these controls
All design controls live in the right-hand panel. Open it by clicking the Layout icon in the rail (the grid/template icon). The panel has three tabs:
The Colors button and Typography picker in the top toolbar control the document body independently. Changes there clear the active preset and put the document in custom mode.
Design tokens
These are the seven properties that define a document's visual identity. Every preset specifies all seven for the body, plus a separate set for the navbar and footer patches.
#ffffff#111111#2563ebinternormalnormalnormalBranding presets
A preset is a named bundle of all seven body tokens plus separate navbar and footer patches. Applying one updates every surface simultaneously — you never need to manually match your navbar colors to your page background.
The four swatches on each tile represent — left to right — background, text, accent, and footer background. The wider left swatch is the page background.
Applying a preset
Custom presets
You can save any combination of colors and typography as a named preset that persists across all your documents. Custom presets appear in the "Your presets" section above the built-in grid.
Layout panel → Branding tab. Click Create next to "Your presets".
Give it a name. Set page background, text, and accent colors. Choose a font family and size. Optionally set different colors for the navbar and footer backgrounds. All fields are seeded from the document's current state so you can start from what you already have.
Click Save preset. The preset is saved to your account and applied to the document immediately.
Typography
The Typography picker in the top toolbar controls four properties independently of the branding preset: font family, font size, line height, and letter spacing. Changes here enter custom mode.
Google Fonts library
BlnkSpace includes the full Google Fonts catalogue with 120+ curated typefaces across five categories. Fonts are loaded on demand — only the active font and any fonts used in your navbar/footer are fetched. Fonts load lazily in the picker as you scroll, so browsing is fast even on slow connections.
Sans-serif
Clean, modern, highly legible. Best for general content, SaaS, and marketing pages.
Serif
Authoritative and editorial. Best for blogs, editorial sites, and brand-forward pages.
Display
High personality. Best for hero sections, landing pages, and brand statements.
Monospace
Technical and precise. Best for developer tools, documentation, and terminal aesthetics.
Handwriting
Personal and expressive. Best for creative portfolios, event pages, and casual sites.
Font size scale
Named size keys map to fixed pixel values. You can also type a custom value (e.g. 17px) directly in the custom field.
| Key | Value | Usage |
|---|---|---|
| xs | 12px | Fine print, captions, metadata |
| small | 14px | Secondary content, sidebar text |
| normal | 16px | Standard body text — default |
| large | 18px | Comfortable reading for long-form content |
| xl | 20px | Feature pages, editorial layouts |
| 2xl | 24px | Statement paragraphs |
| 3xl–7xl | 30–72px | Display / hero body text only |
Line height
| Key | Value | When to use |
|---|---|---|
| compact | 1.4 | Headings, display text, tight layouts |
| normal | 1.6 | Default body text |
| relaxed | 1.8 | Long-form reading, serif body text |
| loose | 2.0 | Airy layouts, poetry, sparse content |
Letter spacing
| Key | Value | When to use |
|---|---|---|
| tight | -0.02em | Display type, large headlines |
| normal | 0 | Default — suits most body text |
| wide | 0.02em | Small caps, monospace, UI labels |
| wider | 0.05em | All-caps headings, subtle tracking |
Colors
The Colors button in the toolbar opens a unified color picker with three sections: page background, text color, and accent color. All three update live without a page reload.
How fonts load
Google Fonts are loaded at two points in the application:
- In the editor — a
FontLoadercomponent mounts in the editor shell and injects<link>tags into<head>for the active body font and any separate navbar/footer fonts. Font tags are deduplicated so shared fonts only load once. - On published pages — font tags are rendered server-side in the page HTML, so fonts start loading immediately as the browser parses the response. No JavaScript required on the published page.
Only the fonts actually used on the page are fetched. If your document uses Inter (a system font), no Google Fonts request is made at all.
Navbar and footer typography
The navbar and footer each have their own typography section in the Layout panel with independent font family, weight, and size controls. These are separate from the document body font — it's common to use a heavier weight or tighter tracking for navigation elements.
When you apply a branding preset, the navbar and footer fonts are patched with a curated combination that complements the body font — typically the same family at a slightly heavier weight. You can override these independently afterwards without detaching the preset.
'Playfair Display', serif). When set via a branding preset this is handled automatically.