Typography controls
Typography is usually the first thing visitors notice — and the first thing that signals whether a site looks polished or amateurish. Site Designer exposes every major typographic property directly in the Style pane, so you can control the reading experience without writing CSS manually.
Font family
The font family control lets you choose how text is rendered. Site Designer offers two sources:
Google Fonts — Click the font family field to open the Google Fonts picker. You can search by name or browse by category (serif, sans-serif, monospace, display, handwriting). Selecting a font automatically adds the @import or <link> for that font to your project.
Custom uploaded fonts — You can upload .woff2 (recommended) or .woff files via the Resources panel. Uploaded fonts appear alongside Google Fonts in the picker.
Always define a fallback stack after your chosen font: "Your Font", system-ui, sans-serif. If the web font fails to load, the fallback ensures text is still readable.
Font size
Font size accepts any CSS length unit. The recommended approach is rem — units relative to the root font size (typically 16 px). Rem-based sizes respect the user’s browser font-size preference, which is important for accessibility.
| Unit | When to use it |
|---|---|
rem | Body text, headings — scales with user preferences |
em | Sizes relative to a component’s own font size |
px | Fixed sizes, borders, subtle details |
vw | Fluid headline sizes that scale with viewport width |
Use clamp(min, preferred, max) for fluid typography that scales without media queries. For example, clamp(1rem, 2.5vw, 1.5rem) gives you a size that scales between 16 px and 24 px.
Font weight
Font weight ranges from 100 (thin) to 900 (black) in increments of 100. The available weights depend on whether the font you chose includes variable weight support. If you set font-weight: 700 on a font that only has regular (400) and bold (700) variants, the browser snaps to the nearest available weight.
Line height
Line height controls the vertical spacing between lines of text. Use a unitless multiplier such as 1.5 or 1.7 rather than a fixed pixel value. A unitless value scales proportionally with font size — so line-height: 1.5 on a 16 px font gives 24 px of line height, and on a 24 px font gives 36 px.
- Body text:
1.6–1.8(generous spacing aids readability) - Headings:
1.1–1.3(tighter spacing looks intentional at large sizes) - Single-line UI elements (buttons, labels):
1
Letter spacing
Letter spacing (also called tracking) uses em units. A value of 0.05em adds a small amount of space between each character. Common use cases:
- Uppercase labels and captions:
0.05em–0.1emimproves readability - Normal body text:
0or very close to it - Condensed display text: small negative values (
-0.02em) can tighten things up
Text alignment
Options are left, center, right, and justify. Left-aligned text is the easiest to read for long passages. Center-align works for short headlines and UI labels. Avoid justify for narrow columns — it creates uneven word spacing that is harder to read.
Text transform
uppercase— ALL CAPS (useful for labels, not body text)lowercase— all lowercasecapitalize— Title Case on every wordnone— as written in the HTML
Prefer text-transform: uppercase over typing everything in capitals. Uppercase in the CSS is reversible; uppercase in the HTML content is permanent.
Text decoration
underline is the standard for links. line-through indicates removed or deprecated content. none removes browser-default underlines (common on navigation links, but always pair with another visual cue so links remain recognizable).
Color
The color picker accepts hex (#1a1a2e), RGB, RGBA (for transparency), and HSL values. For accessible text, maintain a minimum contrast ratio of 4.5:1 against the background for normal text and 3:1 for large text (18 px+ regular or 14 px+ bold).
