You are viewing this page as an ad destination.

Your design dictionary.

If you’re not a UI/UX designer and you found yourself starting to build products and websites with AI, it can be hard to describe exactly what you have in mind. You know what it looks like in your head, but you don’t have the vocabulary to verbalize it to your AI assistant. So we made it easier for you and put everything you need to know in a dictionary, so you can build the design of your dreams.

Typography

Typography is everything about how text looks. It carries more of a site's character than most people expect.

Vale & Co.WorkStudioJournalInquire

The face everything is set inGeist — the whole siteABCDEFGHIJKLM abcdefghijklm 0123456789One family, four weights. A typeface is a decision you make once and then live inside.

In a prompt“One typeface throughout”

Vale & Co.WorkStudioJournalInquire

SerifLittle feet on the lettersOlder, slower, and still the easiest thing to read at length. Newspapers, novels and anything that wants to feel considered.

In a prompt“Serif headlines”

Vale & Co.WorkStudioJournalInquire

Sans-serifNo feet. Plain ends.Neutral, modern and clean on screens. The default for interfaces, and for almost every site built this decade.

In a prompt“Sans-serif for everything”

Vale & Co.WorkStudioJournalInquire

MonospaceEvery character, same widthi l l u s t r a t e
M M M M M M M M MCode, prices, timetables — anything that should line up in a column.

In a prompt“Monospace for labels only”

Vale & Co.WorkStudioJournalInquire

DisplayBig. Once.Drawn to be seen at this size and nowhere else. Set a paragraph in it and it falls apart.

In a prompt“Oversized display headline”

Vale & Co.WorkStudioJournalInquire

Scriptwith love, from the workshopOne line of it, in one place. Two and it stops being a signature.

In a prompt“One handwritten note per page as an accent”

Vale & Co.WorkStudioJournalInquire

Two faces, one job eachA chair you will keepSerif for the headline, sans for everything you have to read. Two families is plenty; three is a mess.

In a prompt“Pair a serif headline with a sans-serif body”

Vale & Co.WorkStudioJournalInquire

Five steps, no more48322216 — body13 — small printFive sizes, each a clear step from the last. Not nine sizes that nearly match.

In a prompt“Clear type scale with large jumps between levels”

Vale & Co.WorkStudioJournalInquire

WeightRegular 400Medium 500Semibold 600Bold 700Weight does the same work as size, more quietly.

In a prompt“Bold headlines, regular body”

Vale & Co.WorkStudioJournalInquire

The size everything else is judged againstThe chair is built from a single plank, which is why no two are quite the same color. It takes three days: one to cut, one to join, and one to oil and leave alone. We make nine a month, and they are sold before they are finished.16–18px, 1.6 line height, 60–75 characters a line.

In a prompt“Body text 17–18px”

Vale & Co.WorkStudioJournalInquire

The paragraph that is bigger than the restA chair you will keep for thirty yearsHand-built in Rotterdam from one plank of European oak, by two people who have done nothing else since 2011.Then the body text begins, at its ordinary size, and carries on for as long as it needs to.

In a prompt“A lead paragraph under each heading”

Vale & Co.WorkStudioJournalInquire

Furniture, made slowlyA chair you will keep.The small line above the headline that says where you are before you read anything.

In a prompt“Small eyebrow labels above section headings”

Vale & Co.WorkStudioJournalInquire

KickerA chair you will keepOak, oil and three days of workThe line below the headline that adds the fact the headline could not carry.

In a prompt“Headline plus a one-line subheading”

Vale & Co.WorkStudioJournalInquire

Pull quoteWe asked how long one takes. The answer was not what we expected.“Three days, and two of them are waiting.”He said it as though everybody knew, which in Rotterdam they probably do.

In a prompt“A pull quote in each long section”

Vale & Co.WorkStudioJournalInquire

Tight — for big headlinesNormal — for everything elseLOOSE — FOR SMALL CAPSLarge type wants less space between letters. Small capitals want more.

In a prompt“Wide tracking on small capitals”

Vale & Co.WorkStudioJournalInquire

1.05 against 1.65Too tight. The lines touch and the eye loses its place halfway across the paragraph, which is exactly what you do not want.About right. There is air between the lines, so the eye can find the start of the next one without trying.

In a prompt“Comfortable line height for reading”

Vale & Co.WorkStudioJournalInquire

MeasureToo long: by the time you reach the end of this line your eye has to travel a very long way back to find the beginning of the next one, and after three or four lines of that you quietly stop reading.About right: sixty to seventy-five characters, which is roughly this wide.

In a prompt“Keep body text under 70 characters a line”

Vale & Co.WorkStudioJournalInquire

CaseSentence case reads fastestAll caps shoutsTitle Case Looks Formal

In a prompt“Sentence case headlines; no all-caps”

Vale & Co.WorkStudioJournalInquire

ItalicLeaning, for emphasisBook titles, foreign words, and the one word in a sentence that carries the weight.

In a prompt“Italics for emphasis only”

Vale & Co.WorkStudioJournalInquire

Numbers that line up£ 240.00
£ 1,180.00
£ 19.50Every digit the same width, so the decimal points stack. Prices, totals and timetables.

In a prompt“Tabular figures for prices”

Vale & Co.WorkStudioJournalInquire

Thirty yearsGUARANTEED, IN WRITINGHuge against tiny, bold against light. Contrast is what makes a page feel designed rather than typed.

In a prompt“High typographic contrast between headline and body”

FormWorkAbout

No photographs. The words do all of it.Type, space and one rule. Nothing to load, nothing to art-direct, and nothing to go out of date.Read the essay

In a prompt“Text-led hero, no image”

Vale & Co.WorkStudioJournalInquire

VariableOne file, weight 300One file, weight 500One file, weight 700Every weight in between, from a single download. Faster, and smoother to animate.

In a prompt“Variable font for smooth weight changes”