Foundations
Typography
The Inter type scale — every step, its role in the Kuoni product, and the rules that make reading feel effortless.
Type is the voice of Kuoni on screen. It should feel generous but structured — the way a well-designed travel brochure feels considered and readable even across many pages. We use a single typeface, Inter, across all product surfaces. One family. One voice. Hierarchy comes from size, weight and colour, not from competing fonts.
Typeface
Inter is an open-source humanist sans-serif designed for screen legibility at every size. Its large x-height and open apertures make it comfortable at caption sizes (12 px) and authoritative at display sizes (48 px+).
We use four weights. Only these four.
Inter Regular
400Body copy, descriptions, table cells, form help text.
Inter Medium
500Tab labels, nav items, filter labels, secondary headings.
Inter SemiBold
600Card titles, sub-headings, button labels.
Inter Bold
700Page titles, hero headlines, price numerals.
Do not use Inter 300 (Light) or Inter 800+ (ExtraBold / Black). At small sizes Light is too thin for sufficient contrast; at large sizes heavy weights feel aggressive against the warmth of the Kuoni brand.
Type scale
Ten steps cover every text situation in the product. Each step has a fixed size, weight and line-height. The step name is the semantic label — use it in design files and in code, not the pixel number.
| Step | Size | rem | Line-height | Weight | Token |
|---|---|---|---|---|---|
| Display | 48 px | 3 rem | 1.15 | 700 Bold | text-5xl font-bold |
| H1 | 36 px | 2.25 rem | 1.2 | 700 Bold | text-4xl font-bold |
| H2 | 28 px | 1.75 rem | 1.3 | 700 Bold | text-3xl font-bold |
| H3 | 22 px | 1.375 rem | 1.35 | 600 SemiBold | text-xl font-semibold |
| H4 | 18 px | 1.125 rem | 1.4 | 600 SemiBold | text-lg font-semibold |
| Body Large | 18 px | 1.125 rem | 1.65 | 400 Regular | text-lg font-regular |
| Body | 16 px | 1 rem | 1.6 | 400 Regular | text-base |
| Body Small | 14 px | 0.875 rem | 1.5 | 400 Regular | text-sm |
| Caption | 12 px | 0.75 rem | 1.4 | 400 Regular | text-xs |
| Label | 12 px | 0.75 rem | 1.2 | 600 SemiBold | text-xs font-semibold uppercase tracking-wide |
Live specimens
Each specimen below renders the text at its exact scale step. The metadata strip shows size, line-height and weight for quick reference.
Discover the Maldives
text-5xl font-boldDestination page heroes, full-bleed marketing headlines, homepage campaign banners. Never use Display inside card components — the size overwhelms surrounding content and loses the hierarchy above it.
Indian Ocean escapes from £2,450
text-4xl font-boldThe primary heading of every page. One H1 per page only. On destination pages this is the destination or region name. On offer listing pages it is the offer category headline (e.g. 'Late deals' or 'Summer 2026').
Your perfect itinerary
text-3xl font-boldSection headers that divide the page into named areas: 'Your holiday', 'What's included', 'About the hotel'. Also used for the primary section heading in the design system documentation.
Five nights in Oia, Santorini
text-xl font-semiboldThe title of an individual holiday, hotel or experience — the name of the thing inside a card or list item. On destination pages this labels each country or region in a grid. Within an article it titles a subsection.
What's included in your package
text-lg font-semiboldSub-sections within an H3 block: 'What's included', 'Flights', 'Transfer options'. Also the title of a sidebar widget (expert contact module, brochure card) or a collapsed accordion panel.
A week on the Amalfi Coast begins the moment you land. Your driver meets you at Naples and the coast road unfolds in a ribbon of lemon groves and cerulean sea.
text-lgLead paragraphs directly below a Display or H1 heading. Holiday-description introductions. Quote pullouts. Never use Body Large for utility text such as form labels or table content — its generous line-height wastes space in dense layouts.
Our Personal Travel Experts will tailor every detail — from the first hotel to the last sunset cruise. They've visited every destination we sell.
text-baseStandard body copy throughout the product. Destination descriptions, hotel details, itinerary day-by-day text, FAQ answers and all long-form content. The default text size for all page content.
Prices are per person based on two adults sharing. Local taxes of approximately £46pp are payable at the resort.
text-smSecondary content inside cards: hotel board basis, departure date, number of nights, policy notes, legal small print. Nav link labels. Form input labels. Do not use Body Small for the primary text of any card — it is too small to scan quickly in a grid.
Updated 12 Jun 2026 · 3 min read · Curated by Sara, Africa Expert
text-xsArticle bylines, timestamps, image captions, help text beneath form fields, pagination context ('Showing 1–12 of 48 offers'). The minimum readable text size — never go below 12 px.
BEST SELLER · INDIAN OCEAN
text-xs font-semibold uppercase tracking-wideDestination tags on offer cards, section category chips (SAFARI, BEACH, CITY BREAK), badge labels, table column headers, sidebar section headings in this documentation. Always uppercase and letter-spaced — never use Label styling for sentence-case body text.
Type pairings
These are the four principal text combinations used in the Kuoni product. Each pairing is shown as a live preview. Match the combination to the context; do not invent new pairings not on this list.
Discover Africa
From the wildlife-rich plains of the Serengeti to the fertile winelands of the Cape — Africa enchants in a hundred ways.
Our recommended safaris
Hand-picked by our Africa specialists and updated every season — these are the trips our experts book for themselves.
Indian Ocean · Maldives
Six nights at the Soneva Fushi
Overwater villa · Full board · 7 nights from £4,250 pp
From £2,450
per person · 7 nights · Full board · September 2026
Kuoni-specific scale guidance
The type scale works for any product but these are the Kuoni-specific rules for how each step maps to a travel-product context.
Destination names
Always use Display (48 px) for a single destination name in a full-width hero — "The Maldives", "Tuscany", "Kenya". The word or phrase should be short enough to fit on one line at this size. If the destination name is long (e.g. "Sri Lanka & the Maldives"), drop to H1 (36 px) rather than letting Display wrap to two lines.
Section headers
Use H2 (28 px) for every named section of a page: "Suggested itineraries", "Where to stay", "Getting there". H2 should never appear inside a card — that is H3 territory. If a page has more than four H2 sections, the page is too long and should be split.
Price display
The "from" price is the most important number on a holiday card or detail page. Use H1 (36 px Bold) for the lead price. The context line — "per person · 7 nights · Full board" — uses Caption (12 px Regular). Never use Body or Body Small for the context line; Caption's restraint keeps the eye on the price.
Meta information
Dates, author bylines, image credits, timestamps and policy footnotes all use
Caption (12 px Regular) in Mid Grey (#767676). This is the floor — no
text in the product should be smaller than 12 px or lighter than Mid Grey.
Destination tags and badge labels
Use Label (12 px SemiBold, uppercase, letter-spaced) for the region and category chips on offer cards ("INDIAN OCEAN", "SAFARI", "5 STARS"). Labels are always uppercase to visually separate metadata from editorial copy.
Usage
Use Display for the page hero headline and step down to H3 for individual card titles within the page.
Display on hero, H3 inside card — clear hierarchy.
Use Display or H1 as the title of a card or list item.
Display inside a card overwhelms everything around it.
Place exactly one H1 on each page and reserve Display for single-destination heroes.
One H1 per page, one Display per hero.
Use H1 for both the page title and a featured card title on the same page.
Two H1s split the page hierarchy.
Use Caption for all small metadata — dates, policy notes, image credits.
Caption (12 px) is the minimum for any readable text.
Set any interface text below 12 px, even for decorative purposes.
Text below 12 px is unreadable on most screens.
Use Bold (700) only for Display through H2 and for the lead price on cards.
Bold weight reserved for headings and price numerals.
Set long-form body copy at Bold weight.
Bold body copy creates aggressive, hard-to-read paragraphs.