While I don’t think it overrides the font settings on a site currently using @font-face, it’s really fun to see what FF Dagny Web would look like on Dribbble, or how Mark Boulton’s blog would shape up with FF Meta Serif Web.  Got a favorite FontFonter experiment? Let me know…

My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.
.tag_list ul {
-webkit-column-count: 4; -webkit-column-gap:20px;
-moz-column-count:4; -moz-column-gap:20px;
-o-column-count:4; -o-column-gap:20px;
column-count:4; column-gap:20px;
}

Safari / Chrome shuffles an extra item into the last column & hides my last tag.

Mobile Safari does better, showing all tags & arraying them in left-hand columns first.

Firefox performs fairly well, filling out each column from left to right.

Opera doesn’t currently offer support for column-count.

Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site.  That being said, I’m happy to continue to use this for my Tags list.  It’s lightweight, efficient and a constant reminder that the web is ever-evolving.

After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI. I added this code for comment & search forms to retain the basic style I defined in my CSS: -webkit-appearance:none;

There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.

Much of it doesn’t exist anymore. Gone. Vanished. All that hard work, thinking, stressing… poof. It’s a nice reminder of what’s important, and the reality of the ever-evolving web. A lot of this junk is just temporary.  – Dan Cederholm

Feel free to download any of the following resolutions:
iPad 1024 x 1024
2560 x 1600
2560 x 1400
1920 x 1080
1440 x 900

Similar to Kyle Meyer’s experiment, I noticed a significant improvement and added the property to my body CSS for this site.  Overall, type looks much tighter and successive capital letters, like “CSS”, seem more evenly spaced.  Firefox uses optimizeLegibility by default for font sizes 20px or larger and I agree with Paul Irish’s thought that Webkit should do the same.

• When the site launched, I had Typekit serving up only the regular version of FF Meta Serif Web Pro to the web, iPhone and iPad versions.  Knowing that multiple styles and weights being pulled from the same font via Typekit could crash Mobile Safari, I opted for a single font file to rule them all.
• After seeing Stephen Coles’ comment about faux italics I did a little more peeking around.  Taking into account mobile load times, the inability to apply styles through CSS in Mobile Safari and how great the real italic version of FF Meta Serif looks, I changed my plan and switched both iPhone and iPad support OFF to let the stacked Georgia render instead.  I really like this solution, and while I haven’t made up my mind on what to do about an iPhone version for this site, I’m satisfied with where it lies.
• Yesterday, Typekit announced that iPhone iOS4 includes a fix for the multiple weights/styles crashing issue.  I switched iPhone support ON in my kit editor and was glad to see that the fonts were loading perfectly.  Ultimately, I decided to switch iPhone support back OFF and serve Georgia instead of FF Meta Serif.  In this case, I think the speed for Wi-Fi-less users is essential.  However, when iPad gets the updated iOS4 I’ll revisit my game-plan and consider enabling in that case.

I’d also like to state my support for Typekit.  They’re doing a lot of good work on multiple fronts: customer & tech support, working with foundries to make more fonts available and participating in the greater discussion on how browsers should handle them once we can serve ‘em up.  Any inquiries or questions I’ve had have been fielded quickly and I think that paying for any  service like this doesn’t just get you fonts easily, it endorses the web-font movement and supports progress.  It’s messy work, and I’m glad it’s being done.

.the {font: 30px "adrianne-1","adrianne-2","Times New Roman", Times, serif;}
.design {font-size: 68px;line-height: .9;text-shadow: #f5f5f5 -1px 1px 0;}
.cubicle {font-size: 40px;letter-spacing: 1px;line-height: .8;font-weight: 500;}
.main {
font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2";
text-transform: uppercase;
line-height:1;
font-weight: bold;}
.tdc {
background: url(../img/diag.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: -5;
display: block;
text-shadow: none;
font-size: 220px;
margin-top: -112px;
height: 160px;
font-weight: 700;}
.diamond {
margin-bottom: 12px;
margin-top:0px;
font: italic 14px/0 "Times New Roman", Times, serif;}
.view {
font: 15px "adrianne-1","adrianne-2", serif; margin-top: 10px;}
.explanation{
font: 12px/1.7 "adrianne-1","adrianne-2",serif;
margin-top: 0px;
margin-bottom: 30px;}
.line-left, .line-right {
border-bottom: 1px solid #f8f8f8;
width: 150px;
display: inline-block;
margin-bottom: -30px;
border-top: 1px solid #cdcdcd;}
.line-left {float: left;margin-top: 0px;}
.line-right {float: right;margin-top: -17px;}

I think I came pretty close. The main differences are related to the fonts I used, as Tungsten and Sentinel aren’t yet @font-face-able. Fortunately, Typekit was able to serve up Refrigerator Deluxe and Adriane as more than suitable replacements. Just like my last last experiment, some of the class styles may seem oddly titled. I sourced them from the first few letters from each line of text. At the moment this will only work in webkit, so fire up Safari or Google Chrome and check out the example.