As web and graphic designers, fonts play an increasingly bigger role in our work. Sometimes, a client gives us a logo that’s really just a 200 pixel wide jpeg image rather than a true vector based logo. The task of figuring out what font is used in that logo used to be tricky, if not impossible.

Thankfully, the surge of web based design tools benefits this situation, and there are a few font discovery services available online that can save hours of work looking for a specific font.

 

First, let’s talk about how these sites work. Usually a file of with your font is uploaded (or linked via a url) to the site, then scanned to find glyphs that match a font. This only works with letters with spacing, so sometimes a bit of Photoshop work needs to be done to separate letters that have been kerned and tracked very closely together.

As someone who keeps myself regularly updated with artists within the art scene (lowbrow/underground/pop surrealism) I find it very hard to find artists with websites that match their work. It is so surprising to see a group of such highly creative people have such sub=par web presences.

I guess part of this goes back to the “my work is so good, that my website doesn’t need to be” mentality that many artists have, but whatever the reason is there are simply too many great artists with sites that don’t match their talent. So I began a search for some of the better (there‘s too many artists out there to call this a best of list) artist websites out there and here’s a sampling of what I found:

Artist: Friends With You

The FriendsWithYou website is one of the few sites I found that’s actually designed…..really well. The typography is clean, the 3d navigation buttons are a great touch, and the use of mouse-interactivity in the flash header is a simple tie-in to FWY’s world of smiley faced silliness. Images in blog posts are greyscaled until hover, and they’re big and splashy. A site that’s very easy on the eyes, as well as easy to navigate.

A little seen effect in modern web design is the parallax effect or parallax scrolling. Parallax involves layered images that move at different speeds from background to foreground, creating depth and if designed cleverly enough, the illusion of 3D space. The effect can be achieved with plain old CSS and HTML, as well as with jquery powered javascript application jparallax.

One of the most well known individual examples of CSS within the web design community of CSS-based parallax is on Clearleft’s landing page for their Silver Back App. The vines at the top of the page are set as parallax layers.

The images look great as a set of layered static images but there is no mouse interactivity, and the effect can only been seen “in action” while the browser window is being re-sized. Designer Paul Annett says using parallax in such a subtle way where not everybody sees it is “like a hidden Easter egg for those who do.” You can view a full explanation of the css that Paul used for the effect on his article here.