Typography for Beginners - Everything You Wanted to Know

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

It is the designer's responsibility to choose the correct typeface to best present the message. Good typographic design should go unnoticed.

Good typographic layouts should work together and flow. They should be balanced in size, shape and weight. Everything should be in proportion and fit together.

Basic Forms of Typography

There are several basic forms of typography. These are determined by specific characteristics of the typeface. A few examples are shown below.

Serif fonts are more traditional fonts and are identified by the short lines or finishing strokes at the line ends. The angles, thickness and widths can vary, and they are small.

Examples of Serif Fonts:

1. Georgia

2. Times New Roman

3. Palatino Linotype

Sans-Serif fonts have a more modern feel to them. As the name suggests, these fonts do not have serif lines.

Examples of Sans-Serif Fonts

1. Arial

2. Impact

3. Tahoma

The diagram below highlights the difference between serif and sans-serif fonts.

Script fonts are based on handwriting or cursive script. These are primarily decorative fonts where each letter is attached. They can be tricky to use effectively due to the large swashes or flourishes.

Weights and Styles in Typography

The weight of a font is specified by how thick the lines making up the letters are. They can be light, thin, regular, medium, bold, heavy and black.

There are generally three styles used in typography. These are italic, oblique and small caps. Italics and Obliques are often confused and thought of as the same thing. They are not. Obliques are slanted versions of the regular characters. Italics are slanted, but they are unique font character sets with their unique properties.

Letter Form Characteristics

All fonts and typefaces have unique characteristics. The combination of factors determines how well the fonts work with each other or if they clash.

The most important characteristics are :

• Baseline - this is an imaginary line upon which all the letters sit.
• Median - This is the height of the lower-case characters.
• Cap Height - This is the distance from the baseline and the top of the capital letters
• Kerning - This is the distance between two specific letters.
• Font Size - This is the distance in points from the top of the tallest ascender to the bottom of the lowest ascender. Within this distance, however, the median height can change. This is why some fonts look completely different in spacing and size, even though they have the same font size.
• Leading - This is the vertical distance between each line

Picas, Points and Inches

In typography, fonts are measured in points. A point is a tiny fraction of an inch. In one inch, there are 6 picas. Each pica is made from 12 points, so there are 72 points in an inch. A font set at 72 points will measure one inch when printed.

Combining Type

Combining types is an important concept. Font combinations should complement each other and work in harmony. Using too many fonts creates a confusing mess and visual blur. Sometimes, it's best to choose a typeface with lots of different variations, but when you need to choose different typefaces, follow these tips:

• Select similar historical periods with different features - i.e. two modern fonts or two traditional fonts. Refrain from mixing a calligraphic font with a modern font.
• Consider opposite typefaces - one traditional and one friendly.
• Typefaces with similar body height can work well as long as the styles are contrasting.

Contrast and Mood are two important concepts as well.

Contrast relies on combining typefaces based on weight, a straightforward way of creating typographic contrast. Weight plays an important role in determining contrast.

If you use one typeface, multiple weights will work very well to provide contrast and emphasis.

The final method is style and decoration. Generally, these are regular or italic fonts. You can mix in weights as well.

The mood is important to the way typefaces combine. Mood can be anything from formal to casual, fun to serious, modern to classic or anything in between. This can be a minefield as some fonts have different properties which can clash despite having different or similar heights and spacings.

5 Rules For Better Typography

1. Concentrate on how the Body Text looks. This is because there is more body text than anything else. It takes up most of the space on the page. Start the project by making the body text look good, then worry about the rest later.
2. Point Size - 10-12 points for body text or 15-20 pixels on the web. Remember that not all fonts look the same size at a given size, and you may need to adjust to compensate.
3. Line Spacing - 120 - 145% of font size.
4. Line Length - 45-90 characters per line.
5. Font Choice - Use professional fonts - avoid Comic Sans!