Line height rendering issues

[agentphoenix]

First off, awesome work on this font. Just discovered it last night and am trying to get it into a project that I'm working on.

I've noticed that on Windows there are some line height issues that I haven't seen on my Mac and was curious if there are ways around it or if this one rests solely on Microsoft's shoulders. It looks worst in IE and Chrome. Firefox seems to be a little better, but it still looks a little off. Any help would be awesome!

https://codepen.io/anon/pen/KqaKaK

[davelab6]

Hmm that's odd. I think the vertical metrics were set per recommendation of @m4rc1e so hopefully he can take a look

[icidasset]

Similar issue here looks good in Chrome & Safari, but not in Firefox.

Chrome:

Firefox:

[davelab6]

@m4rc1e could you schedule a half day to look at this next month?

[m4rc1e]

@davelab6 more than happy to. @icidasset Could you provide a jsfiddle or jsbin of this please? too many other variables could be causing this problem.

[icidasset]

@m4rc1e Sure thing, it's used here: http://ongakuryoho.com/sources You can click the Sign-in anonymously button to continue to where the screenshot was taken.

[agentphoenix]

@m4rc1e I provided a really simple Codepen with the original issue that you can check out to see what I'm talking about on Windows systems. The same issues might be impacting other browsers on Mac as well.

https://codepen.io/anon/pen/KqaKaK

[m4rc1e]

@agentphoenix Thanks for the test.

Most fonts will have different metrics when compared to one another. I'm sure if you tested Source Sans Pro or even Arial with them, you'll see they're all different. Vertical metrics are set based on the vertical dimensions of the font.

[agentphoenix]

@m4rc1e yeah I get that. My test was more to show a font that is vertically centered in a div versus Overpass which isn't in some browsers and operating systems. The only way I was able to get it vertically centered on Windows was to mess around with top padding.

I'm happy to help test anything if you need it, so just let me know!

[starryeyez024]

I can confirm I am seeing this issue too.
Here's an example of basic text with descenders and a superscript item.

You can see in Chrome, the descenders reach all the way to the bottom of the area where the text is being rendered. In Firefox, there is extra space below the descenders. This makes buttons appear uneven in Firefox.

[b-sharpe]

Can confirm, IE also renders poorly

[m4rc1e]

@b-sharpe start a new issue and add a screenshot please.

[diondiondion]

Happy new year, everyone!

Is there any update on when or whether this vertical metrics issue will be fixed? We're currently looking into replacing our typekit font with an open source font that we can self-host, and Overpass looks like it would be a perfect fit, but this issue is quite a deal breaker unfortunately. :(

It doesn't just happen on Windows, it's also quite apparent on Firefox on macOS (Chrome left, FF right):

Buttons on the Red Hat website also show the issue in Firefox:

[miguel-muniz]

Sorry to bring up this old issue but while looking for an alternative to Highway Gothic / Interstate I found Overpass to be a perfect, free alternative hosted on Google Fonts. The strange alignment in some browsers is still an issue, but using vertical-align: sub; on inline elements did help.

Hopefully sometime in the future someone could take a look at this problem and get the font fixed up.

[aaronjensen]

FWIW, disabling "Really use Typo metrics" on the font appears to fix it: https://font-test-czinmcdeht.now.sh/

[yesiamben]

Guys, firstly, great font. Have been working with it on a project over the last few days and run into the same issues. Not such a big deal in the smaller sizes, but becomes a big deal as the font gets larger.

OSX Chrome seems to work fine and place it correctly, OSX Firefox / Windows Edge / Android Chrome seems to sit everything higher. Obviously this makes quite a different to layouts.

Super simple Codepen set up here: https://codepen.io/anon/pen/pOzgNy - if you test in OSX chrome you'll see the words sat in the middle of the red box. Test on OSX FF and they'll sit much closer to the top.

Image showing Codepen in both browsers: https://imgur.com/a/ZXlI1GC

[aaronjensen]

@yesiamben yes, that's what this issue is about. Can you reproduce it with my test site: https://font-test-czinmcdeht.now.sh/

I would be happy to submit a PR to fix it, but this repo lacks build instructions. I don't know if it uses the glyphs app, but I don't have a license for that. If I submit a modification to the glyphs file, could someone else build it?

[yesiamben]

I can't; your test site fixed the problem for me. See this grab from Firefox OSX: https://imgur.com/a/jqW4X3k

Excellent (potential) fixing - if that can eventually make it's way to the Google hosted version, you would be very much the hero :-)

[louh]

I'm looking to switch from Interstate to an open-source alternative as well, and noticed the same line-height rendering issue in Firefox (Mac). Vertical placement is extremely important for our app, so using Overpass is a no-go until after the PR above is merged -- looking forward to seeing progress!

[jipigi]

We are using Source Sans Pro as a alternative to Overpass for months now, because of this vertical alignement problem. But Source Sans Pro offer very few weight variants so we are really looking to switch to Overpass once this bug is fixed. Hope you guys find some time (ahhh time !) to make this happen!

[Grsmto]

I think we need to get the people from Red Hat Brand to look at it. They probably don't check this repo (and don't get notified).

[gsinovsky]

@castastrophe please check this issue out, specifically this comment #56 (comment)

[castastrophe]

Unfortunately I am purely a dev assist for this repo and have no say in anything font. I'll share this thread with the brand team tomorrow when I'm back in the office and hopefully they can help.

[gsinovsky]

@castastrophe thanks

[davelab6]

On behalf of Google Fonts, I would be willing to commission a number of small improvements to the family, including addressing this issue.

[tom5265]

Checking in on this issue, experiencing it with Google fonts

[gsinovsky]

Hi @castastrophe just want to follow up on this, any news?

[RuneKR]

@davelab6 any news on IE 11. Both Redhat and Google Font version have issues. Appreciate the time you have used so far :)

[iLaurens]

On behalf of Google Fonts, I would be willing to commission a number of small improvements to the family, including addressing this issue.

That would be great! Looking forward to this.

[castastrophe]

@gsinovsky I reached out to our design team and they are working on a transition plan to hand the repository over to the original font designer. At the moment, our internal team has moved on to new projects supporting our updated brand so we don't have resources available or a clear way to grant access. My interaction with the repository has been purely as infrastructure support so there's not a whole lot I can do at the moment. Hopefully we know more soon! Thanks for the continued interest.

[gsinovsky]

@castastrophe I see. Thank you for taking the time to explain us the situation. I'll keep an eye for further updates down the road.

[gforrest-bw]

My understanding of the license is that the font could be forked and modified under a different name, as long as it isn't sold and keeps the same license (I'm not a lawyer).

So the only holdup here seems to be that the font was built using non-free software, which I don't personally have an interest in purchasing. But if someone knows how to build it themselves, a new version might be able to be published under a different name (you'd want to confirm this yourself in the license).

[davelab6]

The main thing would be to remove the RFN from the license, that's the only action I think red hat needs to take

[davelab6]

Oh! There is no RFN.

Then, I don't think red hat folks need to do anything per se, just keep accepting pull requests. Perhaps just 1 pr that clears out the master branch and updates the readme to point people to the new upstream.

Alternatively, red hat could transfer this repo from the settings page to Delve, and GitHub would create a lot of automated redirections.

[gforrest-bw]

@Andyfitz thanks for moving on this and creating a new release!

I noticed that the built webfonts are included in the repo itself. Right now it's not really clear where to get the built font files, and the files in the repo haven't been modified in a year. Is there any intention of rebuilding those webfonts, or can a source be provided where we can pull the updated fonts?

[MrHaroldA]

@yesiamben yes, that's what this issue is about. Can you reproduce it with my test site: https://font-test-czinmcdeht.now.sh/

I would be happy to submit a PR to fix it, but this repo lacks build instructions. I don't know if it uses the glyphs app, but I don't have a license for that. If I submit a modification to the glyphs file, could someone else build it?

Would it be possible to generate the other font styles as well? We are pretty much forced to use overpass, but the vertical alignment makes everything really messy.

I don't know how to generate them myself.

[herrherrmann]

@MrHaroldA If it’s any help, I can only recommend downloading the font files and hosting the font yourself. This also avoids lots of privacy issues compared to using Google Fonts. You can see an example in tiny-pilot/tinypilot#584

If you need to use other fonts from Google Fonts, here’s a little helper tool to get everything set up: https://gwfh.mranftl.com/fonts

[modellking]

Is this fix available for the variable wght version of the font?

[hypeJunction]

We have tried multiple versions of this font and all of them were suffering from line height issues. The only thing that seems to help is overriding the ascent and setting it to 100%.

@font-face {
    font-family: 'overpass';
    src: url('../fonts/overpass/overpass-webfont/overpass-light.eot');
    src: url('../fonts/overpass/overpass-webfont/overpass-light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/overpass/overpass-webfont/overpass-light.woff2') format('woff2'),
    url('../fonts/overpass/overpass-webfont/overpass-light.woff') format('woff'),
    url('../fonts/overpass/overpass-webfont/overpass-light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    ascent-override: 100%;
}

[whiteancient]

@hypeJunction Thank you for the recommendation! This truly saved a font noob a lot of hours of trying to solve this!

[thlinard]

Related to #91