DEV Community 👩‍💻👨‍💻

Cover image for Going the extra mile

Posted on

Going the extra mile

Take a look at the following two circles. Which would you say is correctly centered?

Image description

The second one looks better, doesn't it? And yet, the first one is the technically correct answer.

In CSS, everything is boxes. The number "1" produces a box around it, and that box is perfectly centered.

The one on the right has been shifted, so that its stem aligns with the vertical axis:

Image description

This is known as optical alignment. It's aligned based on human perception, not based on the absolute mathematical distance between boxes.

Admittedly, this is a really small detail, and it becomes impractical if the numbers are data-driven. But it's a good example of how mathematical centering doesn't always feel right. Sometimes, we need to make small tweak so that our eyes believe that things are properly aligned.

I frequently find myself needing to make slight shifts like this. Let's look at another example. Toggle between the two options, and see which one feels better to you:

Image description

If we use the element inspector, we see that the content box includes a few pixels of dead space before the left edge of the typography:

Image description

Happily, the kerning that causes this gap does seem to be consistent across browser rendering engines, and so we can safely shift things by a few pixels for universally-improved alignment.

To be clear, I know that this is super subtle. You can achieve really sharp designs without doing this optical-alignment stuff. We're in "last 5%" territory. But it does make a difference, and for mission-critical pages (homepage, high-traffic landing pages), it can be worth spending a few minutes on these tweaks!

Top comments (0)

Take a look at this:


Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠