"Correctly" vertically center text in a box
Is there a canonical rule how to vertically center text in a box? Or, in other words, how to align a box around text? I could imagine three options based on typographic metrics (see my non-exact illustration):
- Align on the middle of x-height
- Align on middle of cap height ("mean line")
- Align on middle of cap + descender height
I'm mostly a programmer, but I often have to do this, and would like to know if there is a common shared rule, or if you designers do just as you see fit. I would prefer links to graphic design books instead of personal opinions.
I really like, and agree with, the answers given so far. My answer focuses more on pragmatic technique rather than scientific or mathematical reasoning. :D
With that said, my preference is to use the baseline and x-height (see Type Terms section below) as the starting point for my boxâ€™s top and bottom lines respectively. Hopefully this GIF helps to explain:
Once I get the path to line up with the baseline or x-height, I then use SHIFT + UP or DOWN arrow keys to create visual padding (by default, in Photoshop, each increment is
10px, so in the above example, I added
40px padding on top and bottom).
In this example you can see what the align tool does if I were to take the same box/text and do an â€œAlign Vertical Centersâ€ (red text is the result of using alignment tool):
As you can see, itâ€™s pretty close (
Techniques I use:
- Align boxâ€™s top/bottom paths to the x-height/baseline respectively (and then SHIFT arrow keys outward for visual padding.
- Similarly, sometimes Iâ€™ll arrow key the text up and down until itâ€™s baseline and x-height meet the boxâ€™s bottom and top borders; from there, Iâ€™ll count the pixels and then evenly spread the remainder between the two directions as I center the text.
- Select both the box and the text, then do a â€œAlign Vertical Centersâ€ and â€œAlign Horizontal Centersâ€.
- Lastly, there are times when I eyeball the placement. Usually, I go upwards vs. downwards to avoid visual â€sagâ€ (this relates to picture framing, see Picture Framing section below); this is especially true if the font size is an odd number height and a
1pxdiff is the remainder â€¦ I will shift the text
1px(or more) upwards instead of downwards.
The most common used matting has an equal margin all the way around. On artwork with the visual center lower than actual center,. Bottom weighting, or off-sets are used frequently in matting. The bottom margin are made larger than the side and top margins. When looking at an image, the eyes tend to center higher up than the physical center of the image. By creating a larger bottom margin and off-setting the mat you draw the eye to physical center of the image. Top Center is a subset of bottom weighting where the top and side margins are equal, which creates a visually pleasing effect. This is particularly true in mats where the borders are not equal, such as an 11x14 with an 8x10 opening.
â€“ WikiPedia: Mat (picture framing)
â€¦ and here:
Mats are 'weighted' on the bottom because our eye/brain feels the pull of gravity. If a mat is the same width all around, our brain will 'register' the bottom as slightly narrower (the image is not visually centered in the mat)
â€“ WetCanvas > The Learning Center > Studio Tips and Framing > Framing Discussions Reload this Page Weighting the bottom of the mat
Hereâ€™s a GIF comparing cap height, descender, ascender with all lower case with no descender/ascenders:
I think both versions line up pretty nicely within the box.