In the wild, you’ll see all sorts of HTML title separators:
- vertical bar:
| - interpunct:
· - slash:
/ - dash:
- - long dash:
— - and more…
But the vertical bar is the clear winner. Why?
It’s all about space. In Chrome on macOS, you get around 21 characters in a tab before the title gets clipped. The exact number depends on the width of the characters—21 is based on uppercase letters like “A” to “U.”
The vertical bar takes up the least space of all these separators. That means your title won’t get clipped as quickly, letting you fit more important content.
P.S. The interpunct comes a close second. At first glance, it seems to occupy the same amount of space as the vertical bar, but if you zoom in, you’ll notice it’s 1px wider.