Page MenuHomePhabricator

WikimediaUI Style Guide - 300 font-weight makes the content text harder to read
Closed, ResolvedPublic

Description

First I just wanna say, the work so far on the guide is great :) However, I want to ask: Why was the font-weight lightened? I personally find it hard to read, and this can make it harder for people who have visual impairments; content should be easily accessible by everyone. I suggest the font-weight should be changed back to normal font-weight (400).

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 26 2017, 10:11 PM
Iniquity added a subscriber: Iniquity.
Volker_E added a comment.EditedJan 29 2017, 10:00 PM

@Iniquity I'd like to make sure, that your idea is aligned with the same issue. As GitHub issue you've filed

Hello, I think new site' font (base one) is really tall, and it is hard to read.

Please clarify “tall”…

Fito added a subscriber: Fito.Jan 29 2017, 10:06 PM

Agreed that it’s too thin. I’m afraid too many designers are wrongly using lightweight faces for body text due to the “fattening” effect of their macOS renderers…

@Fito Out of interest, what's your operating system?

@Fito Would you provide a screenshot?

Fito added a comment.Jan 30 2017, 10:28 AM

You don’t really need a screenshot, and the OS I use doesn’t really matter; it’s common sense to use text weights/faces for body text and display/light weights for display settings. Unfortunately, using thin, small text has become yet another moronic trend in web design. Sorry for being blunt. Anyway, here are some screenshots of a couple of sites I’ve visited within this hour that have this issue…




Designers shouldn’t punish non-Retina users…

You don’t really need a screenshot, and the OS I use doesn’t really matter; it’s common sense to use text weights/faces for body text and display/light weights for display settings. Unfortunately, using thin, small text has become yet another moronic trend in web design. Sorry for being blunt. Anyway, here are some screenshots of a couple of sites I’ve visited within this hour that have this issue…

The styleguide is an early work in progress. Input is really helpful for us. Regarding fonts and other visual elements, screenshots are definitely helpful to be sure everyone is viewing the same as ourselves do.

In this particular case, I agree the current weight is probably too thin for users on all devices. I tried to play with the CSS and when applying the 400 weight to the styleguide it looks like having a higher weight than expected. Interestingly, applying the 400 weight to other pages (where Lato is not delivered through web fonts but using the local font in my machine) it looks like a "regular" width, which I think we should go with for the regular text. I included the examples below in case it helps to identify where the issue is:

Styleguide current (webfont)Styleguide with 400 font width (webfont)Another page with 400 font width (local font)

@Iniquity I'd like to make sure, that your idea is aligned with the same issue. As GitHub issue you've filed
Please clarify “tall”…

Wow, sorry, wrong adj. I wanted to to say about thin font.

I'll provide a screenshot as well :-)

Nirzar added a subscriber: Nirzar.Feb 2 2017, 7:19 PM

@SamanthaNguyen It's my bad, it was in one of the mockups as i was revising typography. We will fix it. it's not supposed to be Thin

Nirzar added a comment.Feb 2 2017, 9:11 PM

Here's updated typography for styleguide

https://zpl.io/BYA5m < spec here

@SamanthaNguyen I would like to invite you to our zeplin board. so you can leave comments and feedback directly. need email to add you.

@Nirzar: No worries! Mistakes happen :) My email can be found on Phabricator profile here (just updated it)

@Fito @Pginer-WMF I agree what you Pau said about higher weight than expected (for me on OS X), that's the reason I was changing over the early mockup by @Nirzar and font-weight: 300;. On a Windows or a Linux OS, like pointed out by @Fito, Lato Light (300) has legibility weakness as well. Therefore I think it makes sense to switch back over to Lato and font-weight: 400 as long as we don't have any better solution. :/