Type Rendering on the Web

How to Make a Font, Tutorials Tools and Inspiration

The most major things that constitute a complete web design is the layout, colors, imagery and font. All these elements go hand in hand to make a successful web design. However, font is the most complex of all the elements. This complexity comes from the fact that in fonts you have such a large variety to choose from and yet, sometimes even the large variety doesn’t work and you find yourself looking for something special and well-suited.

It often happens to certain web and graphic designers that the frustration of finding the right font urges them to develop one on their own, but having no knowledge of how to make a font adds to their frustration even more. To help the designers who want to develop their own font here are  How to Make a Font, Tutorials Tools and Inspiration. This combination of tutorials, tools and inspirational material will help you gain much knowledge to create a font yourself.



How to Make a Font, Tutorials

How to Make a Font in Windows

Create Font in Easy Steps

Ultimate Guide to Web Type

Easy and Useful Font Creation Tips

How to Make Hand-drawn Font

So You Want to Create a Font (Part 1)

So You Want to Create a Font (Part 2)

All About Font Creation

How to Kern Type Perfectly

Type Rendering on the Web

Making Geometric Type Work

Helpful Tools for Make a Font


An implementation using JavaScript and HTML5 canvas elementm which is meant to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.


Here is a nicely developed lightweight and easy-to-use jQuery plugin for radical Web Typography.

Web Font Specimen

Real web type in read web context. Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Prepare your own web font specimen in three easy steps.

Type Folly

TypeFolly allows designers to easily create beautiful, HTML/CSS3 “type follies”. The tool gives designers the freedom to create beautiful type compositions and test new font combinations. TypeFolly supports the following CSS properties: font-family, font-size, color, letter-spacing, word-spacing, font-style, font-weight, text-decoration, text-align, z-index, line-height, width, height, opacity, moz/webkit-transform, text-shadow and font-face.

Awesome Fontstacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!


Here is a site you can turn to in case you’re wondering what font family a particular font type belongs to. Preview available as well.

Some Unique Fonts for Your Inspiration

Article written by:

Fasih Khan is a 'new media' apprentice with a relatively rare skill set. Apart from blogging, he loves to socialize and be with animals.

Leave a Reply

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