Design & Styling
Typography & fonts
Fonts are not decoration — they are the voice of your brand. The right typeface communicates character before a single word is read. This guide shows you how to think about type, and how to tell Ullbek exactly what you need.
What fonts actually do
Every font carries a personality. Before your visitor reads a headline, their brain has already registered whether the site feels trustworthy, playful, luxurious, technical, or warm — purely from the shape of the letters.
This isn't subtle. Compare the same word set in two different typefaces:
Authoritative · Established · Refined
Approachable · Friendly · Modern
Technical · Precise · Digital
Creative · Editorial · Warm
Same words. Completely different businesses. Typography is doing all of that work — silently, instantly, before any content is read.
The three jobs of type on a website
A well-designed site uses type purposefully — each level has a job to do.
| Level | Job | Example use |
|---|---|---|
| Display / Heading | Command attention. Communicate brand voice at a glance. Create hierarchy. | Hero headline, section titles, pull quotes |
| Body | Be invisible in the best way — readable, comfortable, fast to scan. | Paragraphs, descriptions, blog posts, instructions |
| Accent / Mono | Signal a different register — labels, categories, dates, code, UI. | Tags, eyebrows, button labels, timestamps |
Most sites use two fonts — one for headings, one for body. A third accent font (often monospace) is optional but powerful for sites with a technical or editorial edge.
Font categories and the character they project
Understanding the main font categories helps you speak the same language as Ullbek when requesting type choices.
Serif — tradition, authority, warmth
Serifs are the small feet and strokes at the ends of letterforms. They carry centuries of association with print, publishing, and institutions. On screen, they feel trustworthy, human, and sophisticated.
Sans-serif — clarity, modernity, confidence
Sans-serifs shed the decorative strokes for clean, geometric shapes. They read as modern, approachable, and direct — the dominant voice of tech, SaaS, and consumer apps.
Monospace — precision, code, editorial accent
Monospace fonts give every character the same width — a design choice born in typewriters and terminals. On the web they signal technical credibility, creative individuality, and systematic thinking.
Readability: the constraint that shapes everything
A beautiful font that nobody can read is a failure. Good typography lives in the tension between visual expression and legibility.
These are the factors that most affect reading comfort:
| Property | What it means | Golden rule |
|---|---|---|
| Font size | The base size of body text | Never below 16px for body; 15px minimum for captions |
| Line height | Vertical space between lines | 1.6–1.75× the font size for body paragraphs |
| Line length | Characters per line | 50–75 characters per line is the readable sweet spot |
| Contrast | Text vs. background difference | Minimum 4.5:1 ratio for body (WCAG AA) |
| Weight | Stroke thickness of the font | Body at 400–500 weight; avoid thin (100–200) for reading |
| Letter spacing | Space between characters | Slightly tightened for large headings; never tight for body |
Matching the font to the brand voice
The most useful thing you can do before choosing fonts is to write down three words that describe your brand's personality. Those three words are your brief.
| Your three words | Font direction |
|---|---|
| Bold · Playful · Energetic | Rounded or geometric sans-serif with strong weight contrast. Think: Nunito, Poppins, Outfit. |
| Refined · Luxurious · Calm | High-contrast serif with elegant proportions. Think: Playfair Display, Cormorant, Didact Gothic. |
| Technical · Precise · Trustworthy | Clean humanist sans-serif; optional monospace accent. Think: Inter, DM Sans, IBM Plex. |
| Warm · Handcrafted · Artisan | Slab serif or display serif with texture. Think: Zilla Slab, Bitter, Domine. |
| Editorial · Intellectual · Considered | Literary serif for body, strong display serif for headings. Think: Lora + Fraunces, Merriweather + Libre Baskerville. |
| Friendly · Approachable · Local | Humanist sans with open apertures. Think: Nunito, Jost, Outfit, Rubik. |
How to ask Ullbek for fonts
You don't need to know font names to get great results. Ullbek responds to personality descriptions, references, and comparisons just as well as technical specifications. Here are prompts you can copy and use directly.
Describe by personality
Use a font combination that feels editorial and warm — a display serif for headings and a clean, readable serif for body text. I want the site to feel like a well-designed magazine, not a startup app.
Reference a brand you admire
The typography should feel similar to a high-end architecture studio — refined, minimal, lots of whitespace. Probably a thin or light-weight sans-serif for headings with a slightly warmer serif for body paragraphs.
Name a specific font
Use Fraunces for all headings at weight 800 and Source Serif 4 for body text. Add IBM Plex Mono as a label/eyebrow font for categories and dates.
Preview fonts in the chat
Before you apply anything, show me three font pairing options that would suit a luxury skincare brand — preview them in the chat so I can compare and pick one.
A word on performance
Every font file is a network request. More fonts = slower load. Here are the conventions Ullbek follows to keep your site fast:
- Maximum 3 font families — usually 2 is ideal
- Subset to needed weights — load 400 and 700 only, not every weight from 100–900
display=swap— text appears immediately in a system font, then swaps when the web font loads (no invisible text)- Preconnect headers — Ullbek adds
<link rel="preconnect">for Google Fonts domains automatically
When you ask for a specific font pairing, Ullbek handles all of this for you — the right <link> tags with only the weights you need, and the correct CSS variable system so fonts apply consistently across the whole site.