search

FirefoxUX / photon

Firefox’s Photon Design System.
https://design.firefox.com/photon/
Mozilla Public License 2.0
274 stars 74 forks source link

Micro buttons are tough to read as-is (without text shadow) #264

Closed tofumatt closed 6 years ago

tofumatt commented 6 years ago

I find the small button size tough to see (almost a bit blurry). Here is the button in use on the Add-ons site:

screenshot 2018-01-30 19 36 05 screenshot 2018-01-30 19 36 32

I found adding some text-shadow, just to the small button, really improves readability:

screenshot 2018-01-30 19 36 12 screenshot 2018-01-30 19 36 32
aminalhazwani commented 6 years ago

Hey @tofumatt I cannot tell from the screenshot what's the hex code that you're using for the micro button. If you're using blue 60 #0060df for the default state, blue 70 #003eaa for hover and blue 80 #002275 for active/pressed it should be well contrasted!

The main issue I see is that Fira Sans doesn't perform very well at small sizes (11px in this example), especially with the font weight set to normal 400. So, while we figure out what to do with Fira Sans you could try to increase either increase the letter spacing (eg letter-spacing: 0.01rem) or to set the font weight light 300.

aminalhazwani commented 6 years ago

We see this issue as fixed. CC @pwalm to follow up with engineering.