Blog

I’ve started seeing a number of sites cropping up lately that use fonts with custom font family names, such as http://designintellection.com/

Digging around, I discovered that they’re using real fonts, using css @font-face.

It looks like it’s finally coming folks – your favourite font on your website, and not using Flash replacement text or a replacement image! There are still hurdles, and the font needs to be licensed for web use.

Here are some resources I’ve found:

http://www.fontsquirrel.com/ has fonts you can acquire with the proper licensing.

http://typekit.com/ is a site that provides a font-streaming service and includes font libraries for you to use.

http://arstechnica.com/web/news/2009/11/web-open-font-format-backed-by-mozilla-type-foundries.ars has a history of the web font format.

http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master has a real hands-on tutorial on how to get real fonts working on your site.

http://www.alistapart.com/articles/on-web-typography/ is an article on designing websites with these new-found choices we have coming up.

http://webfontspecimen.com/ is a downloadable template for testing how a font will look on the web.

On this date (March 15th) way back in 1985, the world’s first dot-com domain started up. Symbolics Computer Company launched Symbolics.com, which made them the lucky number 1!!

“Nearly 200,000,000 registrations later, the Internet thrives as the world’s network for entertainment and business”
- Aron Meystedt, the site’s owner, on Monday, the 25th anniversary of the dot-com URL.

Celebrate 25 Years here

If you’re from Vancouver or if you’ve visited Vancouver, i’m sure you’ve noticed the art installations all around the city from  Vancouver Biennale.

I wanted to share one of the latest additions that i’ve noticed. It’s right here near the Cowie and Fox offices in Yaletown. Just down on Nelson street there’s a “concrete park” where this giant sculptural head rests.

It’s called Eros Bendato Scrippolato and is created by Igor Mitoraj from Poland/Italy.

You want to turn a button into a sprite, but you also want to have the text there for accessibility!

What do you do? You use the text indent property:

text-indent:-6000px; overflow:hidden; cursor:pointer;

Have you checked IE7? If the text is still there, try this:

color: transparent; text-transform: capitalize;

Yes, it is a hack, but it works great. And yes, you do have to have the capitalize transform or else it won’t work.

Here is everything you need to get your super awesome usable sprites working across all browsers:

.mybutton{background:transparent url(”mybackground.png”) 0 0 no-repeat; border:none;  text-indent:-6000px; overflow:hidden; cursor:pointer; color: transparent; text-transform: capitalize;}
have fun!

On February 27th I checked out a sweet art show on Granville street. You walk in, purchase a $5 pack of mystery cards created by various artists, then you open them up and start trading with people in the gallery. It’s the most socially fun art show i’ve ever been too. I’m totally looking forward to checking out their other event Hot One Inch Action.

If you want to submit art or just check it out sometime, go here: http://www.hotartcard.com

$15 bucks later and some awesome trading, this is what I settled with:
(Top right corner: designed by awesome CF creative director David Manzl)

Cheeky Durex ads designed by Andrej Krahne

Although I think the type choice could be better (Hobo definitely isn’t one of my favorites) and the copy writing tweaked, I think the overall concept is pretty great.