@font-face Smoothing in Windows Chrome
WARNING: THE FIX BELOW IS DEPRECATED IN CHROME 16 + 17. SAD-FACE :(
You may have noticed the issue in which @font-face embeds rendered in Windows Chrome look mighty jagged. Fixes such as -webkit-font-smoothing barely do anything, so this hack relies on a fairly well known fact about Windows Chrome: putting text-shadow on anything makes it blurry as shit. Original implementations of the hack relied on a solid text-shadow colour, but this no longer works in recent updates. It is now vital to enter an rgba() value instead.
Hopefully you will end up with something like this:
h1, h2, h3, h4, h5 {
font-family: ‘TodaySHOP-BoldRegular’;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
Real World Examples:
A real world example of this is best demonstrated on my own Front End Development Guidelines. My header tags were smoothed out with a solid hex colour, prior to the rgba() update. They’re still broken to date. Oops.
But the problem is much more widespread. Consider this ironic blog post on IE font smoothing by @Koodoz, in which the Chrome problem rears its ugly head again. It leads to some interesting accidental changes, where “hate” has become “hale”.
Caveats:
Be aware that this can modify the kerning of the text. There are also situations where the font is hinted in a way that this hack is detrimental. The over-used League Gothic, for example, does not bode well with this method at smaller font-sizes. There were also some comments that this makes Chrome on Mac even blurrier than usual.
Credit:
I’ve been trying to track down who taught me this little trick for a while now. I originally assumed it was @Koodoz, as he invests heavily in @font-face in his designs - but it was news to him. I thought it might be @Rainerbird, as we both read the same kind of stuff online. No dice there either. This blog post also describes the method, but I have probably been using the method just as long and don’t recall visiting that site. The comments and feedback on that blog post are great for further explaining the method and its shortfalls. ■
I’m guessing most people who take a look at Here, File File! in the next few weeks are going to draw comparisons to Dropbox and their multitude of competitors. I simply want to highlight a really cool effect that they have employed on their website.
jQuery image sliders are past “trendy” status and are a pretty commonplace part of modern web design. They are most often seen in software development company websites as a way of quickly traversing a set of screenshots.
What Here, File File! have done is tie their captions to their buttons, such that they slide in sync with the screenshots. A pretty simple bit of code, but couple that with their 3D effects, it looks great.
Check it out @ http://herefilefile.com/
10 Great Twitter Designers’ vCard/Identity Sites
vCard and mini identity websites are an increasingly popular way of creating a facade for your web identity. These websites are characterised by their single page structure, where such little information is contained it is simply rendered to the page and hidden. If AJAX is ever used, it is more often than not to handle the contact form interaction.
The UI generally contains tabs and content is toggled by slick javascript animation. Most vCard website creators attempt to create a natural, tactile environment that barely resembles a web page at all. Information is available immediately, and the page never posts back.
The people I have chosen for this list work in a range of fields (UI design, icon design, graphic design, programming), but were all found using twitter. I have either been following them since day one, or found them through one of these contacts.
If imitators are an indicator of success, Tim Van Damme’s beautifully simplistic design is outstanding. Tim created a wall of shame for the long list of imitators who directly stole his code and design to use for their own vCard websites.
Okay, I admit I only found this one when I was writing this post — but I love it. The google maps integration, the subtle background and solid animation easing combine to form a slick UI.
Like most of the people in this list, I began following Chris after finding him on other designers’ pages and friend lists. His vCard/mini-site uses a spatial layout to slide between content.
Matthias Kretschmann (@kremalicious)
This vCard website makes the list because it introduced me to the idea of the microsite. While the design may not be the best in this list, it’s use of animation is what got me interested in finally learning jQuery.
The only paging on this mini site is between items in Mathieu’s portfolio.
Jonas recently hung up his mouse, but made this website as the final resting place for his work. It bears some resemblence to We Love Icons. Unfortunately this one does have post-backs, but because it embodies the simplistic design of identity design (and I love his work) I thought I would add it to the list.
While not an overly complex or stimulating design in itself, Kenichi’s website leads purely off the merit of his own work.
Jonatan Castro (@DDrDark and @bylinebreak)
This man and his work needs little introduction.
Another Mac inspired single-pager. An instructional notification slides down from the top, explaining to use the left and right arrows to navigate through the portfolio. Clicking the name header toggles the “about” information panel.
Honourable mentions (that have multiple pages, sub pages + blogs etc):
The trainwreck that became the Lentil as Anything website
Last year a group of us worked on the Lentil as Anything website as part of a year long, final year subject under the blanket Multimedia course. It was a democratic process of tendering, presenting and consulting with the client. We succesfully met a lot of the criteria such as having a website that is:
- Quirky, illustrative and unique.
- Made with Flash, but provides a mobile and accessibility version.
- Easy to use and understand for the diverse range of customers and employees that are associated with Lentil.
- A community blog, because Lentil is community.
We got a lot of positive responses from within the university and from Lentil representatives. I won’t go into detail about what exactly transpired, but Lentil management decided to ditch our work and opt to outsource the work to their prefered creative(?) agency.
This is their preferred alternative:
