: "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

@Lee3735518

Good question!

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 (2px difference).

To summarize/conclude:

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 1px diff is the remainder … I will shift the text 1px (or more) upwards instead of downwards.


Picture framing


The most common used matting has an equal margin all the way around. On artwork with the visual center lower than actual center,.[8] 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


Type Terms


– www.supremo.tv/typeterms/
BONUS!

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.

Vote Up Vote Down

@Bryan765

Visual weight is so dynamic that it really cannot be dictated by x-height, cap height, etc...

Certain elements in your design may pull the eye in one direction over the other despite mathematically being "center", from its left to right side in comparison to the canvas, for instance.

The "visual center" is where all of the elements weights are balanced visually despite not being in the exact center.

You may want to try experimenting with this tool: javier.xyz/visual-center/

Vote Up Vote Down

@Tiffany317

Design is not always an exact science. Often what looks correct, may not be what is the true center or what is mathematically correct.

Specifically, in your question it would depend on the ascenders and descenders in the text to determine best the optical alignment. If there are no ascenders or descenders, the ideal alignment can change. In your examples, number three seems the best choice because there are both ascenders and descenders and centering them looks the most pleasing to the eye.

Vote Up Vote Down