Styling & Design
Typography
Control how your text looks — font, size, weight, line height, letter spacing, alignment, and more — with every control explained in plain language.
Last updated 2026-06-29
Typography is the styling of text: which font it uses, how big it is, how bold, and how it's spaced. Good typography is most of what makes a site feel professional. All of these controls live in the Fonts & Typography sector of the Customize tab (in Pro mode; the most common ones are in Simple mode too).
Select a text element first, then adjust:
The main controls
Font family
The font is the style of the letters themselves. Open the font picker and search, or pick from your project's fonts. To add more options (Google Fonts or your own font files), see Adding fonts.
Stick to one or two fonts for a whole site — usually one for headings and one for body text. Your Brand Kit lets you set these once for the entire project.
Font size
How big the text is. Measured in units — most commonly pixels (px). A body paragraph is often around 16–18px; a big hero heading might be 48px or more. (More on units in Sizing & units.)
Font weight
How bold or thin the text is, on a scale from 100 (very thin) to 900 (very heavy). 400 is "normal" (regular) and 700 is "bold." Not every font supports every weight.
| Weight | Common name |
|---|---|
| 300 | Light |
| 400 | Regular / Normal |
| 500 | Medium |
| 600 | Semibold |
| 700 | Bold |
| 800–900 | Extra-bold / Black |
Color
The text color. This opens a color picker where you can choose a brand color, a preset, or type a hex code like #1a1a1a. Full details in Colors & backgrounds.
Text alignment
Whether lines sit to the left, center, or right, or are stretched to both edges (justify). Headings are often centered; body text is usually left-aligned for easy reading.
Line height
The vertical space between lines of wrapped text. Too tight and lines feel cramped; too loose and they drift apart. A comfortable body line height is around 1.5× the font size. This is one of the biggest levers for readability.
Letter spacing
The space between individual letters (also called tracking). A touch of extra spacing can make all-caps labels feel less cramped; tightening it slightly can make big headings feel sleek.
More typography options
Click More options in the sector to reveal the finer controls:
| Control | What it does |
|---|---|
| Text decoration | Adds an underline, overline, or strike-through — or removes one (handy for links). |
| Text transform | Forces text to UPPERCASE, lowercase, or Capitalized Words without retyping it. |
| Font style | Switches text to italic. |
| Text indent | Indents the first line of a paragraph. |
| Word spacing | The space between whole words. |
| White space | Controls whether text wraps or stays on one line (nowrap). |
| Word break | How long words break when they reach the edge. |
| Text overflow | Adds an "…" ellipsis when text is clipped. |
| Text shadow | A soft shadow behind the letters — see Effects & shadows. |
A quick recipe for readable text
- Body text: ~16–18px, weight 400, line height ~1.6, left-aligned, a dark-but-not-black color.
- Headings: larger and bolder (600–800), a slightly tighter line height, sometimes a hair of negative letter spacing.
- Keep line length comfortable — very wide paragraphs are hard to read; constrain the container's width.
Where to go next
- Adding fonts — get more fonts into the picker.
- Colors & backgrounds — text color and beyond.
- Brand kit & design tokens — set your fonts site-wide.