Design system, step 2: type

Two faces and one ladder. Every size, line height and line length printed here is what the browser computed at the width you are looking at, and every token is one Automatic CSS 4.0.1 will generate from the settings at the foot of the page.

  1. 1. Colour
  2. 2. Type
  3. 3. Spacing
  4. 4. Shape
  5. 5. Buttons, links, forms
  6. 6. The written system

Two faces, and the job each one has

General Sans speaks twice on a page: the title, and the heading of each section. Everything a visitor reads, scans or presses is Switzer. No italic is loaded, so emphasis is carried by weight.

General Sans, Medium

Send us the contract before you sign it.

JobThe title of a page and the heading of each section. The quote, where it has room. Large numerals.
RationNever under 32 pixels, at any width. Never light. Never italic.
AnswersBeck Legal asked for a sans in place of the serif, tried the candidates on these pages and chose General Sans for the headings only, at Medium (09/10/2026). Switzer stays for reading.

Switzer, Regular and Semibold

Before you sign anything

If you are buying, send us the contract of sale and the vendor statement first. You get a call that tells you what is in them and what to ask the agent.

JobReading. Every heading under the section heading. Labels, controls, numbers and small print.
RationTwo weights, 400 and 600. No third weight, no capitals for emphasis, no tracked labels.
AnswersGolden rule 8: plain English on first read. Brief: accessibility and mobile first. The current site: inconsistent fonts.

One ladder, made by a base and a ratio

The framework keeps two scales, one for headings and one for text. Each is a base size and a ratio, entered once for a phone and once for a wide screen, and it works out every size between. On a wide screen both scales use the same ratio, so they land on the same rungs. A rung with a job is named. The rest exist in the build and are not used.

Headings

Text

A page, read from top to bottom

Bare headings and paragraphs with no class on them, which is how most of the site's copy arrives from the content library. The phone beside it is the same markup in a frame 360 wide. The gaps between elements are set in step 3.

At this width

On a phone, 360 wide

Two things the heading face is never asked to do

Both rules are shown here so they can be judged by eye. Two faces at one size read as a mistake rather than a choice, so General Sans stays on the two largest headings; and the title holds its weight, because a light title gives out on a phone.

Refused. General Sans at the size of a card heading

Guides to read before you sign

Kept. Switzer Semibold at the same size

Guides to read before you sign

Refused. The title in Light

Buying or selling property

Kept. The title in Medium

Buying or selling property

What goes into the dashboard

Each line is a real setting in Automatic CSS 4.0.1 and the value to enter. The global heading style is the sans, and the two largest headings carry General Sans as an override, so a heading nobody thought about lands on the safe face.

Components, 01/10/2026

The style guide as built. Every value printed is what the browser computed.

Pages

Design system