Font Rendering / Line-Height Issue on Mac OSX
Have you ever encountered font rendering issue (not vertically centered) on Mac OSX but totally fine when you view it in Windows? Well, just continue to scroll down and see on how to fix it.
Team Urgence
It is really annoying when your friends or colleagues commented about your site saying “hey, some of your website buttons aren’t displaying well, fix it!”. Well, its really irritating, isn’t it? So, I dig down until to the earth’s core, and yes, finally I found a solution on how to fix it!
The Issue
Below, were the images you will see in Windows and in Mac OSX. You will clearly see how the text thrown off outside of its container when in Mac.
Windows
Mac OSX
Note: I’m using Gill Sans font and I’ve just load it as @font-face CSS rule.
What I’ve Done
I’ve tried the following work around, but still no luck:
- Set another element inside parent element, so it will become:
Beauté - Set parent
position: relative;, childrenposition: absolute;. - Set
overflow: hidden;in parent, and child was set tofloat: left;. - Set heights on every element.
- A combination of height and padding on span, even div.
All of it has no effect, the text still not perfectly aligned vertically. So, I’ve come looking for solution in the internet and found in stackoverflow. The accepted answer there wasn’t really helps me so I scrolled down and found this https://transfonter.org/ website mentioned by Ahmad answer. It really saved my day on how to fix line-height issue in Mac OSX.
How to use Transfonter?
This website is so simple yet elegant, easy to use and above all, it’s free and there’s no software you needed to install! It offers many other useful stuffs so, you can explore there. Now, let’s get back to our issue, this is the view you will expect when you visit transfonter:
First, you need to add the font you want to fix by clicking this 
. After that, you don’t need to configure all the settings there. The only important option that you may want to touch is the fix vertical metrics option 
and formats 
. Switching it on fixed you problem, end of story! Anyway, all the steps here is not so difficult that you will be guided really well there.
What do you think? I know there’s so many best tools out there, but I found this site really amazing. If you got something to show, leave a comment below for others to see it as well, don’t be too greedy!
