iOS vs Windows Line Height Issue

Scott Biersack

Hey friends – I'm still relatively new to type design and trying to understand this issue I came across. I'm in the process of redesigning my portfolio website and used my own typeface across the site. I have this underline hover effect that looks perfectly fine across iOS devices yet appears very large on Windows devices (you can see the comparison in the attached images)...This is leading me to believe I've done something wrong on the backend of my typeface for the line height to render larger on Windows perhaps? 

Could anyone point me in the right direction of where to look within Robofont on how to fix this issue? I don't even know where to begin! 

For those interested in diving deeper, my site is currently hosted at: youbringfire.com/work


Here is the Windows rendering below with the iOS rendering above.

John Hudson

Fonts contain multiple sets of vertical metrics, which are used by and interpreted differently on different platforms. Even when you set all the vertical metrics to be compatible, the different interpretation can lead to different results. Looking at the highlighting in your illustration, I am guessing that the iOS example is using the hhea table Ascender and Descender metrics, while the Windows example is using the OS/2 table WinAscent and WinDescent metrics.

Scott Biersack

@John Hudson
Appreciate you taking the time to help me out! That's definitely helpful for me to understand how things are operating. I agree the Windows machine is most likely using different metrics – this at least helps me understand a general area to begin testing. I'll look into WinAscent / WinDescent some more!

Johannes Neumeier

Independent of what editor you use the Glyphs tutorial section has this great write up with a comparison of how those different sets of metrics values play together - and how you can apply different strategies in terms of visual compatibility across platforms or certain applications.

Jens Kutilek

You could try to set the line-height CSS property explicitly if you haven’t done so already.

Scott Biersack

@Johannes Neumeier thanks for sharing that article! Seems very promising – I'll look it over now!

Johannes Neumeier

Jens Kutilek said:

You could try to set the line-height CSS property explicitly if you haven’t done so already.

Wow, I did not think that would actually overwrite the font metrics. It even unifies the line height for the same font with different metrics when you set line-height in em units. Weird, but useful.

Jasper de Waard

Offtopic: 'he tries to do it all' doesn't sound a lot like someone I would hire... Have you thought about offering your type up for critique here on typedrawers?

Scott Biersack

@Jasper de Waard
Why's that? And yes, I've posted here a few times with proofs. Will continue to share more once I have more work to share

Jasper de Waard

I would expect a person who tries (why would you say you try? Either you do it all, or you don't. Trying is no use to a client) to do everything, to not be very good at any of it. You can only be an expert in so many fields, doing it all just sounds unrealistic (even if you remove the 'tries'). I think it's more convincing to mention all the things you have serious skills in, or just the ones you are best at.