Design Blog | Paper Leaf Design | Edmonton Web Design + Graphic 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.”

That’s it! See you next week.

June 2010 Desktop Calendar Wallpaper

June 1, 2010

It’s June! Which means it’s almost summer, which means us designers are going to have to practice some serious self-discipline in order to stay in front of our computers, working on our client projects, instead of playing hooky in order to be outside in the sun. Maybe this desktop calendar wallpaper, with it’s green grass tones, will help sate that thirst. No? Well, I tried my best.

Click to download the June 2010 Desktop Calendar Wallpaper in 1920X1200, 1680X1050, 1440X900 and 1280X800.

Logo & Branding Process for Chorus Magazine

May 31, 2010

A couple of weeks ago, I launched a side project of mine: Chorus Magazine. My regular readers know this already, as I shamelessly promoted it here on the launch date. However, today I’d like to reveal my thought processes behind Chorus the brand and showcase the various design elements that came along with that: logo, print and web.

When my partner-in-crime, Kelvin, and I sat down to discuss what Chorus should be, we were clear on one thing: there is a need not only in our hometown of Edmonton, but everywhere, for a solid musician’s online resource. We wanted to build something that could potentially grow into the Smashing Magazine for musicians, so to speak. With that in mind, I approached the logo design as I would with any other business: I looked at competitors, I looked at my target market, and I aimed to create something that would resonate with the latter.

Chorus is a site for independent musicians, so I wanted the logo to reflect the DIY (do-it-yourself) ethic that indie musicians possess. I also wanted to create a logo that, perhaps, could someday be used on the front of an actual print magazine. Who knows, maybe we’ll get to that point. With that in mind, I decided to go with a logotype with a hand-drawn style. This was the end result:

Hit the jump for the full article! Read the whole article >

Found Friday Vol 12

May 28, 2010

Morning, readers! I’m back from Montreal, fully inspired and ready to dish on more great design finds. This week’s Found Friday features an amazingly well-thought-out and designed public bike system from Montreal, a Pantone Hotel in Belgium, a list of the top 10 CSS Galleries of 2010, a beautifully Swiss-inspired espresso machine (we all need it now and again), and a hugemongous compilation of Illustrator brushes. So check ‘em out, subscribe to our feed, and tune in next week!

BIXI

Bixi, a combination term of “bike” and “taxi”, is a public transportation project in Montreal (and soon, other cities worldwide). Essentially, you pay $5 for a pedal bike from their moveable, solar-powered locking stations. This gets you a half hour of riding, and each half hour after that charges your credit card. There are stations all over the city, so you just drop the bike off at station when you’re done with it. It’s a brilliant way to promote an alternative, clean source of transportation.

The bikes, and this whole system, really is a marvel of technology and industrial design. Read more at www.bixi.ca.

The Pantone Hotel

In case having the Pantone mug just isn’t enough graphic design nerdery for you, why not stay at the themed Pantone Hotel in Belgium? “What room are you in?” “Oh, I’m just over in 3005M”.

Top 10 CSS Galleries of 2010

Alright, so usually these kinds of lists don’t come out until year’s end. But, early bird gets the worm right? Here’s a list of 10 great CSS galleries for the next time you’re stumped for web design inspiration.

Illy Y1 Espresso Machine

I’m not a huge espresso guy – more of a black coffee one – but if/when we get an espresso machine here at the Paper Leaf offices, this Illy Y1 machine would be it. I don’t care how good the espresso is. The design is gorgeous, and that is FACT.

1000 Free Illustrator Brushes

I’m not a huge fan of these “one hundred quadrillion bajillion things you’ll never manage to use all of” lists, but some people are. There are a bunch of good, free Illustrator brushes in this list. For those of you needing to fill your bare brush cupboard in Illustrator… enjoy.

See ya next week!

Paper Leaf Design | Edmonton Web Design + Graphic Design