756393 - Font-smoothing not applied to light text on dark background

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[simonyarde]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/534.56.5 (KHTML, like Gecko) Version/5.1.6 Safari/534.56.5

Steps to reproduce:

Firefox now applies sharper/improved font-smoothing to all text, similar to font-smoothing: antialiased in other browsers..


Actual results:

.. however the text inside Button elements is not sharp like other text on the page 


Expected results:

Text inside the button element should be rendered in the same manner as all other text on the page in order to keep designs looking consistent.

Comment 1

[simonyarde]

Update: the issue was actually related to light text on a dark background, and affects buttons and presumably all other elements. 

White text is rendered very differently from dark text. Whereas the new antialiasing is very similar to webkit in appearance for dark text,  firefox's rendering of light text looks blown out or blurred. 

This is a problem for small icons, where the enhanced antialiasing is highly desirable. 

There is now an issue for font and icon designers as to what extent to compensate for reversed contrast *and* differences between  browsers antialiasing. 

Firefox would now seem to be initiating a trend toward designing fonts to be 'heavier' because coders cannot control the antialiasing on a per element basis and the antialiasing is much tighter that in previous versions of Firefox and the default display in webkit. However this will only worsen the blown out effect of light text on dark background.

Comment 2

[simonyarde]

In conclusion;

Webkit seems to have a slightly better approach to displaying light-text-on-dark-background, but both browsers can display improved and consistent results by adding faint black outline to text.

Contrary to my initial understanding; Firefox's recent overall improvement in antialiasing and Webkit's experimental font-smoothing property are not attempting to do the same thing.

Use of webkit's font-smoothing property is probably not a great idea with text because of reduction in readability (perceived weight) and the reasons I mentioned in the previous post re divergence in font-design for different browser rendering capabilities.

Fix:

Firefox's display of dark-text-on-light-background is very similar to webkit, and both look good. However light-text-on-dark-background is very blown-out in Firefox.

It is possible to greatly improve the sharpness of light-text-on-dark-background and achieve near-identical anti-aliased results between firefox and webkit (without font-smoothing property) by adding something-like the following, which adds a faint black outline:

.light-text-on-dark-background {
    text-shadow:
        -1px 0 rgba(0, 0, 0, 0.14),
        0 1px rgba(0, 0, 0, 0.07),
        1px 0 rgba(0, 0, 0, 0.16),
        0 -1px rgba(0, 0, 0, 0.3);
}

The alpha values can be tweaked to suit the font and amount of contrast between the text and background colours, but this works well for off-whites with mid to dark backgrounds.