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!

Cufon

free

Cufon takes fonts and converts them to a proprietary format, then renders them using Javascript. They require you to download the core JS file, use their font generator, and link to the .js files; check out this article for a complete how-to on using Cufon. Keep in mind, like @font-face and most of these other services, you can only use fonts that are licensed for such a use.

sIFR

free

sIFR – Scalable Inman Flash Replacement – is an engine that places Flash “movies” overtop of the fonts you want replaced. So, say you have your <h1> set in Arial; you can use sIFR to find <h1> tags and put a Flash movie, in your chosen font, overtop of the text file. I’m oversimplifying, of course, but that’s the gist of it. It’s a powerful tool, but there are two downsides to take note of: it’s Flash powered, so it won’t work on iPhones, iPod Touches, or iPads thanks to Jobs’ hatred for Flash. Two, it’s supposedly pretty tricky and not overly user friendly to set up and get working. I’ve never used it, so I can’t vouch for that, but I’ve read a lot of articles that all say the same thing. However, the good news is that it degrades gracefully; if the user is on an iPhone, or doesn’t have Flash installed, it will just show the original <h1> styling.

Kernest

free

Kernest is yet another service that uses @font-face, but they simplify the process a little bit. You choose a font, they give you a link, you add the link to your site & the font name to your stylesheet. Their site is a drop-dead simple interface for those who don’t want to wrestle with the intricacies of @font-face; however, FontSquirrel‘s kits and generator are super simple too. Choice is yours.

Font Burner

free

Font Burner is a service that uses sIFR to replace fonts on your site. Find a font through their site (over 1000 to choose from), paste their code in, and voila! sexy fonts on your website. Font Burner purportedly takes the hassle and trickery out of using sIFR. Same issue as with sIFR though; it’s a Flash replacement for your text, so your fonts won’t show up on iPhones, iPod Touches, or iPads.

TypeKit

ranging from free to $100/year

Typekit works very similarly to Google’s Font API – link in the HTML, tell TypeKit what fonts you want to use. However, they have over 500 fonts designed specifically for the web – both commercial and open-source. So while it’s not really free for any working web designer, the quality of their fonts sets TypeKit apart.

Typotheque Web Fonts

ranging from free to a percentage of a type’s license cost

Typotheque is another foundry offering custom fonts from their library using the @font-face CSS declaration. Just as simple as everything simliar to get up and running. I’ve never used, but at a quick glance I’m pretty sure I’d go with TypeKit if I’m going to be paying. Why? Typotheque’s fonts, while well-designed, aren’t all designed for the web, and their selection is much smaller than TypeKit’s.

Fontdeck

not free; no pricing info

Fontdeck uses @font-face, but has a specific & unique collection of fonts available for license. They provide the code for you; you paste it into your CSS & HTML. This service offers high-quality fonts designed for the web (after all, not every font works on screen; some are only for print, and vice versa). There isn’t any pricing info on their site right now, but the “Try FontDeck For Free” tagline leads me to believe they’ll be charging.

Fonts.Com Web Fonts

not free; no pricing info

Still in beta, the Fonts.Com font-embedding service – imaginatively titled “Web Fonts” – looks to be a pretty solid choice once it gets up and running. You can sign up for a beta account at this point, but it’s not guaranteed you’ll get in. Anyway, according to their website, all you have to do to use their service is 1) Create a project, 2) Choose & assign fonts, and 3) Add a short script to your site.

Again, similar but different to @font-face, Google Font API and the like. The fact that fonts.com has a huge font library is both a pro & a con – people will inevitably make bad choices, so don’t be one of them.

There you have it; virtually all of your options for improving typography on your website designs, without resorting to images. Me? I think I’ll stick to @font-face, but I might give TypeKit and Fonts.Com’s Web Fonts a go for a project or two. Let me know your experiences and preferences in the comments!

As soon as I learned about the @font-face CSS declaration, my life as a designer changed permanently. A whole world of possibilities are opened up by this feature – no more relying on Arial, Verdana, Georgia and all the other “web safe” fonts. Not that there is anything inherently wrong with those fonts, but after seeing them day after day on the web, I know I long for a bit of variety.

However, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it. The obvious examples are there – don’t use display fonts as your body text, for example – but some fonts just aren’t great for the web (or great at all… or good… or passable).

So I’ve come to save the day with my opinions. Here’s the 10 Best @font-face Fonts, broken into Display (aka Heading 1, Heading 2 etc) and Body listings.

DISPLAY

Use these guys for your H1, H2 etc tags – but if you set your body text in them, I’ll come right through the internet and beat you up.

Museo & Museo Slab

The Museo family has exploded in popularity, and with good reason – it’s a well-designed typeface all around, unique & usable with character. Museo & Museo Slab are great options for headings on your site using the @font-face declaration.

Hit the jump for the rest of the 10 Best @font-face Fonts!

Chunk

Chunk is one hell of a slab serif. Bold & confident, set this guy at larger sizes to maximize potential.

Andron

You can use Andron for body text, but because there is only one weight that is open-source and with a license that allows embedding, don’t use it for body text. Use it for sophisticated headers – a break from Georgia, but not too big of a break.

Contra

With the same name as the greatest video game of all time, how can you NOT use this modern serif on your site? Clean & sharp, with a good balance of sophistication and modern stylings.

League Gothic

A condensed serif display font, I fell in love when I discovered League Gothic (I mentioned it, and Chunk, in my article 10 Free & Amazing Display Fonts). Balanced & structured, this font is gainly popularity quickly with good reason.

BODY

These guys can definitely work as display fonts too, but they really shine when used in the body of your website. Legibility, good design, and a variety of weights & styles are the reason these fonts were chosen. If you set up a site for a client and use a font that only has one weight for their body font, you’re going to be getting a phone call when “bold isn’t working”. The following fonts won’t give you that issue, and they’re all well-designed and provide a nice break from the standard web-safe fonts.

Droid Serif

Masculine & classy, Droid Serif is a great choice. Lots of styles available, great legibility and styling.

Deja Vu Sans

The Paper Leaf site is set in Deja Vu. A bit more condensed than some of the others here, it has some unique qualities and lots of styles.

Cartogothic

Another sans-serif choice when you want a basic, well-designed font for your body text – but don’t want to use Arial.

Fontin Sans

Fontin Sans is a sans-serif that has its own style – you can pick it out a mile away. A great choice for people who want something different but still legible and usable.

Eau

The Eau family isn’t a ground-breaking typeface, but they provide you with a wealth of styles to choose from. Because of this, it’s great choice if you’re building a website for a client who will be writing a lot.

There you go! The 10 Best @font-face Fonts (in my not-so-humble opinion). If you’re unsure of how to use the @font-face declaration, check out my article the Top Web Design Bookmarks of 2009. There’s an article in there that’s very useful. As well, check out FontSquirrel’s @font-face Generator – super easy to use, and very helpful. The @font-face declaration can be a little tricky, thanks to things like IE’s proprietary font type, and their generator provides you with all various font types (OTF, SVG, OET, etc) to get your font working in all modern browsers.

Thanks for reading!

Every once in a while, a design calls for a somewhat sketchy, hand-drawn font. Perhaps it’s a gig poster; perhaps it’s for an !!ENERGY DRINK!! company; perhaps it’s something completely different. As a designer, chances are you usually have a ton of work on your plate and can’t always hand-style lettering unique to each project. That’s where hand-drawn fonts come in.

Some are sketchy; some are based off of well-known fonts; all are great. Check out this list of 10 Awesome Free Hand-Drawn Fonts! If you like it, don’t forget to check out our list of the 10 Free & Amazing Display Fonts too.

SKETCH BLOCK

It looks like Rockwell, but sketchy! Great for display.

JONNY QUEST CLASSIC

This typeface has a nice mix of classy & old-timey elements. Legible & visually interesting.

TKACHENKO SKETCH

Slightly grungy, but not so angry and unreadable like a lot of grunge fonts.

Hit the jump for more free hand-drawn fonts!

UGLY QUA

A gorgeous, hand-drawn serif typeface.

ARSENALE WHITE

Playfully off-kilter, this font is great for designs aimed at younger children.

FFF TUSJ

This strong typeface has a hint of blueprint styling to it. Dig it!

DJ GROSS

Half graffiti, half grunge, all terrible name. But don’t let that deter you – this font is killer.

CLEMENTINE SKETCH

A smooth, flowing outlined font. Like Arsenale White, it’d be great for children-focused designs.

HANDVETICA

Where would any font list be without at least an indirect reference to the most popular font ever? Here’s a hand-styled version of Helvetica.

ELLIOT SIX

Scrawly kid-writing that will help make any design fun & unique.

Thanks for reading – please share this article!

Graphic design has an amazing community. Comprised of both the vets from the pre-computer era to the newbies who were raised on the internet and computer-editing applications, there is a huge gamut of people sharing their work and expertise online. I know when I was starting out in design, I found tons of inspiration and information from sites like JustCreativeDesign, DesignNewz, and more. If there’s one issue, however, it’s that there’s almost too much great information out there. I know – good problem to have, right?

But for those designers just starting out, or for those designers who are considering getting into design, the amount of information can be a little overwhelming. Couple this with Paper Leaf’s desire to give back to the design community, and this is what you get: the All-in-One Graphic Design Starter’s Kit. The idea behind this kit is for it to be a one-stop shop for those getting into design – and for it to be completely free. It includes free software (for both Mac & Windows – photo/raster editing, vector editing, and HTML/CSS WYSIWYG editing), eBooks, textures, vectors, brushes, and awesome fonts. If you were to have no idea where to start, you could come here, download everything, read the eBooks and corresponding software guides, and have a great starting point.

This “kit” was originally intended to be a zipped file containing all of the links below; however, it clocked in at about half a gigabyte, which I thought most people wouldn’t want to sit and download (plus it would put a strain on our hosting). Thus, I’ve broken down the kit into the elements that made it up, and linked to them all below – and making this All-in-One Graphic Design Starter’s Kit a series of links and downloadable sections, which allows people to pick and choose what elements they want.

All of these items are free, open-source and legal for both me to share & you to download – however, please don’t claim any of them as your own. All of the items in this design kit required a lot of time & effort from their respective creators, so give ‘em some love! Hit the jump for all the amazing links and downloadables that make up the Free All-in-One Graphic Design Starter Kit!

Software

Not everyone can afford the industry-standard design software – that being Adobe’s Creative Suite – so here are three open-source alternatives that will allows you to do virtually the same kind of work.

GIMP (Snow Leopard) (Leopard) (Windows)

GIMP is a free, open-source raster-editing program – like Photoshop.

Inkscape (OSX) (Windows)

Inkscape is a free, open-source vector-editing program – like Illustrator.

Kompozer (OSX) (Windows)

Kompozer is a free, open-source HTML/CSS WYSIWYG editor – like Dreamweaver.

EBooks

You can’t learn everything about design from a few eBooks, but they can sure give you a good launching point! Below is a zipped file with 3 awesome, free design eBooks from Scribd.

Compilation of three great design eBooks!

Textures

(via Bittbox)

Much love to Bittbox, a site that has been around a while and consistently shares great design elements – like these textures, below.

High-res wood textures

High-res grunge textures

High-res paper textures

More textures!

Fonts

There are a ton of free fonts and free font sites out there, but most are garbage. FontSquirrel is the best, in my opinion, and here are some of their top free fonts.

Top Free Serif Fonts

Top Free Sans-Serif Fonts

Top Free Display Fonts

Top Free Hand-drawn Fonts

Top Free Script Fonts

Vectors

No sense reinventing the wheel if you just need some design elements to complement your design. Below is a zip file containing a bunch of free vectors. Most of these come from Vecteezy.

Compilation pack of free vectors!

Brushes

Same as above – a zip file containing a bunch of free raster brushes. Some from Bittbox, some from Brusheezy.

Compilation pack of free brushes!

Keep in mind that no single “kit” or post will ever make you a complete and well-rounded designer. Use this kit as a starting point, but keep learning! Become involved in the design community – both your local one and the web’s – and you’ll grow faster than you ever imagined. Happy designing, and if you liked the post, please share and subscribe to the RSS feed!

There are a lot of free fonts out there on the internet these days – but tracking down the well-designed ones can be quite the task. Since I’m such a nice guy, I thought I would round up the top ten free display fonts for you! Top ten in my opinion, of course.

All these fonts are free to download and use. They’re not all specifically display fonts, but display use is where they shine. Enjoy, share, and subscribe to the RSS feed!

Here we go!

LEAGUE GOTHIC

League Gothic is sort of a re-issue of a font that recently became public domain. It’s gorgeous & versatile – go pick it up!

FOLK

Playful but still well-designed, the Folk font lends itself great to show posters and organic-style design.

Hit the jump for more free display fonts!

KOMIKA AXIS

I know I know – thanks to Comic Sans, everyone hates similar fonts. But Komika Axis is not similar; it is a great display font in a handwritten style. It’s got a touch of comic-bookery, but it looks great if you use it properly.

BLACKOUT

Blackout is a perfectly imperfect font. It’s got a hand-drawn aesthetic and, as you can see, an interesting take on letters with negative space.

ALTE HAAS GROTESK

Part the much-beloved Helvetica family, Alte Haas Grotesk is perfect if you want the simplicity and class of Helvetica with a touch of time-worn design.

ALLER

You start to wonder how many more serif fonts can come out and still look unique; then Aller comes along. Strong, visually interesting, and unlike any serif font out there.

CHUNK FIVE

I’ve written about Chunk Five before and used it in past projects; I absolutely love it for bold, typography-driven designs. Great font.

MOLOT

Molot has a touch of futurism to its styling – I could see it being used for some hipster poster design, or perhaps a throwback 80s party. Those are still cool, right? Guys?

BEBAS

Bebas is sort of like League Gothic if League Gothic got on a treadmill and laid off the cheeseburgers. Gorgeous font.

HIGHLAND GOTHIC

Highland Gothic sort of feels like it belongs on the cover of a spaceship’s user manual. Can you see it? Or maybe I’m just really stretching since it’s the end of the article. Regardless, I like it.

There you have it! 10 of the best, most amazingly gorgeous free display fonts. Download ‘em, use ‘em, and share this article! Why not subscribe while you’re at it?