Mat Marquiskeyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers.
44,216,994,848 pixels dribbbled
Copyright © 2009-2012 Dribbble LLC. All screenshots © their respective owners.
Handcrafted in Salem, Massachusetts. Hosted by (mt) Media Temple.
15 Responses
Pro
Dan Cederholm
A workshop slide for discussing 'text thinning' via the
text-shadowproperty in CSS.Top: thinned, bottom: normal. Both in Safari.
Some love it, some hate it. Sound off, dribbblers?
over 2 years ago
Pro
Phineas X. Jones
In this particular example it gives kind of a cool debossed look. I could see it being used to good effect.
over 2 years ago
Pro
Shaun Inman
Depends on how it's used. At certain sizes or with the wrong contrast it can render the text unreadable. So "for" when used properly.
over 2 years ago
I think it's a awesome option. I'm sure it works better in some scenarios than others but I dig it.
over 2 years ago
Pro
Mat Marquis
I'm in favor as called-for, but unless you know some voodoo that I don't (entirely likely), the
text-shadowtrick doesn't work in SL Safari. Word on the street is thatwebkit-text-stroke:1px transparent;is the new hotness.over 2 years ago
Pro
Jake Przespo
+1 for Shaun's response.
over 2 years ago
Pro
Dan Cederholm
Helpful responses so far, thanks.
@Mat I've yet to upgrade to Snow Leopard, so that one I hadn't come across. Really interesting. Do you use
-webkit-text-strokein combination withtext-shadow?over 2 years ago
Rebound
Font Smoothing
by Mat Marquis
I got 99 problems, but subpixel antialiasing in SL Safari ain't one.
over 2 years ago
I think the text thinning (anti-aliasing hack, letterpress effect, etc) is great, but you have to be careful.
For the
webkit-text-stroketrick, you'll notice an instant decrease in scrolling performance—especially when you have a lot o text on the page.over 2 years ago
Pro
Patrick Haney
I'm all for text thinning, but I do think it's not appropriate in some cases. And I hadn't heard about the issue with Snow Leopard's Safari, so I'm curious to find out more about that.
over 2 years ago
Pro
Kyle Neath
I'm all for text thinning, but beware it seems normal people hate it on white backgrounds (since "thinning" on dark backgrounds just seems to mean "render text the way it should be, OSX").
When I rolled out text-thinning on http://github.com there was practically a revolt on twitter. People hated it. Ended up having to roll it back later that day.
over 2 years ago
Text thinners... reducing your risk for heart attack, stroke, and blockages in your arteries and veins. Or something.
over 2 years ago
Pro
Veerle Pieters
+1 for it depends. It is true that it doesn't work on Snow Leopard in Safari. You have to use -text-stroke:1px transparent; }
This doesn't work on mobile Safari so I disable it with this line.
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}. Think I learned this trick from Steve Smith a while ago.
over 2 years ago
Pro
Mike Rundle
One issue with using
-webkit-text-strokeis that if you use it on large parts of your page your scrolling will slow down like crazy.over 2 years ago
Pro
Philip Renich
Dan, the comments I received about the text-shadow anti-aliasing I wrote about a few weeks ago received a lot of the same comments even though it was for the opposite problem (Windows not being smooth enough like Safari/Mac). You really need to take it on a case by case basis. (maybe you could take and modify the little test site I setup?)
over 2 years ago