# 'Open Sans' font readability issues in site design (2015-12-22)

The current font seems to have problems with readability, probably with regard to weight distributions over the pixels. For instance, the bottom of the letter S (both in lower and uppercase, 's' and 'S' seems to be missing top and and bottom. But each and every letter faces the same issue. This seems to be an issue with the downloaded 'Open Sans' font. Using the Google 'Open Sans' font makes the problem go away (and leaves a very readable & beautiful page design). The issue pops up with lower resolution screens (e.g. I'm using a Full HD screen with 150% text size on Windows 10, same thing without scaling).

For others to what I'm talking about, the following will replace the font download (@font-face statements for 'Open Sanse'):

2. create a new style with the code below (e.g. by right clicking the icon on the top right, or by going to the Stylish add-ons page in the prefs)

This script also works with Chrome by using the same extension but you'll have to use Mozilla Format -> Import instead. It will give you the same results.

Title:

Change font face for crypto to Google 'Open Sans'


Code:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("crypto.stackexchange.com") {
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
}


Site before:

Site after:

• This seems to be related with the font-weight; if it is too high, it seems that the letters get mangled and cut off - at least with the current SE Open Sans font - the Google one doesn't suffer this, but I'm not sure it contains the full set of symbols. – Maarten Bodewes Dec 22 '15 at 3:17
• thanks for reporting this. readability is very important, so we will investigate this problem for sure! – Paweł Dec 22 '15 at 8:51
• Small update: the site looks fine on my Galaxy Tab S, which has a very high res screen and Chrome as browser. – Maarten Bodewes Dec 23 '15 at 18:43
• Another remark, if I take a very good look, I think the issue is that the letters seem to scale over the horizontal axis but not on the vertial axis. This is very likely related to the pixel distribution and the fact that the font is not adjusted for them. This would also explain the perfect viewing on a QHD screen (i.e. the Tab S). – Maarten Bodewes Dec 24 '15 at 12:50
• We've updated Open Sans font with the one from Google Fonts. It should be visible in next ~24 hours, once we release build. I'd be really glad if you could test if it's better now. – Paweł Jan 4 '16 at 15:20
• The C and the o in Congratulations now seem evenly weighted, so whatever has changed, it seems OK now! Congratulations :) – Maarten Bodewes Jan 4 '16 at 19:41
• @Pawel So ... this wraps it up right? Or are we in for more changes? I don't see any open issues when I look at the moderator tags... – Maarten Bodewes Jan 4 '16 at 21:50
• yes, i think we should be good now:) – Paweł Jan 5 '16 at 7:03