Fixing font vertical height issue for multiple fonts

Question

I'm creating a css theme engine and one issue I came across was vertical height issue for different fonts. I read many articles online and all addressed solution for a specific font family. But in my theme engine users can use many fonts as a selection. This vertical height issue is really painful when aligning icons and labels. So I want to know whether there is a way to achieve this.

I created a sample code in jsFiddle please check it out using this URL jsfiddle

// html
<button id="arial">
 arial
</button>

<button id="tahoma">
 helvetica
</button>

// css
#arial {
  font-family: airal;
  font-size: 1em;
  padding: 5px 10px;
}

#tahoma {
  font-family: Tahoma;
  font-size: 1em;
  padding: 5px 10px;
}

so as you can see I used arial and tahoma (please don't mind the button text). you can see how text positioning and space from top and bottom has changed. pixel values are not web pixel values I just zoomed image and got the dimension in photoshop just to show the difference.

Answer 1

Try using the line-height attribute.

button {
  line-height:26px;
  vertical-align:middle;
}

I set the body font-size to 16px to make sure both font families have the same size - depending on the browser 1em might be different - and removed the vertical padding from the buttons and used a line-height of +10px the body font size to get the same result.

Bonus tip (edited): line-height cannot should not be used with input elements, just use height there instead - details after the fiddle.

https://jsfiddle.net/5j4L2tpj/

The reason is because in some browsers - Safari for iOS for example - the vertical alignment of text is messed up. Simple height property works as expected, perfectly aligning the text vertically - vertical padding not required in this case. To sum up, just use height on inputs, without line-height or vertical padding and get the job done as expected an all browsers/devices.

PS You had a typo for the Arial font family.

Answer 2

How about using flex?

    button {
        display: flex;
        align-items: center;
    }

Check the cross-browser prefixes for flex

Answer 3

Here's a solution:

<!-- language: lang-html -->
<button id="arial">
    <span>arial</span>
</button>

<button id="tahoma">
    <span>helvetica</span>
</button>




<!-- language: lang-css -->
#arial {
    font-family : airal;
    font-size   : 1em;
}

#tahoma {
    font-family : Tahoma;
    font-size   : 1em;
}

button {
    position : relative;
    width    : 100px;
    height   : 40px;
}

button span {
    position  : absolute;
    width     : 100%;
    left      : 0;
    top       : 50%;
    transform : translateY(-50%);
}

Check the updated fiddle: https://jsfiddle.net/upb7cL5g/4/