← Back
[W] Writing

A centred headline usually isn't

Here's the headline from Ikiform. The text is centred, and it's correct by every measurement. It still looks slightly off.

The red line marks the true centre. Switch between the two and watch the letters move. Drag the slider to feel where it starts looking right.

The browser centres the whole box, and the box includes the full stop. But a full stop is tiny and has almost no visual weight. Your eye reads the letters as the line and ignores the dot, so the letters look like they're sitting to the left.

Print designers have dealt with this for centuries. They let punctuation hang outside the edge of the text.

The fix

CSS has a property for this. hanging-punctuation exists, but it's only supported in Safari, so I can't rely on it.

So I pull the full stop out of the width with a negative margin. Here's the component on Ikiform.

export function HangingLine({ text }) {
  const match = /[.,!?]$/.exec(text);
  if (!match) return text;
  return (
    <>
      {text.slice(0, -1)}
      <span className="-me-[0.27em]">{match[0]}</span>
    </>
  );
}

The dot still draws in the same place relative to the word, but it no longer takes up any room. So the browser centres the letters alone.

What the browser centres by default
Your leads wait.
What it centres with the margin
Your leads wait
The dot hangs outside the second box, so it no longer affects the centring.

Why 0.27em

It's in em so it scales with the type. If the headline gets bigger, the offset does too.

The number comes from Ikiform's font, at that weight. A different font has a different full stop, so yours will differ. Use the slider above as a way of finding it on your own: start at zero and raise it until the line stops looking off. Then check at a couple of sizes.

Where this breaks

The regex is simple on purpose, and it has two rules to work with it.

Each line has to be its own element. The fix needs to know where the line ends. So on Ikiform each line is a separate block set to white-space: nowrap. If you let the browser wrap the text, you can't tell which character will end up last.

Don't do this to body text. At reading size nobody can see the difference, and the extra markup isn't worth it. It's for big, short, centred lines, where a tiny offset is suddenly a few pixels.

Nobody will look at this headline and think, nice hanging punctuation. They just won't feel the small wrongness. That's most of what this work is.

Next