search

18F / hub

DEPRECATED: Documentation hub for the 18F team
https://github.com/18F/handbook
Other
46 stars 33 forks source link

font-weight is being calculated differently on various browsers / implementation leading to readability issues #340

Open NoahKunin opened 9 years ago

NoahKunin commented 9 years ago

Check it out:

Chrome: (light-weight on Hub, normal on Blog)

chrome-open-sans-bug

Firefox: (light on Hub, heavy on Blog)

firefox-open-sans-bug

Safari: (light on both Hub and Blog)

safari-open-sans-bug

IMHO, I think the light versions are very difficult to read, and perform even worse while scanning. Firefox always renders fonts a little thick, so no worries there.

I just ran a quick test across all the browsers, and simply removing font-weight from the CSS will align all weights across all browsers to the "normal" version on the Blog and will also cover all implementations (18F site vs the Hub).

Thoughts?

cc @gboone @mbland

gboone commented 9 years ago

I've been noticing strange things with font weights on 18f.gsa.gov. They are separate stylesheets so that is likely why you're noticing differences between the two. Thanks for documenting it and for the screenshots, @NoahKunin. Might be worth opening an issue referencing this one on 18F/18f.gsa.gov just so we don't lose track of it.

meiqimichelle commented 9 years ago

@gboone A potential culprit may be font-smoothing on one and not the other. I know we removed that from some of our code based on a comment from a friendly outside-of-18F-contributer.

NoahKunin commented 9 years ago

@meiqimichelle bingo! That accounts for the different implementations, just tested it. Culprit being -webkit-font-smoothing: antialiased is active on the Hub.