Question

I need to make sure height of the text is exactly same as its line. But when font-size and line-height are the same, the text is still slightly smaller then its line. See Fiddle. I use text-transform: uppercase here, so there are no extra parts that stick out, like ‘y’. Any ideas how to fix it?

<div> Some Text</div>

div {
    display:inline-block;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    background-color: lightgreen;
    padding: 0;
    margin: 0;
}

Answer 1

That’s because font-size is the maximum size for a font. In your example, È will fill the entire height. So if you don’t plan to use accented letters, you should remove 1 or 2 pixels from the line-height.

This seems to give a good result:

div {
  display:inline-block;
  font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
  font-size: 20px;
  line-height:15px;
  text-transform: uppercase;
  background-color: red;
  padding: 0;
  margin: 0;
}