04 — Typography

Typography

Poppins is the Haveaspot typeface. A geometric sans-serif with warmth and clarity — it works equally well in bold headlines and fine-print captions. Used consistently across every touchpoint.

The Typeface — Poppins

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

! ? . , : ; ' " ( ) / & % £ @

Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

@fontsource (npm/yarn)

@import "@fontsource/poppins/300.css";
@import "@fontsource/poppins/400.css";
@import "@fontsource/poppins/500.css";
@import "@fontsource/poppins/600.css";
@import "@fontsource/poppins/700.css";
@import "@fontsource/poppins/800.css";

Weight Scale

Six weights. Each has a specific role — do not use weights interchangeably.

Poppins ExtraBold

800 ExtraBold H1, H2, hero headings

Poppins Bold

700 Bold H3, H4, card titles, strong emphasis

Poppins SemiBold

600 SemiBold Nav active, footer headings, category labels

Poppins Medium

500 Medium Nav links, buttons, inputs, filter chips

Poppins Regular

400 Regular Body copy, card descriptions

Poppins Light

300 Light Subtext, metadata, dates, captions

Type Scale

Sizes at mobile, tablet, and desktop breakpoints. All headings use letter-spacing: -0.02em and line-height: 1.1.

H1 · Hero

mob 2.5rem tab 3.75rem dsk 4.75rem wt 800

A Platform For Every Kind Of Venue

H2 · Section

mob 2rem tab 2.5rem dsk 3rem wt 800

Discover Community Spaces Near You

H3 · Sub-heading

mob 1.35rem tab 1.5rem dsk 1.6rem wt 700

Simple Tools for Busy Volunteers

H4 · Card Title

mob 1.1rem tab 1.2rem dsk 1.25rem wt 700

Stoke Village Hall, Somerset

Body

mob 1rem tab 1rem dsk 1rem wt 400

From village halls and community centres to sports pavilions and meeting rooms, Haveaspot connects spaces with the people who need them.

Subtext

mob 0.95rem tab 1rem dsk 1rem wt 300

Join thousands of venues already using Haveaspot to manage their bookings.

Metadata

mob 13px tab 14px dsk 14px wt 300

12 June 2025 · Guides for Venues

Typography Rules

Fixed rules that apply across every surface. These are not suggestions — deviating from them breaks visual consistency.

Line height Headings: 1.1 — Body: 1.625 — Subtext: 1.625 — Buttons: 1

Letter spacing Headings: -0.02em — All else: default

Colour All text is #021300. Never use grey for body copy or subtext.

Subtext weight Weight 300 (Light) provides visual lightness without changing colour. Never use grey as a substitute.

Tailwind warning Do not use text-gray-* utilities. They produce off-brand greys (#374151, #6B7280).

UK English All copy uses UK English spelling. Colour, not color. Behaviour, not behavior. Centre, not center.