Typography.

Two faces. Switzer sets everything that is read; IBM Plex Mono sets everything that annotates it. Both are self-hosted, and neither is ever loaded from a CDN.

Switzer

By Indian Type Foundry

Everything read as prose: display lines, headings, body and buttons.

  • Go to manufacturing.400
  • Go to manufacturing.500
  • Go to manufacturing.600
  • Go to manufacturing.700

IBM Plex Mono

By IBM

Annotation: labels, eyebrows, dimensions, data and the zone marks on the sheet's edge.

  • Ø12.00 ±0.05400
  • Ø12.00 ±0.05500
  • Ø12.00 ±0.05600

Scale.

Six steps, and a page uses as few of them as it can. Each sample below is set with the classes beside it.

  • Display

    44px · 600 · −0.025em

    The drawing, read for intent.

    text-[44px] font-semibold tracking-[-0.025em] leading-[1.1]

  • Heading

    28px · 600 · −0.015em

    Carry intent into production.

    text-[28px] font-semibold tracking-[-0.015em] leading-tight

  • Subheading

    20px · 600

    Clear space around the logo.

    text-xl font-semibold

  • Body

    16px · 400 · 1.625

    A drawing Drafter produces is handed to a machinist who cuts metal to it and an inspector who measures against it.

    text-base leading-relaxed text-graphite

  • Small

    14px · 400

    The link keeps every number you changed.

    text-sm text-graphite

  • Annotation

    11px · Plex Mono · uppercase · 0.18em

    Drawing hours a year

    font-annot text-[11px] uppercase tracking-[0.18em] text-graphite

Rules.

  • Headings are sentence case and end with a period, the way a note on a drawing does.
  • Mono uppercase is for annotation only. It labels; it never carries a sentence.
  • No em-dashes, anywhere. A comma, a colon or parentheses does the job.
  • Numbers that line up use tabular figures, so a column of values reads as a column.

Go to manufacturing.

Book a demoOpen the Toolbox