Identity

Typography

Type is the most literal expression of a brand founded by a writer. Headlines are set in a serious serif that enjoys itself, tracked tight at -3%; body copy is a quiet, legible sans that lets the words do the work; and a handwritten face carries the eyebrows, the accent words, and the titles on our notes.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!*(){}—«»

The considered question.

Research, written well.

Every form is a conversation.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!*(){}—«»

At 18px, Google Sans Flex is our long-form reading size — used for ledes, editorial standfirsts, and anywhere a paragraph deserves a little more air.

At 16px it is the workhorse: product copy, documentation, email. Comfortable, unremarkable in the best way, and legible at any hour of the night a researcher happens to be reading.

Captions and metadata — 13px, Stone, always sentence case. We never set text in all caps.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!*(){}—«»

Identity

Honest and grounded research

An eyebrow, and one accent word inside the headline

The Ferrari Problem

A customer told us that once his survey programming got about 60% faster, his QA stayed as slow as ever, so it felt like driving a Ferrari through the middle of Times Square. We think it's a lovely way to describe how relaxing one bottleneck reveals the next one.

A note — Caveat title, body font underneath. Never the reverse.

Display 1Tiempos Regular
64 / 1.04 / -3%

Display 2Tiempos Regular
48 / 1.08 / -3%

Change the question.

HeadlineTiempos Regular
32 / 1.15 / -3%

Three hundred conversations

TitleTiempos Medium
24 / 1.25 / -3%

A subtitle that earns its place

Body LargeGoogle Sans Flex
18 / 1.65

Standfirsts and ledes are set large.

BodyGoogle Sans Flex
16 / 1.6

Reading copy is never smaller than this.

CaptionGoogle Sans Flex
13 / 1.5

Metadata, timestamps, footnotes.

EyebrowCaveat Semibold
22 / 1.2

Identity

Note TitleCaveat Semibold
32 / 1.15

The Ferrari Problem

Note BodyGoogle Sans Flex
16 / 1.5

The body of a note is never handwritten.

“The best research doesn't feel like being surveyed. It feels like being listened to.”
Pull quote — Tiempos 28

Respondents finish Metaforms studies at nearly twice the industry rate. We attribute most of that to a simple editorial decision: questions are written by people who like sentences, then asked one at a time, the way a good interviewer would ask them.

Over your shoulder

A margin note behaves like a friend reading over your shoulder — brief, and slightly opinionated.

font stacks

:root {
  --mf-serif: "Tiempos Headline", Georgia, serif;
  --mf-sans: "Google Sans Flex", system-ui, sans-serif;
  --mf-hand: "Caveat", cursive;

  /* One tracking value for every heading */
  --mf-track-heading: -0.03em;
}

.display-1 { font: 400 64px/1.04 var(--mf-serif); letter-spacing: var(--mf-track-heading); }
.display-2 { font: 400 48px/1.08 var(--mf-serif); letter-spacing: var(--mf-track-heading); }
.headline  { font: 400 32px/1.15 var(--mf-serif); letter-spacing: var(--mf-track-heading); }
.title     { font: 500 24px/1.25 var(--mf-serif); letter-spacing: var(--mf-track-heading); }
.body-lg   { font: 400 18px/1.65 var(--mf-sans); }
.body      { font: 400 16px/1.6  var(--mf-sans); }
.caption   { font: 400 13px/1.5  var(--mf-sans); color: var(--mf-stone); }
.eyebrow    { font: 600 22px/1.2  var(--mf-hand); color: var(--mf-terracotta); }
.note-title { font: 600 32px/1.15 var(--mf-hand); color: var(--mf-terracotta); }
.note-body  { font: 400 16px/1.5  var(--mf-sans); }

/* Accent words inside a heading are handwritten */
h1 em, h2 em { font: inherit; font-family: var(--mf-hand); font-size: 1.12em;
               font-style: normal; letter-spacing: 0; }

Long paragraphs set in a headline serif at small sizes get muddy and self-important, like a menu describing a sandwich.

Don't set body copy in the serif — Tiempos is for 18px and up.

Every Word Capitalized Like A Press Release

Don't use Title Case for headlines. We write sentences.

SHOUTING IN LABELS

Don't set anything in all caps — labels, buttons, or headlines.

A terracotta headline

Don't color whole headlines in the accent — Terracotta points, it doesn't shout.

A whole paragraph in the handwriting face stops reading like an aside and starts reading like a greeting card, which is a different company altogether.

Don't set body copy in Caveat. Handwriting is for eyebrows, accent words, and note titles — a line at a time.

s p a c e d o u t

Don't letterspace lowercase or squeeze line-height below 1.0.