Text is not vertically centered
css, html
Solution
I had the same problem with a paid font. After a bit research, I found this tool → https://transfonter.org/ . Just, upload your fonts, and don’t forget to change to “on” the option “Fix vertical metrics”. After this download the new fonts and replace them with your previous ones. Worked for me :)
Problem
I'm using the line-height property to align some text to icons in a menu. I've created a simplified version (without icons) to illustrate my problem. It seems to be a problem with the general vertical alignment of fonts. You can see this problem on jsfiddle: http://jsfiddle.net/KFxG3/1/ The code is really simple: ``` <div>qb - Some text - qb</div> ``` An adding a style: ``` div { background-color: green; height: 22px; line-height: 22px; font-size: 20px; font-family: 'Segoe UI', 'Verdana', 'Arial'; } ``` This is how it looks like: And this is how it SHOULD look like: Why does this happen in newer browsers? I've tested it on Windows 8.1 64 bit in Firefox 27.0. EDIT: I want to know, WHY the browsers does not render correctly. A small letter like 'a' should get the same space to the top and bottom of the 'green', when applying a line-height thats as height as the container. But the rendering is wrong. EDIT#2: It's an issue with the font. Segoe UI seems to have a strange baseline. When using Arial, Verdana or whatever vertical alignment fits better (but it's also not perfect). -> http://jsfiddle.net/KFxG3/22/