Tag Archive for "fontdeck" - Paper Leaf Design | Edmonton Graphic Design, Edmonton Web Design

10 Tools for Better Web Fonts

June 7, 2010

There are a bevy of tools in the typography-savvy web designer’s toolbox these days. No longer are we tied down by the age-old web safe font list; now, we actually have choices when it comes to setting & styling live type on the web. Of course, there are still issues with those using old browsers, but their punishment is dose after dose of Times, Arial and so forth.

Allow me to run down the current choices for designers & developers when it comes to live fonts on the web. Some of these are free; some are paid; some are easier to implement than others. It’s up to you to make the choice as to which tool is best for you and your project, but I’ll share my opinions throughout. If I missed any that you use on the regular, let me know in the comments! *note: each title and image links to the service’s website.

@font-face

free

This CSS3 selector is probably the most widely-used tool for font-embedding today. It’s super easy to implement, and you can use any open-source font whose license allows for font-embedding.

Essentially, you upload the font to your server and link to it within your CSS file. For what it’s worth, I almost exclusively use FontSquirrel’s @font-face tools, which include kits and generators. If you’re overwhelmed by the amount of choice when it comes to @font-face fonts, check out the 10 Best @font-face Fonts.

Google Font API

free

This service from Google is even easier than @font-face to implement, although their list of available fonts isn’t so big (yet). It’s a similar idea to @font-face, but you don’t have to host the font on your server. You just throw in one line of code in your HTML and define the font in your CSS. That’s it.

Hit the jump for more ways to better your web typography! Read the whole article >

Found Friday Vol 13

June 4, 2010

We’re at unlucky number 13 here for Found Fridays on the Paper Leaf blog; however this week’s finds are anything but. We have a brilliantly designed box set for a brilliant show, some great new work from Pentagram, the world’s coolest custom-designed Nike shoes, yet another option for live text on the web, and a great CSS3 button-maker. Read on, & please share!

LOST: The Complete Collection

I am a total LOST nerd. I got in late on the action, and proceeded to watch 5 seasons in about 2 months. It was a glorious time in my life. Anyway, now that the series is over and I feel empty inside, here comes the standard box set for sale. The design of the LOST box set is really something worth paying attention to; there is a lot that happened in that show in 6 seasons, and it was the designer’s job to catch those events, those feelings, and transpose ‘em to a box set. Good job, I’d say.

Pentagram: New Work for Saks

Whenever Pentagram posts new work, I always go check it out. Usually my reaction to whatever logo they created is “It’s alright”… but then I see the collateral, which reaffirms why they’re Pentagram and we’re not. Amazing work – a must see.

25 New Nike Designs

Yes, yes – Nike is evil, sweatshops, child labour, cobras, boo and so forth. But these Nikes are custom-designed by a guy named Daniel Reese. He does a huge variety of themed Nike kicks – Twitter, Google (shown below), Simpsons, Green Lantern (I’d actually wear those) and more. Go have a look.

Fontdeck

Right on the heels of Google’s Font API comes Fontdeck, another way for designers & developers to get away from the tried, tested and boring web-safe fonts of old.

CSS3 Button Maker

Again with the awesomeness, Chris from CSS-Tricks built this super-easy-to-use CSS3 button maker. As noted from his site, “I’m saying ‘CSS3′, because these make use of gradients, shadows, and rounded corners which contribute greatly to their button-ness. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners. Not a big deal.”