Typography Essentials – Free Fonts, Tools and Tutorials

Aug
3

8 Comments - LEAVE A COMMENT

Another important aspect in web design (combined with the right color combinations and Photoshop essentials and brushes) is getting just the right typography for your design. There are many, many free fonts available as well as tools to build your own. Not only that but you can use free online resources to determine the name of that elusive font you’ve seen used elsewhere and want to grab it for yourself.

Once you find the font perfect for your project then you have to know how to use it. While some of the best resources about learning more about typography are books (Thinking with Type and The Elements of Typographic Style are two of my favorites) there are tons of online articles and tutorials written by people in the design industry that will help you better your typography.

Identifying a Font

Don’t you hate it when you’re to work on a project where you don’t have access to the original design files, and the client doesn’t know the name of the font in their logo? No worries, these sites will help you find that font!

What The Font - Find a font by imageWhatTheFont – is a search engine that allows you to upload or link to an image and it will bring up results for you of several similar fonts so you can compare and match. For example I linked to the new search engine cuil‘s logo. I went through the process of refining the search (adding the characters isolated to each letter in the images) and was presented with a list of 30 possible matches. Part way down I determined that the font was Myriad Pro-Black – as you can see the image you upload scrolls the page with you for easy matching.

Font Lover – is a livejournal community that allows people to discuss various aspects of fonts and typography and it’s highly knowledgable font obsessed following can help you define fonts you’ve seen and find a similiar or the exact font used. Just upload a good quality image of the font you are looking for and they will have at it!

Identify - Find Out What Font
Identifont – this site allows you to answer a series of questions and it will try to narrow your results by process of elimination. I went through the Q & A to see how well it did, using Trebuchet MS as my “answer”. To be “serious” about this test I used a small sample of text (two long sentences) and answered the questions as applied only to that sample. So if it asked about an upper case “J” which wasn’t present- as well as any other unpresent letters – I clicked the “not sure” answer. (In a lot of cases you will have very little character samples to go with). After answering all the questions I was given the font “Alwyn” as the most possible answer. Out of the total of 7 fonts, Trebuchet MS was not present. I’m sure this site may work for others, but from my simple test I didn’t receive very reliable results. (Alwyn and Trebuchet MS are not that similar!)

Free Fonts

Finding the perfect font for your project can be a headache with so many choices available. Thankfully these services allow you to browse by the fonts characteristics aiding your search for the perfect font.

1001 Free Fonts 1001 Free Fonts – one of my favorite font sites since day one of my foray into design. They offer free fonts categorized by category (“Brush”, “Western”, “3D”, etc) and you cna browse alphabetically. You can also search for a font by name (should you know it). I’m not sure what their total number of fonts are, but they had “1001” back in 1998 when they launched, so I’m guessing it may be a bit larger now! The only unfortuante thing is that they are constantly trying to sell you the “Ultimate Font Pack” or commercial fonts for sale.

Dafont – offers categories and subcategories to browse by, latest fonts, top fonts, search and alphabetical listings and brags that they have 8031 fonts (and growing!). You can preview the font by entering you own sample text as well as adjusting the approximate size (tiny, small, medium, large). Also allows comments on the fonts by other users.

SimpletheBest Free Fonts – is another site just like 1001 Free Fonts and dafont, but offers a little twist – the font preview is in color and also includes a very brief description (informative stuff like if the font is only lower case of it it includes international symbolds, etc).

Fontleech – was a blog that updated sporatically from 2005-2007 linking to various free fonts all over the internet of very high qualities. I’d definitely recommend browsing through the archives and finding some new favorites.

Anivers Free Font 40+ Excellent Free Fonts for Professional Design – Smashing Magazine put this list together in 2007 of over 40 great font that you can use for free in your professional work, where I found one of my favorite fonts Anivers*. Smashing Magazine also provides a great series called Free Fonts of the Month, linking you directly to the months best free fonts!

Typography Tutorials and Articles

You found the found you need for your project… now you’ll need some inspiration and direction on how to use it!

I Love Typography – Comprehensive site dedicated to typography. Publishes articles on font finds, history of fonts and typographical styles and so much more. Definitely worth an add to your RSS feed collection.

Abuzeedo frilly typography font Super Cool Frilly Bits Typography – Abuzeedo.com provides a fantastic tutorial on how they added frills to match their logo with a grunge like background.

40 Killer typographic posters, photoshop effects and tutorials 40 Killer Typographic Posters, Photoshop Effects and Tutorials – Typography by example. 40 amazing, beautiful, stunning and “killer” examples for you to learn and drawn inspiration from.

Typography Matters – A List Apart contributor Erin Kissane explains about an often overlooked item of online typography – typographically correct punctuation.

Down With Helvetica: Design Your Own Font – The New York Times has a decent article about how more and more people are turning away from readily available free and commercial fonts and creating their own.

50+ Fonts for Big, Bold Headlines – A great list of FREE fonts available for download that will help you construct that perfect headline that pops out grabbing readers.

Web Style Guide – Everything you will ever need to know about typography on the web.

5 Simple Steps to Better Typography – Mark Boulton provides a series of five articles explaining five very simple things you can do to achieve better typography. This is the first of the series, before the comments is the links to the other four “chapters”.

Better CSS Font Stacks – Nathan of Unit Interactive has written a great article that no CSS coder/designer should miss out on. He explain how we can easily make better “font stacks” (a.k.a – the list of fonts that the browser should display for elements).

8 Fonts You Probably Don’t Use In CSS But Should – Tahoma lover? Century Gothic fan? Here’s your lead-in to start using your favorites in your CSS.

Typography Tools

Can’t find the perfect font? Create your own!

FontStruct – Design and create your very own font family – free!

How To Create Your Own Font(s) – I Love Typography brings you an fantastic article on how you can make your own font and the tools your need to start.

Jump to Comments

8 Responses to Typography Essentials – Free Fonts, Tools and Tutorials

  1. mohsen says:

    Thanks!
    I hadn’t seen some of these resources.

  2. Angie Bowen says:

    Very nice and helpful list. I’ve bookmarked it to come back to.

  3. Lindsey says:

    Thanks, I know how hard it can be to find good quality typefaces, font resources and other typographical material when it comes to web design so I decided to put together this list to aid anyone who might have similar interests and questions that I have had.

  4. Abdulqadir Zaveri says:

    Thank you!

  5. Marnie B says:

    I recently discovered What the Font after being completely unimpressed with Identifont 50 times over… What a tool What the Font is! I’m impressed.

  6. Fume Hood says:

    thanks for sharing the greatest professional designs i will use these on my upcoming design
    thanks alot

  7. I entdeckt Ihr Blog site auf Google und test a paar Ihrer frühen Beiträge. Weiter zu pflegen die sehr gute betreiben. I gerade zusätzliche Ihr RSS-Feed zu meinem MSN Information Reader. Suche Vorwärts bis lesen mehr in eine Weile! …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>