i

Tools · typography

Type explorer

Choose a heading face, a body face and a Chinese face, set a scale, and try them on your own words. Every size is labelled with its codes, and the line length is measured as you go.

Click any line of the specimen to type your own words.

The scale

Each step is the one below multiplied by the ratio. Sizes in px for the screen and rem for the code — 1 rem is the body size a reader's browser starts at, usually 16 px.

The codes

Paste this into a stylesheet, or just read it: every line is a size, a typeface or a spacing.

 
 
The letters themselves
 
 
Reading the codes
 
 
Size · 16px, 1.25rem, 12pt
px are screen pixels;
rem is a multiple of the reader's chosen body size, so a page in rem grows when someone asks for bigger text; pt is the
      print unit, 1/72 of an inch — 12 pt on paper is about 16 px on a screen.
 
Weight · 400, 600, 700
Boldness as a number, in
      hundreds: 400 is regular, 500 medium, 600 semibold, 700 bold, 900 black. A typeface only has the weights its designer drew;
      ask for one it lacks and the browser fakes it.
 
Line height · 1.5
The distance from one line to the next, as a multiple of the
      text size: 1.5 on 16 px text is 24 px. No unit on purpose — it then scales with the text. Long lines want more; headings want less.
 
Typeface · "Inter", system-ui, sans-serif
A list, tried in order: the
      typeface you chose, then whatever the device has that is similar, then any sans-serif at all. The last word is the safety net.
 
Line length · max-width: 68ch
ch is the width of a zero in that
      typeface, so 68 ch is about 68 characters. Between 45 and 75 is comfortable for reading in English; Chinese lines are shorter in
      characters because every character is wider.
 
Scale · 1.25
The ratio between one size and the next. Small ratios (1.125)
      suit dense interfaces; large ones (1.5, 1.618) suit posters and landing pages. Pick one, and every size comes from it.