Typeface vs Font
A font is a family of typefaces. For example, Franklin Gothic is a font which contains the typefaces Franklin Gothic Book, Franklin Gothic Medium, Franklin Gothic Demi, Franklin Gothic Heavy and so on.
- What is Graphic Design?
- Graphic Design Elements & Principles
- Colour Theory
- Introduction to Adobe Photoshop
- Introduction to Photo Editing
- Creating Web Designs in Photoshop
- Introduction to Adobe Illustrator
- Tracing Artwork in Adobe Illustrator
- Logo Design
- Introduction to Adobe InDesign
- Introduction to the Printing Process
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
Typography is an art form in itself. Words are around us everywhere we look. Somebody has designed the way that text looks, the typeface, alignments, colours, spacing and so on. Typography is important in order to convey a message. The message is not only contained within the words but the way those words are presented. In the same way that colour does, a typeface can evoke an emotional response.
A message can be friendly
A message can be aggressive
A message can be traditional
A message can be modern
A message can be feminine
A message can be masculine
It is the designer's responsibility to choose the correct typeface to best present the message. Good typographic design should go unnoticed.
Typeface vs Font
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.
There are several basic forms in typography. These are determined by certain 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:
• Times New Roman
• Palatino Linotype
Sans-Serif fonts have a more modern feel to them. As the name suggests these fonts are without the serif lines.
Examples of Sans-Serif Fonts
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
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 entirely unique font character sets with their own unique properties.
Letter Form Characteristics
All fonts and typefaces have unique characteristics. The combination of characteristics 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 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 is an important concept. Font combinations should compliment each other and work in harmony. Using too many fonts creates a confusing mess and visual blur. Sometimes its best to choose a typeface with lots of different variations, but when you need to choose different typefaces, follow these tips:
- Select similar historical period with different features - i.e. two modern fonts or two traditional fonts. Don't mix 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 is a straight forward way of creating typographic contrast. The role of weight plays an important role in determining contrast.
based largely on weight
is a straight-forward way
of creating typographic contrast
If you are just using one typeface, then multiple weights will work very well to provide contrast and emphasis.
Multiple weights of a
single typeface will also
The final method is style and decoration. Generally, this is regular or italic fonts. You can also mix in weights as well.
You can create contrast
within a typeface by
using different styles
The mood is vital 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 to Become a Better Typographer
- Concentrate on how the Body Text looks. This is because there is more body text than anything else. It takes the most space on the page. Start the project by making the body text look good, then worry about the rest later.
- Point Size - 10-12 point for body text or 15-20 pixels on the web. Remember that not all fonts look the same size at a given size you may need to adjust to compensate.
- Line Spacing - 120 - 145% of font size.
- Line Length - 45-90 characters per line.
- Font Choice - Use professional fonts - avoid Comic Sans!
Last updated on: Tuesday 30th October 2018