As Information Architect Oliver Richenstein famously wrote in 2006, web design is 95% typography – so getting the right typeface for your design is important. We’ve selected some beautiful free fonts that are just waiting to be added to your next design.

Justice

Source: http://dirt2.com/fonts/justice-by-dirt2/

Parma Petit

Source: http://www.dafont.com/parmapetit.font

Fertigo Pro

Source: http://www.exljbris.com/fertigo.html

Reznor Broken

Source: http://www.dafont.com/reznor-broken.font

Rough Draft

Source: http://www.fontriver.com/font/rough_draft/

Calluna

Source: http://www.exljbris.com/callunasans.html

Day Roman

Source: http://www.dafont.com/day-roman.font

Imperator

Source: http://www.dafont.com/imperator.font

Champagne & Limosines

Source: http://www.dafont.com/champagne-limousines.font

KiloGram

Source: http://imjustcreative.com/kilogram-font-free-heavy-display-font-for-download/2010/02/24/

Walkway

Source: http://www.dafont.com/walkway.font

Museo Sans

Source: http://www.exljbris.com/museosans.html

Lot

Source: http://fontfabric.com/lot-free-font/

Loki Cola

Source: http://www.dafont.com/loki-cola.font

Lobster

Source: http://www.impallari.com/lobster/

Are there any beautiful fonts that you think deserve a mention? Let us know in the comments.

This post was written on behalf of The Handpicked Collection, who offer gift ideas handpicked by experts

Preview of the fonts in the bundle:

1. Veer.com

Veer.com (one of my favorite sites because it’s beautifully designed and simple) is a, what I would call, a “High End” stock site. Veer doesn’t mess around. Their font selection is somewhat small, but very high quality, and they give away a free font every single month. All you have to do is visit each month and download the latest free font, which is usually a single font from a popular font family in their collection. Visit the Free Section and you’ll find one font to download for free. (I couldn’t link directly to a “free font” page because it doesn’t exist. You’ll have to find it in their free section.)

2. FontFont.com

FontFont.com is a popular type foundry that has a “Goodies” section. I’m not as frequent of a visitor to FontFont, so I’m not sure how often they update their free section, but there is some good stuff there now, including one really cool web font. (pictured above)

Myfonts.com

MyFonts.com doesn’t exactly have a free section, but many designers (more than you think) will give one version of their font away for free as ‘bait’ to get you to purchase the entire font family, or the ‘pro’ version. It’s more time consuming to browse, but you can find some good stuff there. Click on the link above or go to Myfonts.com and click on the “Free” tag in order to filter.

Conclusion:

Just a reminder, but make sure you pay attention to the license restrictions when downloading, and especially when using anything “Free.” Unlike BittBox, the majority of free stuff, in my experience, is either accompanied by a limited license, or used as bait. Never hurts to watch your own back. Hope you guys found this informative! Time for some free fonts to add to your collection :)

Contest Rules:

• All you have to do to enter is leave a comment. (tweeting is appreciated)
• Only comment once.
• 10 winners will be randomly chosen from the comments.
• You must leave an email address in order to win.
• Comments will remain open for 3 days.

1. Body Hunter

2. Outlaw

3. Monbijoux

The Mega Pack winners are: rcarmstrong, Terry Lightfoot, Lorraine, RobotMojo, Jenna, Matty L, Mitchell K, Praveen, Jason Drumm, Angi.

The Brush Pack winners are: Pedro, Jeremy, Angela, Chris Guimarin, werner, out00, Melissa, Nathan, Mechelle, Allan.

The Font winners are: Lorenzo, Robbie Lockie, Bianca, bogdan, bluejackal, katie, Carrie, Sara Batman, Dana, mantis25.

Contest Rules:

• All you have to do to enter is leave a comment.
• Only comment once.
• 30 winners will be randomly chosen from the comments.
• You must leave an email address in order to win.
• Comments will remain open until Tuesday, August 18th.

Photograph by ReefRaff.

Preview:

1. The Tools

I like to use India Ink and a primitive Bamboo Pens (above) to draw my characters, but you can even just use a pencil and paper if you like. You can get both the items pictured above really cheap (< $10 total) from your local art supply store or Hobby Lobby, etc.

2. Start Drawing

Take whatever tools you choose to use and start cranking out letter forms. It’s ok to mess up, just draw the letter again. But keep cranking them out until you’re happy with what you’ve got. I like to lay all of the finished ones out in front of me so I can see what I already have and what I still need. The squiggly lines are just where I got rid of some excess ink from the tip of the bamboo pen before sketching.

3. Scan

Next, I scan the images in at a relatively high resolution.

4. Bump up the Contrast

In order to get a better final result, I adjust the contrast of the scan. I typically convert my image to grayscale, then use Levels (Control/Command + L) to make the whites whiter and the blacks blacker. Then save as a high-res jpeg.

5. Open the Scans in Illustrator

I use an “outline font editor” (FontLab Studio) which is another way to say that the final product needs to be a vector. I use Illustrator’s Live Trace to vectorize the shapes. So next, I open the jpeg scans in Illustrator.

6. Live Trace

Vectorize your image using Live Trace to get the results your happy with, then hit “Expand.” So now you have something like below.

7. Ungroup

After you Live Trace, ungroup the objects.

8. Get Rid of the White Shapes

After ungrouping I use the Magic Wand tool, and click on any of the white space in and around the letters. This selects all of the white shapes at the same time, and then I delete them.

So now all that remains is the black shapes. Notice the bounding box. There is no more whitespace around the edges compared to just after live trace above.

9. Prepare the Font Editor

It’s now time to fire up the font editor of your choice. I use FontLab Studio ($649) but it’s not the only one. TypeTool is a $99 Font Editor from the same people who make FontLab Studio. If you’re not looking for anything fancy, that’s the one I recommend (Windows, Mac), and it’s affordable compared to other products on the market. FontForge is a freeware font editor, but I believe it’s Windows only.

Depending on which editor you plan on using, the next part might be a little different than your software, but you can get the general idea, and adjust accordingly. If you use TypeTool, it should be very similar, since the software I use is from the same company.

Create a new blank font file.

Go to File > Font Info.

Fill out the information that describes your font. Family Name, Weight, Bold or not, etc. This information is important and will be embedded in the file in it’s final form.

10. Copy/Paste

Start copying/pasting your characters (paths) one-by-one from Illustrator into their corresponding slots in your font editor.

11. Adjust

Adjust Each character’s paths to your liking in the font editor. You can always go back and make adjustments if you don’t get it right the first time. And again, I can’t go too deep into this if you aren’t using FontLab Studio, but I’m sure you can find some info in your software’s help section, or google :)

Here’s a peek at what one of my completed fonts looks like in the font editor.

12. Generate Your Font

Go to File > Generate Font….

Choose your format (.ttf will work fine for both Mac and PC) and Save!

Done!

Like I said, this isn’t the only way to do this, it’s just the way I happen to do it. You can draw your letters with the pencil tool directly in Illustrator if you feel like it. There are many different ways, I just wanted to share my process with everyone, since you’ve been wondering. I hope you enjoyed the tutorial :)

The Demo Version includes both upper, and lowercase A-Z:

Here’s a look at the characters. If you’re interested in buying the full version, you can see the full character map here, on myfonts.com

Here’s a look at the character set.

This is how it works:

Below, you’ll find a few tables with all of the characters slated to be a part of this community-created font. Items marked with an “X” have already been accounted for, everything else is free game. People (everyone besides me) can choose a character that they want to design, create a hand-drawn character, and email it to me in jpeg or tiff format to jhilgert00(at)gmail.com. I will then use my software (Font Lab Studio) and create a font from all of the individual submitted characters, and I’ll give it away for free, right here on BittBox. Bookmark this page if your are interested in contributing, I will be updating the list of characters often.

I can’t guarantee that your character will be used because there will likely be multiple submissions for the same character in between the time I update this page, but don’t worry, this is only the first of many BittBox Community Fonts.

Each person who submits a character used in the font will get credit, as well as a link. When the font is complete and I make the post to give it away, I will include the tables below in that post, with each character, it’s creator, and a link for each contributor, as a credit to everyone who participated. So, if you submit, please make sure to clearly state what name and URL you want included in the credits for the font in your email.

For this first run, I’m only including uppercase, lowercase, and 0-9. If the project goes well, we can expand the character set with the next community font :)

I’ll post thumbnails of the included characters as I receive them.

I’ll post thumbnails of the included characters as I receive them.

I’ll post thumbnails of the included characters as I receive them.

Here’s a look at the character set: