Arche Design System

Foundations Type

curranleeds.com

Foundations

Type

Archivo for headlines, Work Sans for everything else. Fifteen styles, each with one job, stepped at three breakpoints.

Typefaces

Archivo sets headlines, quotes and stat numbers (Medium 500, SemiBold 600, Bold 700). Work Sans sets body copy, labels and buttons (Regular 400, Medium 500, SemiBold 600). Both are variable fonts, self-hosted as WOFF2, with no italics. Both are licensed under the SIL Open Font License.

Type styles

Each style is one CSS class, .type-<name>. The class sets font, weight, size, line height, letter spacing and case together. Sizes are written as size/line-height in pixels, and they step at fixed breakpoints, not fluidly. Resize the window to watch the samples change.

Clear systems

.type-display Archivo Bold Desktop 88/96 Tablet 64/72 Mobile 48/56

The one big-scale moment on a page.

Design for the reader first

.type-h1 Archivo Bold Desktop 56/64 Tablet 44/52 Mobile 36/44

Page title.

One style, one job

.type-h2 Archivo Bold Desktop 40/48 Tablet 32/40 Mobile 28/36

Section statements, such as Problem and Outcome.

Card or row title

.type-h3 Archivo SemiBold Desktop 24/30 Tablet 24/30 Mobile 22/28

Card and row titles.

A short label above body copy

.type-subhead Archivo Medium Desktop 18/24 Tablet 18/24 Mobile 18/24

A short label above body copy. Never the first sentence of a paragraph.

Quote text sits here, set in Archivo Medium.

.type-quote Archivo Medium Desktop 32/40 Tablet 28/36 Mobile 24/32

Pull quotes.

00

.type-stat Archivo Bold Desktop 56/60 Tablet 48/52 Mobile 40/44

Numbers in a stat strip.

A lead paragraph introduces the page in a sentence or two.

.type-lead Work Sans Regular Desktop 18/28 Tablet 18/28 Mobile 16/24

Intro paragraph under a title.

Body copy is Work Sans Regular. It is set for long reading at a comfortable line length.

.type-body Work Sans Regular Desktop 16/24 Tablet 16/24 Mobile 15/22

Running text.

Body Medium adds a little weight.

.type-body-medium Work Sans Medium Desktop 16/24 Tablet 16/24 Mobile 15/22

Body text that needs a little more weight.

Body SemiBold marks emphasis and links.

.type-body-semibold Work Sans SemiBold Desktop 16/24 Tablet 16/24 Mobile 15/22

Emphasis inside body text; links.

Small text is for captions and helper lines.

.type-small Work Sans Regular Desktop 14/20 Tablet 14/20 Mobile 14/20

Captions and helper text.

Button label

.type-button Work Sans SemiBold Desktop 16/24 Tablet 16/24 Mobile 16/24

Button and link labels.

Eyebrow label

.type-label Work Sans SemiBold, uppercase Desktop 13/16 Tablet 13/16 Mobile 12/16

Short uppercase labels and eyebrows.

Fine print is for footnotes and sources.

.type-fine-print Work Sans Regular Desktop 12/18 Tablet 12/18 Mobile 12/18

Footnotes and legal text.

Using type

Do

  • Use the class that matches the job: .type-subhead for a label, .type-small for a caption.
  • Change weight inside a style for emphasis.
  • Keep paragraphs to about 66 characters wide and use text-wrap: pretty.

Don't

  • Invent a size between two styles.
  • Use Subhead as the first sentence of a running paragraph. It is for short standalone labels.
  • Set headings in Work Sans or body copy in Archivo.

Breakpoints for the steps: mobile up to 767px, tablet 768 to 1023px, desktop 1024px and up.

Up next

Spacing and grid

The spacing values, the 12-column grid, and the three breakpoints.

Continue to Spacing and grid

Back to Color