search

mozilla / addons

☂ Umbrella repository for Mozilla Addons ✨
Other
127 stars 41 forks source link

Font could be a bit darker to avoid being a bit blurry #14114

Closed ioanarusiczki closed 3 years ago

ioanarusiczki commented 3 years ago

It's obvious on the see more versions page that the font is a bit blurry in the yellow banners above the download buttons

Chrome

See all version page - experiement

Edge

Edge

Maybe it could look like the fonts from "Be careful with old versions! These versions are displayed for testing and reference purposes.You should always use the latest version of an add-on." which looks clear to me.

Also the banner on the other pages could use this.

championshuttler commented 3 years ago

May be we can increase font-weight a little bit for these banners

willdurand commented 3 years ago

I don't quite understand the problem here. Is that the text appears too "thin" as @championshuttler suggested?

bobsilverberg commented 3 years ago

I mentioned this issue in the UX meeting. The colour used for this text is not exactly black, so I think the colour itself could be darker and that might fix the issue, rather than increasing the font-weight. I notice that on this page we have at least three different colours that are close to, but not exactly, black, and I'm not sure if that is intentional, or just a result of different elements being added at different times. I will post some examples in a bit.

bobsilverberg commented 3 years ago

Looking at the colours on this page, I see that:

So we have a lot of variations on "black", and I'm not sure if that is intentional, or just a result of things being changed in pieces over time. This might be something we want to look into, but for now I'm going to suggest we simply change the text inside the yellow callout and the banner to be #0c0c0d, which is what is used for both the "older versions" warning, as well as the site warning (the one that says "a small notice" on dev. Or perhaps we want to change them to #000000?

@Verdi @jvillalobos What are your thoughts on this?

jvillalobos commented 3 years ago

This might be something we want to look into, but for now I'm going to suggest we simply change the text inside the yellow callout and the banner to be #0c0c0d

This sounds good to me for internal consistency with other yellow callouts.

It's crazy how many variants of black we have, and it's not clear to me that they make much difference compared with #000000. That's a separate discussion to have, though.

championshuttler commented 3 years ago

We also have a different color for release innfo #737373, 

Released 9 Jul 2019 - 372.46 kB
Works with firefox 57.0 and later, android 57.0 and later

its not black though, but was it also intentional @jvillalobos ? I could fix it up for yellow text

bobsilverberg commented 3 years ago

@championshuttler Please go ahead and change the colour for the download callout and the heading banner to #0c0c0d.

championshuttler commented 3 years ago

@bobsilverberg I did but IMO stil it looks blurry to me WDYT?

image

may be because there is not much changes in color, its very slightly, i dont even notice with my eyes after changes

bobsilverberg commented 3 years ago

I think it looks fine to me. I think it's a decent, interim fix.

willdurand commented 3 years ago

Why not using $black everywhere?

championshuttler commented 3 years ago

Why not using $black everywhere?

I had the same thought

ioanarusiczki commented 3 years ago

@bobsilverberg

For the banner and yellow warnings from the detail pages the color is #0c0c0d;

Banner

banner

Detail page

0c0c0d

Verified on AMO stage with Chrome, Edge