Centring a circle and a word by their boxes looks correct in the file and loose on the page. A circle does not fill its square, so an equal gap on the round side looks wider than the same gap beside a flat letter. Next to capitals it also looks small unless it overshoots the box. Judge the gap by eye, then write the nudge down in pixels, or the next alignment will put the boxes back.
The plate sets a circle beside NORTH, a flat-sided word, not a brand. On the left the gaps are an equal 16 pixels from the square, and the round side looks open. On the right the circle moves 6 pixels toward the word and 3 pixels up, and it crosses the square. The measured gap is no longer equal. The visual weight is.
How to check it
- Squint. If the circle floats off the word, the gap came from the bounding boxes. Move the circle, then measure the shift you actually made.
- Compare the circle with the capitals, not with its square. If it looks small, let it cross the square by a pixel or two. Do not enlarge the word to compensate.
- Write the horizontal shift, the vertical shift, and the overshoot beside the file. A dragged position with no numbers will be centred back to the box.
.masthead {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
}
.masthead .disc {
width: 36px;
height: 36px;
border: 1.75px solid currentColor;
border-radius: 50%;
transform: translate(6px, -3px) scale(1.1);
}
.masthead .word {
font-size: 1.375rem;
font-weight: 600;
letter-spacing: 0.14em;
}