How to align text vertically according to the highest point of the text and lowest point?

Question

I want to center a text vertically such that the highest point of the text and the lowest point of text are on equal distance from the ending div that it is enclosed in.

I have the following css code:

padding-left: 30px;
font-family: 'Playfair Display', serif;
font-weight: 100;
width: 140%;
line-height: 68px;
color: #fff;
font-size: 46px;
border-style: solid;
border-color: #1faf2d;
background-color: #1faf2d;
margin-bottom: 0 !important;
margin-top: 38px;

This is what gives the colour and height etc to the font and it look like the below image.

Answer 1

This can only be done by adding padding at the bottom or Top and this may vary as per different Fonts. I question is why do you want to do this? As anigning center as per your way would further discurb the balance.

Also, The positioning of certain letters, such as "p," "g," "y," and "q," are lower than the center line is due to their design and the rules of typography. These letters have descenders, which are the parts of the letterforms that extend below the baseline.

Descenders are common in lowercase letters and serve to maintain the overall balance and legibility of the text. They allow for differentiation between similar letterforms and help to create a visually pleasing text block.

When aligning text vertically, the descenders are taken into account to ensure proper spacing and balance. By aligning the baseline of the text, which includes the descenders, it maintains the overall visual harmony of the text and prevents the descenders from interfering with the line spacing or overlapping other elements.

In the case of vertically aligning text to the highest point and lowest point, the descenders will naturally make the text appear lower as they extend below the baseline. This is considered the correct alignment for maintaining legibility and preserving the intended design of the typeface.

It's worth noting that the alignment of text can vary depending on the context and the specific design choices made by the typographer or designer. Different fonts may have slightly different alignments, and some artistic or decorative fonts may intentionally deviate from traditional alignment principles for creative purposes.