Section 04 · Text

Type is most
of a website.

Before a single photograph loads, the words are already doing the selling, and how they are set decides whether you read as a boutique or a bargain. Twelve treatments below, each shown in place on a real page rather than as a specimen. Choose the typeface in the Fonts section and everything here re-sets in it.

12Treatments
12Typefaces to pick
0License fees
100%Yours to keep
Press play, cycle a style, or hover the type. Each panel says which
01

Editorial pairing

Foundation
Law & advisory

We take on very few matters.

Nine partners. One office. Work that rarely gets talked about.

Make an enquiry
Est. 1998Los Angeles
Editorial serif

The same page, set three different ways: editorial serif, modern sans and classic caps. This is the decision that matters most on a website and the one that usually gets made last.

Right forEveryone. Press the button, tell us which of the three sounds like your business, and the rest of the site follows from it.

02

Kinetic headline

Motion
Salon & grooming

Booked by name

Book now
Tue to SatWalk-ins welcome
Start

Letters rise and settle one after another. Reserve it for the single biggest line on the site. It draws the eye exactly once, and stops working the moment you repeat it.

Right forOne headline, on the home page. Launches, venues, anything with a sense of occasion.

03

Gold foil

Luxury
Property & development

Meridian

Register interest
Palm SpringsScroll
Start

A gold gradient with a highlight travelling across it, so the wordmark reads as pressed foil rather than yellow text. Costs nothing and looks like a print finish.

Right forAnything sold on material quality. Jewellers, spirits, developments, private clubs, tailoring.

04

Outline to fill

Hover
Clinic & wellness

Open 7am01 / 06
ConsultsTreatmentsAftercare
Or hover the type itself

Hollow letters that fill with color on hover. Makes a large navigation read like a poster. Best with three to five items, never with a full menu.

Right forSites with few pages and a lot of confidence. Clinics, restaurants, studios, hotels.

05

Line mask

Editorial
Selected work

We make roomsthat hold their nerve.

Nine projects since 2009. We would rather show you three of them properly.

Open the archive
Project 04Interiors
Start

Each line slides up from behind a hidden edge, like type being set by hand. The quietest premium reveal on this page, and the easiest to overuse.

Right forAnywhere restraint is the message. Architecture, law, finance, art, medicine.

06

Emphasis

Craft
Dinner from six

Twenty seats, and one seating a night.

A menu that changes when the market does, and a room that never turns over twice.

Book a table
Est. 2019Reservations
Gold italic

Three ways to lean on one phrase: gold italic, gold roman, or a drawn underline. Pick one and use it everywhere. Mixing all three is the fastest way to look amateur.

Right forEvery site. It is the smallest decision on this page and the one clients notice most.

07

Photograph inside type

Showpiece
Design studio

Vessel

Start a project
Est. 2009Los Angeles
Start

Your photography fills the letterforms and drifts slowly inside them. Needs a short name and a heavy weight, because thin type shows too little of the picture to read as one.

Right forNames of one or two words. Studios, developments, fashion, spirits, festivals.

08

Ticker

Band
Salon & grooming

Booked by name,
not by algorithm.

Book now
Tue to SatWalk-ins welcome
Cut · Color · Barbering · Bridal · Cut · Color · Barbering · Bridal ·
Runs on its own, no scroll needed

A slow band of type crossing the page under the hero. Fills the awkward gap between two sections and gives a still page a pulse. One per site, never two.

Right forAnywhere you have a list of services worth repeating. Salons, garages, agencies, retail, trades.

09

Weight wave

Pointer
Design studio

Quiet buildings

A studio of nine, working on very few projects at a time.

See selected work
Est. 2009Los Angeles
Move your cursor across the headline

A variable font lets every letter sit at any weight, so a wave of boldness follows the cursor across the headline. One font file, infinite weights, and it loads faster than shipping three separate cuts. This panel always shows a variable face, because not every typeface is one.

Right forBrands that can be a little bit clever about type. Studios, technology, editorial, education.

10

Highlight sweep

Emphasis
Private dining

The room is yours for the whole evening, not a two-hour window.

Enquire
Up to 40Seven days
Start

A highlighter stroke grows behind the phrase you most want remembered. Cheap, obvious, and it works on absolutely every kind of business.

Right forAnywhere you have one sentence that closes the sale.

11

Drawn wordmark

Signature
Meridian Meridian
Start

The wordmark draws itself in outline, then fills solid. The best possible use of a logo animation: three seconds, no video file, and it still works printed on a business card.

Right forAny business with a typographic logo. Especially good on a loading screen.

12

Section marker

Detail

Everything we do,
and nothing we don't.

Four practice areas. We will tell you honestly if you need somebody else.

See our services
Est. 199802 / 06
Our services
02 / 06
Start

A rotated micro-label and a hairline drawing down the margin. Nobody consciously notices it, and it is most of the difference between a template and a designed page.

Right forEvery long page. This is the detail that makes the rest of the work look intentional.

Section 05FontsSection 01OpeningsSection 02Scroll animationsBack toOverview