why do my titles always have extra space below the letters?

Question

This is something I have always wondered. For some reason this happens a lot, and I don't know why. I usually just end up giving the element a height and a line height in order to center the text inside of its little box.

This is the code I have:

<h3 class="hr_title">Things to know before</h3>

Then this is the css for it.

.hr_title{
   background-color: navy;
   color: white;
   font-family:proxima-nova, sans-serif;
   font-weight: 100;
}

Below is a photo of how it looks.

Forgot to mention. This happens even if I add text-transform:uppercase or if they are all capital letters.

Answer 1

It's for letters that have descenders such as g or j. Even if you aren't using letters with descenders (such as all caps), it's still part of the character metrics.

---

text-transform:uppercase just changes the casing of the letters. It doesn't do anything with the character metrics. For example, it doesn't remove the portion of the character layout that would hold the descenders.

Answer 2

As already pointed out that is caused by Ascender and Descender. See also this nice picture from Wikipedia:

Here you can see it again in practice:

h3 {
   background-color: navy;
   color: white;
   font-family:proxima-nova, sans-serif;
   font-weight: 100;
   font-size:5em;
}

<h3>TEST gg Â</h3>