Skip to main content

Fontastic! PhotoShelter Websites Now with Typekit

A few years ago, it became very in vogue to use a CSS “sprite” in websites for things like navigation bars. Here’s an example from our homepa...

easiest.jpg

A few years ago, it became very in vogue to use a CSS “sprite” in websites for things like navigation bars. Here’s an example from our homepage:

Using a single image, designers could reveal only part of the image at a time, which yielded some distinct advantages: 1) they could use a myriad of different fonts, 2) they could create “hover” effects (like changing the color), and 3) they could reduce the loading times by having as single graphic that was cached in your browser.

Sprites are cool, but they’re graphics. That means that if you want to change the name of a link, you have to recreate the graphic. Secondly, search engines can’t see any text, because there is none.

Earlier this year, when PhotoShelter introduced the ability to create custom pages, we had two themes that used sprites in the navigation. Because of this, the Mars and Crisp themes couldn’t support the extra pages, because we couldn’t create graphics on the fly, and there were no system fonts to match the typefaces we were using.

Around that time, we came across a cool company called Typekit. Typekit’s technology allows websites to use thousands of fonts in nearly any browser. Their technology uses open standards-based CSS (not Flash), and they’ve partnered with foundries like Adobe, FontFont, Veer and more. They even worked with Google to create an open source project to deal with fonts on the web.


At that time, we couldn’t use Typekit because we needed an API (application programming interface) to integrate with all our photographer websites automatically. But a few months ago, Typekit CEO Jeffrey Veen gave us access to the now-public API, and we started doing some prototyping.

Today we’re psyched to announce Typekit integration into our themes and styles. Here’s a few examples:

Here’s the Maui theme pre-Typekit using Arial. It looks pretty plain Jane – passable, but not exciting.

maui-pre-typekit.jpg

And here it is with the Museo Slab typeface.

maui-post-typekit.jpg

Ain’t that cool?

We thought we’d have a little fun too, so here’s what our new Maui style “Funhouse” looks like:

maui-funhouse.jpg

Here’s a new style for the Mars theme called Swiss.

mars-swiss.jpg

For the time being, you can’t change typefaces within a style, but our styles incorporate quite a bit of variation, so we think you’ll find something that suits your taste. And in the future, we will have controls for you to pick your own typefaces. (Of course, if you’re a CSS jockey, you can sign up for Typekit on your own and make use of hundreds of fonts).

The Typekit blog is also filled with tons of interesting stuff on why font integration has been challenging in the past and how rendering of fonts differs by operating system. Stay tuned as we continue to develop tools to give you more creative options for your website!

Next Post:
Previous Post: