Fonts 101 – Tips, categories, tools, tutorials and more

Text, typography, fonts, typos… This is a complex world that all designers are involved in. Today we’re going to talk about this important communication tool: typography. We’ll cover aspects like anatomy, categories, adjustments, tips about where to find them, useful tools, tutorials and a lot of other resources and information.


Here is a simple representation of the most important parts of a type anatomy, such as serif, ascender, descender, counter, x-height and more.



Most of the (Latin) fonts can be classified in one of these categories. Let’s see some definitions and characteristics.

Old Style
Old style fonts are based on antique written with feather pens. They usually present low contrast between thin and thick strokes, diagonal axis and angled serifs.


More mechanic than the previous one, the modern types still have serifs, but thicker ones now. Big contrast between thin and thick strokes, vertical axis and straight serifs.


Slab serif
The types becomes thicker, and so do the serifs. In this style, there’s too little or no stroke contrast.


Sans serif
This kind of types has no serif and no big stroke variations.


The script fonts try to simulate different kinds of handwriting. They can be based on brush, pencil, pen, ink and other kinds of writing.


Any kind of different, irregular, funny or exaggerated fonts can be called decorative. They are mostly used for titles and solo words, never for long text.



There are some adjustments that make a text more legible and harmonic. We’re talking about leading, tracking and kerning.

This is the space between lines. The default leading in general is 120% of the cap height, which means that there is a little space between the lines. If you need a lighter text, easier to read you can increase the leading. If you have a small area for your text you can make adjustments decreasing the leading, but be careful to keep legibility.


Tracking and Kerning
Tracking refers to the space between all characters, while kerning refers to space between specific characters. The second one is a fine adjustment, specially used for titles or logos. The image below shows different tracking adjustments:


This other image represents the variation of kerning values:



Some simple tips for your layouts: Alignment, Contrast, Proximity.

You can use any alignment, as long as it’s the adequate to the layout. Long texts, for example, should not be centralized, it makes the reading a lot more difficult and boring. You can try left alignment or a justification, but don’t let the space between letters or words be too big for justified texts.

One of the most important principles to make a text more interesting and hierarchical is contrast. Titles should be pretty different than the text. Even using the same font, you can set a bigger size and choose a different family like bold or italic. If you are going to use different typefaces, be sure that they have contrast. Don’t use different serif fonts in the same layout. Make the difference evident.

The words and texts from the same “category” should be together. Like we see in business cards, for instance, the contact information is not spread through the card, it’s together as a group.


For creating and working with fonts.


Powerful tool to construct your own font online.



Transform your handwriting in a font.


Your Fonts

Transform your handwriting in a font.


Type Tester

Visualize and compare typefaces on screen.


What the font (My fonts)

Useful tool to find fonts simply uploading an image.


Font Exlorer X

This one is not an online tool, it’s a great font manager from Linotype.


Font Lab

The Font Lab software allows you to edit and create fonts.



A selected list of sites for comercial and free fonts.



9 Responses to Fonts 101 – Tips, categories, tools, tutorials and more

  1. gaz - website design April 15, 2009 at 1:14 am #

    i’m fonted out after reading that! got a bit of a headache! there are so many resources to get fonts, create your own fonts i never knew existed. i wondered if snap2objects could help me with a small problem? i need to get the font Din Schriften but i am too tight to pay for it! do you know of any similar free fonts?

    sorry but i have just no money!

  2. Aartje Smith April 16, 2009 at 6:34 am #

    Thanks! This is just exactly what I needed.

  3. mao April 16, 2009 at 1:59 pm #

    @Aartje You are very welcome

  4. mao April 16, 2009 at 2:30 pm #

    @Gaz Hi I was trying to find a free version of the Din Schriften but did not have any luck sorry :(

  5. gaz - website design April 17, 2009 at 1:05 am #


    thats ok. i love the font so much that i just might stump up the cash!!!

  6. nick August 2, 2011 at 1:37 pm #

    I’m a little late, but just wanted to let you know that this is an amazing article. Well written, constructed, and with great links and examples. I’m bookmarking this page for sure.

  7. mao August 20, 2011 at 7:06 am #

    @nick glad you found it useful :)

Powered by WordPress. Designed by Woo Themes