"Correctly" vertically center text in a box


Question

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

enter image description here

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.

1
16
7/6/2016 4:06:00 PM

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:

enter image description here

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

enter image description here

As you can see, it’s pretty close (2px difference).

To summarize/conclude:

Techniques I use:

  1. Align box’s top/bottom paths to the x-height/baseline respectively (and then SHIFT arrow keys outward for visual padding.
  2. 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.
  3. Select both the box and the text, then do a “Align Vertical Centers” and “Align Horizontal Centers”.
  4. 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

enter image description here
– https://www.supremo.tv/typeterms/

BONUS!

Here’s a GIF comparing cap height, descender, ascender with all lower case with no descender/ascenders:

enter image description here

I think both versions line up pretty nicely within the box.

5
7/12/2016 11:44:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^