Bold: a study of weight, scale and typographic force

A study of weight, scale and typographic force

Bold is not a weight.

Weight is the most literal measure: how thick a stroke is relative to the letter it belongs to. But a light word can command a page, and a black one can vanish in a crowd. Boldness is relative. It depends on what surrounds a letter, how much of the page it claims, and what it is set against.

  1. i It can be scale.

    Size is weight seen from across the room. Past a certain point a word stops being read and starts being looked at.

  2. ii It can be density.

    Take out the leading and the lines begin to touch. The block darkens as a whole, and the eye reads it as one mass before it reads a single word.

    Densityis whathappenswhen theleadingdisappears

  3. iii It can be position.

    A word pressed against the edge of the page carries a tension the same word never has in the centre.

  4. iv It can be contrast.

    Heavy only reads as heavy next to something light. Remove the hairline and the black word loses half its force.

  5. v It can be silence.

    A full stop in an empty field. Nothing else on the page competes with it, so it is the loudest thing here.

01 Weight

  1. Thin100
  2. Light300
  3. Regular400
  4. Medium500
  5. Semibold600
  6. Bold700
  7. Extrabold800
  8. Black900

Weight
changes
voice.

Weight is the ratio of stroke to letter. The names Thin, Light, Regular, Bold and Black come from metal type, when every weight was a separate font cut by hand. CSS turned them into numbered steps from 100 to 900. A variable font removes the steps: every value in between exists, and the sheet above passed through all of them.

02 Width

  1. Narrow.wdth 62Condensed: tall, urgent, economical with the line.
  2. Width.wdth 100The proportions the letters were drawn at.
  3. Pressure.wdth 125Expanded: slow, stable, monumental, and out of room.

Condensed letters fit more vertical strokes into the same measure, so the line ticks faster. Expanded letters space the strokes out and the same sentence slows down. Below, each line fills the same width; only the axis changes.

  • wdth 62Width changes rhythm
  • wdth 100Width changes rhythm
  • wdth 125Width changes rhythm

03 Scale: the anatomy of a letter

03.1Cap height
The flat top of the stem, 688 units above the baseline. At this scale the letter is a cliff edge.
03.2Stem
The main vertical stroke. At weight 900 it is 221 units wide, more than a quarter of the whole letter.
03.3Counter
The enclosed white space. Weight is gained from the inside: here the upper counter has closed to a slot 117 units tall.
03.4Waist
Where the upper and lower bowls meet the stem. Everything above this point is slightly smaller than everything below it.
03.5Bowl
A curved stroke that encloses a counter. The lower bowl reaches 738 units, the upper only 722: the extra width keeps the letter from looking top-heavy.
03.6Baseline
The line every letter stands on. Round letters dip slightly below it to look level; a flat-bottomed B sits exactly on it.

A letter
can become
architecture.

04 Black: at some point type becomes a surface

Blackness is a typographicmaterial. Ink has mass andtype has colour. Light typeis grey on the page; heavytype closes its countersand fills the space betweenlines until the text stopsreading as lines and startsreading as a tone. Keep onadding weight and the pageitself begins to disappear.

At some pointtype becomesa surface.

05 Contrast

Loud

whisper

delicate

Heavy

Fast

slow

Every pair above is the same idea twice. A black grotesk next to a hairline italic looks heavier than it would alone, and the italic looks lighter. Contrast doesn’t add weight. It makes the weight visible.

Bodoni Moda wght 900 opsz 96

Contrast also lives inside a single letter. A Didone sets hairlines against heavy vertical stems. Its optical-size axis tunes that contrast to the size of the type: at small sizes the hairlines thicken so they survive, at display sizes they can be cut almost to nothing.

06 Space: tracking, kerning and optical spacing

Tracking
Space added or removed evenly across a whole word or line. Display type usually wants less than the default: at large sizes, standard spacing looks loose.
Open
Wide tracking turns a word into separate objects. Reading slows down and each letter gets room to be looked at.
Fused
Past a certain point, negative tracking stops tightening the word and starts merging it. Four letters become one mark.

AV To LT Ty

Kerning adjusts the space between specific pairs. Without it, the diagonal of a V or the arm of a T leaves a hole in the word. Toggle it: the letters are the same, only the pairs move.

Optical spacing. A round letter touches the space around it at a single point, so it is set closer to its neighbours than a straight one. Spacing that is mathematically equal looks uneven. Spacing that looks even is not equal.

07 Line: one sentence, three compositions

  1. Three lines. Three beats, three equal orders.
  2. One line. A sentence, read at an even pace. Nothing is louder than anything else.
  3. Two lines. The break isolates MAKE and drops all the weight onto IT BIG.

this is still bold.

Two hundred
years of
shouting.

c. 1810

Fat face

In early-19th-century London, founders such as Robert Thorne pushed the thick strokes of the modern roman until the counters nearly closed. The fat face was made for posters and handbills: to be seen first and read second.

1816

Sans serif

William Caslon IV’s specimen of 1816 shows a typeface without serifs, in capitals only, under the name Two Lines English Egyptian. It is the earliest known printed sans serif. Within a few decades heavy grotesques had become a standard voice of commercial printing.

19th century

Wood type

Letters too large to cast in metal were cut from end-grain wood. Printers stacked condensed capitals of every size, line by line, until the poster was full from edge to edge.

1920s

Constructivism

In the Soviet avant-garde, Alexander Rodchenko and El Lissitzky built pages from heavy sans-serif letters, red and black ink and diagonal axes. Type stopped decorating the page and started holding it up.

1925–1928

New typography

At the Bauhaus, Herbert Bayer drew a single-case universal alphabet in 1925. Jan Tschichold’s Die neue Typographie (1928) argued for asymmetric layouts, sans serifs and function over ornament.

1957

Swiss style

Helvetica and Univers were both released in 1957. Adrian Frutiger planned Univers as a system rather than a list of names: the first digit gives the weight, the second the width. 55 is the regular, 75 the black, 57 the condensed. Weight and width became coordinates.

1977

Punk

Punk fanzines were set with scissors and a photocopier. Jamie Reid’s ransom-note lettering for the Sex Pistols cut words out of newspapers and pasted them back together. Boldness as collision.

2016

Variable

OpenType Font Variations, announced in 2016, put continuous axes of weight, width, optical size and more into a single font file. Bold stopped being a separate font and became a position on a line.

09 Image: type as image

Four letters. Every form on this screen was type.

Motion is a
typographic
property.

On screen, type also has momentum. Film title designers such as Saul Bass made letters move with intent in the 1950s. Here the input is the speed of your scroll: try it fast, then slow.

Set your own.

Type into the specimen. Every axis below is the font’s own.

Face
Presets
CSS
font-family: "Archivo";
font-variation-settings: "wght" 900, "wdth" 100;
letter-spacing: -0.020em;
line-height: 0.86;
text-transform: uppercase;