People assume a type designer draws letters. Mostly I adjust the air on either side of them. Get the sidebearings wrong and the most beautiful a in the world will not sit next to an n.

The letters are the vocabulary. The spaces are the grammar, and readers only notice grammar when it is broken.

Every one of these was, at the time, going to change how I worked. None of them lasted a year. The pattern is not that they were bad — most were very good — but that they solved a problem I had invented in order to have something to solve.

1. The second note-taking app, bought to organise the notes from the first
2. The task manager with the excellent keyboard shortcuts and no tasks in it
3. The design tool I learned instead of finishing the design

What survived: a text editor, a notebook, and a calendar. Eleven years, no upgrades.

Justified text needs two things to look like a book instead of a ransom note: hyphenation, and a paragraph algorithm that optimises the whole block rather than one line at a time. The web had neither for twenty years, so we all learned to set ragged-right and call it a preference.

What changed

Browsers now hyphenate properly, and text-wrap: pretty will fix your orphans without you noticing. That is most of the gap closed.

What has not

Narrow columns. Justification needs room — below about 45 characters no algorithm can save you from rivers of white running down the page. On a phone, stay ragged.

The em dash is accused of being lazy — a comma that got ambitious, a colon without the commitment. I draw them for a living, and I think the accusation has it backwards.

Used well it is the only mark that carries the sound of a thought changing direction mid-flight. Used badly it is a shrug. The difference is whether you needed the interruption or just could not decide.

The specimen covers prose. This one covers the cards — the blocks the Ghost editor inserts, and how Astrix dresses them.

Callouts

Buttons

For the moment the reader is meant to act:

Toggles

For the detail most readers can skip:

Bookmarks

Images, at three widths

Galleries

If a card renders badly here, it renders badly everywhere — which is the point of keeping this page.

Kerning is the space between individual letters, and caring about it is one of the surest signs that someone has crossed from using type into setting it. The amateur adjusts the font. The professional adjusts the gaps.

Once you see bad kerning you cannot unsee it. I am sorry to have done this to you.

A good name is a tiny act of design. It sets an expectation, draws a boundary, and tells you what belongs inside and what does not. A bad name quietly corrupts everything downstream of it.

Spend the extra ten minutes. The name will outlive the code.

The redesign is the product team's version of buying a new outfit before a hard week. It feels like progress. It photographs well. It rarely touches the actual problem, which is usually not how the thing looks but what it does.

Before you redesign, try the harder thing: fix the substance and leave the surface alone. If the substance is right, the surface will need less help than you think.

This article collects every typographic element the theme sets: headings, emphasis, links, lists, quotes, code, tables and more. It doubles as a proofing page.

Headings

The post title is an H1. Inside the content, the hierarchy starts at H2 and steps down from there.

Third-level heading (H3)

Body text under an H3, with bold, italic, strikethrough, and inline emphasis in a single line.

Fourth-level heading (H4)

Another paragraph, to judge the leading and the vertical rhythm between consecutive blocks of text.

Fifth-level heading (H5)

A paragraph after an H5.

Sixth-level heading (H6)

A paragraph after an H6 — the last level of the hierarchy.

Bulleted list

• First item of the unordered list
• Second item, deliberately long so you can see how the text behaves when it wraps onto more than one line within a single entry
• Third item with a nested list:
  • Sub-item A
  • Sub-item B
• Fourth and final item

Numbered list

1. First step of the procedure
2. Second step, with nesting:
   1. Numbered sub-step one
   2. Numbered sub-step two
3. Third step

Quotes

A single-block quote, for a line worth setting apart from the paragraph around it.

And a longer, multi-paragraph quote with attribution:

Simplicity is not the absence of clutter; that is a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object.

— Jonathan Ive, on design

Code

Inline code like font-feature-settings, and a block:

.prose {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  max-width: 65ch;
}

Table

Divider

Above the rule.

Below the rule — the end of the specimen.

I keep a mental list of tools I love, and it is a suspiciously varied list: a Japanese pull saw, a plain text editor, a twenty-year-old chef's knife. They have nothing in common except that they have everything in common.

They are honest about what they do. They reward practice. And they get out of the way. That is the whole specification for a good tool, and almost nothing meets it.

I rewrote the same paragraph six times and hated it every time. Then I changed the typeface — for no good reason, just restlessness — and suddenly the sentence was fine. The words had not changed. Their clothes had.

Typography is not decoration on top of writing. It is part of the reading, and therefore part of the writing. Set your draft in something you respect, and you will write to deserve it.

The most-used software in your life is almost certainly the most boring. The light switch. The elevator button. The humble text field. None of them are trying to delight you, and that is precisely why they work.

Delight is a tax

Every animation, every clever interaction, every moment of personality is a small tax on the user's attention. Sometimes it is worth paying. Usually it is not. The interface that respects you is the one that lets you forget it exists.

The disappearing act

Good tools have a disappearing act. You think about the sentence, not the keyboard; the destination, not the steering wheel. Software should aspire to the same invisibility.

Boring is hard

Making something boring in the right way is far harder than making it flashy. It requires knowing exactly what to leave out, and the confidence to leave it out. That confidence is the whole job.