[#5755] - [imp] Improve font rendering in OSX
- Closed
- 16 Jan 2015
- Medium
- Build: staging
- Easy Test
- # 5755
- Diff
- nternetinspired:Improve-font-rendering
- Success The Travis CI build passed Details
User tests: Successful: Unsuccessful:
These properties switch the OSX sub-pixel antialiasing algorithm to grayscaling, resulting in sharper appearance of fonts. This is especially noticeable on icon fonts, as can be seen here:
http://people.mozilla.org/~jdaggett/tests/social-waterfall.html
Test
OSX users: Apply patch and check appearance in Chrome, Safari or Firefox.
Other OS users: Apply patch and check appearance in any browser you like.
Bonus credit
OSX users: Open developer tools, select the <body> element and toggle the font-smoothing properties on/off. Marvel at the visual improvement.
Expected result
OSX users: Clean crisp font rendering throughout. Clear text, clear buttons (labels are vastly improved), and cisp icons. Lovely.
Other OS users: No difference at all.
jissues-bot
- | Labels |
Added:
?
|
||
zero-24
- | Category | ⇒ | Templates (admin) Templates (site) UI/UX |
| Easy | No | ⇒ | Yes |
Good call @infograf768.
Everyone is now invited to the party :)
Awesomeness!
Works fine here. Merging. Thanks.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2015-01-16 12:46:15 |
Thanks everyone! My fastest ever merged PR!!
Hi @nternetinspired , just discovered this, after an update of my dev version.
Unfortunately, on a 4 years old macbook (not retina) the result for font is bad (tested on Firefox), as all the admin looks now really insipide (i can't read anymore without my glasses, and i'm not so old!)
My suggestion would be to apply this only for icons (there, the improvement is really great!) but not for all the body, and... only for icons white on dark/colored background... because sub-pixel antialiasing algorithm OS X tends to render light text on dark backgrounds too bold.
I agree that with grayscale, bright font on dark background should be better, but it's not the case (look at new button, the text 'new' is not clean or white text on blue background).
There a before/after your PR screen shot :
I do have a non-retina Macbook, but I can still read ok after that PR. Whether on the Mac itself or a secondary monitor.
I agree that with grayscale, bright font on dark background should be better, but it's not the case (look at new button, the text 'new' is not clean or white text on blue background).
Actually, I don't think antialising is an inherited property for button element, so it should not have any effect on the the new button text in your example. I should probably create another PR to add that :)
In the case of the .nav-list :active highlight (white on blue) there is a dark text-shadow applied to that element, which gives the appearance of thinner text.
I'm also on a non-retina screen here :)
@infograf768 i can read the text too, but all text on white background seems too attenuated...
In fact, the main issue i see is to have black text becoming gray on white background. (and so changes the real rendered color).
The difference for eye is more relevant when screen light is at its maximum.
It's really better for Joomla icon, but i don't see it applied to the body as an improvement in accessibility.
Note that i'm colourblind (so this could be a reason why... I know, amazing for a photographer... lol)
What about Hathor and beez3 ?