Page MenuHomePhabricator

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

Assigned To
Authored By
SamanthaNguyen
Jan 26 2017, 10:11 PM
Referenced Files
F5457049: footer copy.png
Feb 2 2017, 9:11 PM
F5457048: footer.png
Feb 2 2017, 9:11 PM
F5436071: pasted_file
Feb 1 2017, 12:09 AM
F5417128: guide-400.png
Jan 30 2017, 10:54 AM
F5417129: guide-thin.png
Jan 30 2017, 10:54 AM
F5417131: page-400.png
Jan 30 2017, 10:54 AM
F5417017: Captura de pantalla de 2017-01-30 04-16-46.png
Jan 30 2017, 10:28 AM
F5417016: Captura de pantalla de 2017-01-30 04-18-24.png
Jan 30 2017, 10:28 AM
Tokens
"Like" token, awarded by Iniquity.

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

@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”…

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?

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…

Captura de pantalla de 2017-01-30 04-15-57.png (565×1 px, 65 KB)

Captura de pantalla de 2017-01-30 04-16-46.png (179×630 px, 16 KB)

Captura de pantalla de 2017-01-30 04-18-24.png (176×593 px, 8 KB)

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)
guide-thin.png (764×1 px, 146 KB)
guide-400.png (764×1 px, 151 KB)
page-400.png (764×1 px, 516 KB)

@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 :-)

pasted_file (768×1 px, 123 KB)

@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

footer.png (2×2 px, 476 KB)

footer copy.png (2×2 px, 490 KB)

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. :/