Web Typography Collection – Great Tools, Books, Resources and Articles

Choosing the right font and typography for your web projects is an important part of creating the desired aesthetic. There are many styles, trends and resources available to designers who are looking to create a cohesive, attractive and legible design through the use of high quality fonts, typography creation tools and tutorials pertaining to appropriate font usage and creation.

Along the way, designers inevitably begin to learn the history and importance of typography and typeface in all elements of design dating back to the advent of movable type.

Web Typography Collection – Great Tools, Resources and Articles
Image credit: Bigstockphoto

Web Typography Tools, Resources and Articles

This collective of typography resources is sure to help both fledgling amateur and seasoned professional designers find optimum fonts, learn about font and typography creation, become inspired in their use of typography and learn new typographic skills and concepts.

1. Lists of Web Fonts, Free and Premium

Fonts

2. Font Repositories and Downloads

Font Repositories

  • 1001 Free Fonts: One of the best, most popular and longest lived font resources on the Internet, serving up free fonts for every design need.
  • Font Squirrel: An excellent selection of fonts that are completely free for commercial use.
  • My Fonts: A massive collection of premium fonts with a wide variety of styles and uses.
  • Urban Fonts: A site offering a multitude of fonts and dingbats in both free and premium form.
  • Font Shop: A premium font site showcasing a large variety of adaptable designer fonts.
  • Font Space: A varied collection of free downloadable fonts suitable for a wide variety of web based projects.
  • Font Cubes: A collection of free and premium fonts and dingbats with excellent category sorting.

3. Tools

Typography Tools

  • Your Fonts: A font generating program which will allow the user to create a font based on his or her handwriting within minutes for only $9.95.
  • Fontstruct: A free, simple to use and intuituve editor that allows users to create, share and download their handmade fonts for free.
  • Bit Font Maker: An extremely lightweight web utility which allows the user to create, view, save and use pixel based fonts for free.
  • Type Light: A Cr8software solutions freeware editor which allows the user to create, change and convert TrueType, OpenType and PostScript fonts for limited commercial and personal use with licensing available for business use.
  • Font Creator: The most popular font editor in the world. Retailing for $79.00, Font Creator has an easy to use interface which allows for the creation and redesign of fonts as well as kerning editing and other exciting features.
  • Font Lab: A font creation and editing program which is Intel native and compatible with Mac OSX 10.5 and later.
  • Font Expert: A program which allows you to efficiently view and manage your growing font collection.

4. Resources

Fonts In Use
A website which showcases typography at work in design to help designers understand how to use typography in a cohesive way.

Fonts in Use

I Love Typography
A site about typography, type design and other relevant concepts relating to typeface as a design element.

I Love Typography

Typographica
Reviews, books and commentary on modern typeface and its use in design, literature, logos and other elements.

Typographica

Typedia
A wiki of fonts and font types as well as histories and backgrounds of different typefaces.

Typedia

Designing With Type
A site dedicated to the art of designing with type as an artistic medium.

Designing With Type

Essential Typography Tutorials and Resources
A collective of resources for web typography enthusiasts.

Essential Typography Tutorials and Resources

5. Articles About Web Typography

6. Books

Books

  • Typographic Web Design: A guide to understanding the use of typography in combination with HTML and CSS.
  • Mastering Type: A retrospective guide to the use of typeface and fonts in both printed and web elements.
  • Fluid Typography: A guided lesson on how to use typography in modern design in order to create fluid imagery and an appealing design aesthetic.
  • Type Rules: Fundamental principles of the use of typography in a professional design context in order to help designers make appropriate typeface choices for optimum results.
  • Thinking with Type: The definitive guide to using typography in visual communication, from the printed page to the computer screen. This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering.
  • The Typographic Desk Reference: This book comprised of a thousand facts on the form of Latin-based writing systems.
  • Logo & Font Lettering Bible: This book teaches you to become the kind of designer who creates logos, fonts and lettering of your own.

7. Typographic Inspiration Gallery Sites

TYPEinspire
A gallery of beautiful typefaces in use to inspire designers.

TYPEinspire

Artists Inspire Artists: Typography Inspiration
Typographical art in many contexts showing the effect that appropriately chosen typography can have on a piece of art.

Artists Inspire Artists

From Up North: Typography Inspiration
Beautiful web, print, architectural and logo typeface designs to showcase words as art.

From Up North

Typography Served
A gallery of typeface logos, illustrations and effects as aesthetic inspiration for designers.

Typography Served

8. Tutorials

Create Your Own Font
A Wired tutorial on how a user can create their very own font from scratch.

Create Your Own Font

How to Create a Steampunk Type Treatment in Photoshop
Creating a steampunk typography effect using Adobe Photoshop.

How to Create a Steampunk Type Treatment in Photoshop

Three Simple Elegant Headers Text Effects
A guide to creating elegant and classic headers using appropriate typefaces and type effects.

Three Simple Elegant Headers Text Effects

Using Light and Shade to Bring Text to Life
Graphical light and shading tutorial to dramatize the effect of typography in a web design.

Using Light and Shade to Bring Text to Life

Graffiti with Photoshop
Creating a graffiti text on an image using typography and Photoshop.

Graffiti with Photoshop

9. Videos

Typographic Design in the Digital Domain with Erik Spiekermann & Elliot Jay Stocks

Otis College: Typographic Terms

Tim Brown - More Perfect Typography

Jason Santa Maria - On Web Typography

Still Not Enough?

A web designer has many different options regarding what they can do with typography both stylistically and in print. There are many resources available to designers which will allow them to use fonts in new and creative ways, as well as exercise the possibility of creating their very own personal text brand.

There are hundreds of thousands of typeface variations available both for free and at cost for aspiring designers as well as galleries loaded with inspirational images, books full of useful information and resources to help designers get started with better understanding the use of typography in design.

Typography is an essential design element, and turning it from simple words on a screen to a work of art is the difference between a mediocre web designer and an artist. While this list is full of great resources, it is by no means exhaustive.

The Internet is a great big place full of all sorts of great typefaces, resources, tools, tutorials, books and so much more.

If you have a great typography resource to share with us, please do.