Quick Tips on Fonts and Typefaces

In this post I want to go over a conglomeration of short tips and information on fonts and typefaces. First off, many of you are wondering what is the difference between a “typeface” and a “font”.

The typeface is the design of the alphabet, the shape of the letters, numbers and punctuation. The font is the digital file that contains or describes the typeface. Essentially, the font is what you actually use on the computer, and the typeface is the design the typeface designer actually made.

 When trying to pick your font, font size, and where to put it, it is good to use lorem ipsum in your page if you don’t have any real content yet. You usually use this for large paragraphs of text, not just titles. Using this for paragraphs helps you see what the site looks like without waiting to put in the real content.

There are such things as typeface families. They are groups of typefaces that are meant to be used together. There are 5 major families:

1) Geometric (ex. Futura)

2) Humanist (ex. Myriad Pro)

3) Old Style (ex. Bembo)

4) Transitional (ex. Baskerville)

5) Modern (ex. Bodoni)

6) Slab Serif (ex. Lubalin Graph)

You can see some examples of the families in the middle of this article.

A tip for when you’re using multiple fonts is that you should make the difference between them drastic, not subtle. For instance, don’t use Verdana and Tahoma together because they are too alike. Try mixing fonts from different families for a more interesting look.

Another tip for when you’re trying to make an emphasis in your type, try to use only one type of emphasis. For instance, to make a word stand out either change the color, make it bold, italicize it, make it larger, or make it a different font. It’s usually not necessary to do them all.

When talking about letters, there are a few terms one may like to know:

The x-height is the height of the lower case letters, disregarding the ascenders ( like on an “h” or a “t”) and the descenders (like on a “g” or “y”).

The baseline is the imaginary line that the letters sit on.

The cap-height is the height from the baseline to the top of capital letters.

The counter is the white space that is enclosed inside letters such as an “o”, “a”, and “d”.

The eye  is much like the counter, but it specifically refers to the white space in an “e”.

The leading is the vertical space between lines of text, from baseline to baseline.

There are many more terms that apply to typefaces. If you would like to learn more, go to http://www.fontshop.com/glossary/ .

The last and probably most important bit about fonts is there are no hard-pressed rules, there are only suggestions and guidelines. These tips should be taken as such: tips. Not lessons to live by. In the end, it is your design so do what you think looks best! But you should always keep in mind to keep to your “brand identiy”, and here is a blog by Molly McCarthy that will help you do this.