1.4Typography, colors, margins & spacing
The essentials in 30 seconds
- Typography: font, size, weight, line height — readability first.
- Spacing: margin (outer space) and padding (inner space); breathing room makes a page readable.
- Consistency: defining global colors and fonts avoids inconsistency and endless touch-ups.
Through-line — Nadia polishes the look
The content is there, but everything is cramped and the colors clash. Nadia gives the page air: more breathing room (paddings), readable typography, two brand colors. Above all, she understands it's better to set these choices globally once, rather than repeat them element by element.
Continues 1.3 — from "it works" to "it's polished".
1. Typography, colors, spacing
Typography (font, size, weight, line height, letter spacing) is set in the Style tab: priority to readability (sufficient size, comfortable line height). Colors (text, background, borders) must respect enough contrast. Spacing — margins (outer) and paddings (inner), in the Advanced tab — gives air: a cramped page tires, an airy page breathes.
Nadia increases the containers' paddings, picks a readable font, and two colors (a brand pink, a dark grey for text).
2. Consistency and global settings
Repeating the same settings on each element is a waste of time and a source of inconsistency. The good practice: define the site's global colors and fonts (in Site Settings) and reuse them everywhere. Changing the brand color is then done once, and everything updates.
It's the start of a consistent and maintainable design — we'll go deeper into global settings in level 2.
🔎 Concrete example — Giving air and harmonizing (Nadia's case)
Typography: readable font, 1.6 line height.
Colors: brand pink (#b4005a) + dark grey for text.
Spacing: 40px section padding, margins between blocks.
Global: colors/font defined in site settings.
→ Changing the brand color = 1 setting, everything updates.Result: a polished, consistent look.
Lesson: setting globally avoids endless touch-ups.
Section vocabulary
- Typography
- Font, size, weight, line height, letter spacing of a text.
Simple example: a readable font, comfortable line height for paragraphs.
What it is not: stacking 4 different fonts "for variety".
Reflex: readability first; 1 or 2 fonts are enough.
- Colors
- Color of text, background, borders, icons (Style tab).
Simple example: brand pink + readable dark grey for text.
What it is not: light text on a light background (insufficient contrast).
Reflex: check the text/background contrast.
- Margin / padding
- Margin = outer space around an element; padding = inner space (Advanced tab).
Simple example: padding in a button (air around the text), margin between two blocks.
What it is not: sticking elements together with no air.
Reflex: inner = padding; outer = margin.
- Contrast
- The brightness gap between text and background, for readability and accessibility.
Simple example: dark grey text on a white background.
What it is not: light grey on white, unreadable in sunlight or for some eyes.
Reflex: text should read effortlessly.
- Global settings (Site Settings)
- Colors and fonts defined once for the whole site and reused everywhere.
Simple example: changing the brand color updates the whole site.
What it is not: setting the color element by element.
Reflex: define globally what repeats.
In practice — Styling a page cleanly
- Choose a readable font and a comfortable line height for paragraphs.
- Define two colors (a brand one, a text one) with good contrast.
- Add air: containers' paddings, margins between blocks.
- Go to the site settings and set global colors and fonts.
Ready-to-say script — justifying restraint to the client (20 s)
"I use two colors and readable typography, with air between the elements. It's deliberate: a clean site inspires trust and reads easily, especially on mobile. And since everything is set globally, if you change your mind about the color, we adjust it everywhere in an instant."
Sell restraint as a choice of trust and readability.
Copy-paste template — quick style guide
FONT (headings): _______________
FONT (text): _______________ LINE HEIGHT: ____
BRAND COLOR: #_______ TEXT COLOR: #_______
CONTRAST CHECKED: yes / no
SECTION PADDING: ____ px MARGINS BETWEEN BLOCKS: ____ px
DEFINED GLOBALLY (Site Settings): yes / noClean showcase
2 colors, 1-2 fonts, lots of air: a pro and reassuring look.
Strong brand
Brand color on buttons and accents, neutral readable text.
Mobile
Sufficient font size and generous line height to read with a thumb.
Accessibility
Sufficient text/background contrast: readable in sunlight and for everyone.
✓ Best practices
- Limit colors and fonts, choose them consistent.
- Give air (paddings, margins).
- Define colors and fonts globally for maintainability.
✗ Common pitfalls
- Multiplying fonts and colors.
- Forgetting contrast (hard-to-read text).
- Setting each element by hand instead of globally.
Key takeaways
- Readable typography, sufficient contrast.
- Margin (outer) and padding (inner) for air.
- Few colors/fonts, but consistent.
- Global settings = consistency and one-go edits.
48h challenge — apply tomorrow
On a page, set 2 colors and 1-2 fonts in the site settings, check the text/background contrast, and give air with paddings. Then change the brand color globally and watch. 20 minutes.
- I choose readable, contrasted typography.
- I give air with margins and paddings.
- I define colors/fonts globally.
Frequently asked questions
How many colors and fonts should I use?
Few: 2 to 3 colors and 1 to 2 fonts are enough for a pro, consistent look. Overload hurts readability and trust.
What's the difference between margin and padding?
The margin is the outer space around an element; the padding, the inner space between the element's edge and its content. Both are set in the Advanced tab.
Why define colors globally?
For consistency and maintainability: defined once in the site settings, they are reused everywhere and edited in a single place.
Nadia wants to be able to change the brand color everywhere in one go if the client hesitates. What does she do?