Typography 101: The Basics

3:27 PM



Typography plays a HUGE role in graphic design, so I want to go over the basics of typography that are important in design work. Developing skills in typography can take quite some time, and believe it or not, it can be one of the hardest things to get right.

There is more to good typography than just choosing fonts and making copy look good. Good typography is also about making things legible and readable; making layouts aesthetically pleasing; and evoking well-considered reactions in your targeted audience.

So, on to the basics. 

THE DIFFERENCE BETWEEN TYPEFACE AND FONT
A typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.). A font on the other hand is one weight or style within a typeface family (such as Helvetica Regular).

TYPEFACE CLASSIFICATIONS

There are thousands of different typefaces and fonts available to designers, writers and printers. Due to the overwhelming number of type available, it makes specific classification of every one nearly impossible. However, it is important to have an understanding of the basic styles of typefaces to help narrow down the research and selection of the correct typeface for your specific project.

Two of the most common typeface classifications are serif and sans-serif. In typography, serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols in a typeface. A sans-serif typeface is one that does not have small projecting features at the end of strokes.

Serif fonts are widely used in traditional printed material such as books and newspapers. Many magazines employ sans-serif typefaces because they they are "cleaner", regardless of any impact on readability from the lack of serifs.

TYPEFACE ANATOMY
In the world of typography, type designers have a specialized vocabulary to talk about the different parts of letters. Becoming familiar with this terminology will make it easier to communicate about typefaces and their characteristics. It will also help train your eye to notice the details that set what seem to be similar typefaces apart from one another.

THE LINES
A line of text has at least five lines that it can be aligned to. These horizontal lines act as guides for capital letters, ascenders, lowercase letters and descenders.

Baseline: is where the feet of your capital letters sit.
Cap Line (or Cap Height): indicates the height of capital letters from the baseline to the top of caps.
Topline (or Ascender Height): is the part of a lower case letter that extends beyond the x-height such as the letters h, k,and i.
Midline (or x-height): indicates the height of the lowercase x in any given typeface, thereby all lowercase letters, excluding ascenders and descenders.
Beardline (or Descender Height): is the part of the letterform that falls below the baseline such as the letters p and y.

THE MEASURE 

In typography, the measure is the length of a line of text. There is an optimum width for a measure and that is defined by the amount of characters in the line of text. For a single-column design, the measure should ideally lie between 40-80 characters. Many typographers consider the perfect measure to be 65 characters.

HERE'S A TIP
When reversing color out, e.g. white text on black, increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines for better readability.

TRACKING

Tracking is adjustment of the space between groups of characters (words). This is called the letter-spacing property in CSS.

General Rule of Thumb:
The shorter the measure, the tighter the tracking; the opposite holds true. The longer your measure the more loose your tracking needs to be.

Other variables must be considered, of course. Your choice of typeface, the background color, the number of columns and the surrounding design elements will influence the readability of a block of text.

KERNING

Kerning is the adjustment of space between individual characters.

Kerning affects the space between two specific letters. Some character combinations might require more kerning than others to avoid collisions.

In the example above, I increased the spacing between the letters "W" and "i" as well as "P" and "o".

LIGATURES

When parts of the anatomy of characters either look too close together, they can be combined in what are called Ligatures. These can be for functional or decorative reasons depending on how obvious the clash is. Mostly this is only an issue with serif fonts although sometimes sans-serifs will need ligatures to be set too

Ligatures should be used with extreme care or avoided altogether, especially if you intend to adjust the overall letterspacing of the text containing these combinations. Since a ligature is a single character, its internal spacing won’t change when you tighten or open up the letterspacing.

LEADING
Leading is the space between lines of text. It is generally measured from baseline to baseline and expressed in points. In word processing programs leading is known as line spacing; line-height in CSS. It can affect how readable long blocks of text are.

Leading’s role in typography is to generate sufficient space between the lines to make it readable. As with all matters of typography, it is a balance between reading comfort and aesthetic style.

When you decrease leading, lines get closer to each other, making a block of text appear more compacted. Low amounts of leading can increase the pace of the reader. Whereas increasing leading can reduce the pace of a piece of text as it introduces more white space between the lines.

General Rule of Thumb:
Your leading should be wider than your word spacing. When the balance is correct, your eye will move along the line instead of down the lines. If your measure is wider than the guidelines then increase the leading. This will have the effect of increasing legibility. Your leading should increase proportionally to your Measure.

HERE'S A TIP
The more words you have in a line, the more leading you will need to maintain a pleasurable reading experience. If you increase word-spacing (the space between each word), you’ll have to increase leading to improve the readability of the text block.

ALIGNMENT
Generally text should be left aligned, simply because we read that way. Only consider centering or right aligning text if it is a small amount, such as a heading or caption.
Justifying text (straight edge on both sides) should also be used in moderation. It may look neat in some situations, but too much of it will make a layout look rigid. Additionally, justifying in a small column size can cause irregular spacing as between words as the software attempts to adjust your text to fit.

HYPHENS, EN DASHES and EM DASHES
Who knew those little horizontal line characters could cause so much confusion. So, which one to use when?

Hyphens are used to bring together frequently used word combinations, in phone numbers 555-1234, and when merging two last names.

Examples:
first-class
(800) 555-1234
Brown-Black

The en dash is the width of an n. The en dash is used for periods of time when you might otherwise use to. The en dash is also used in place of a hyphen when combining open compounds.

Examples:
1990–1994
August–May

North Carolina–Virginia border; a high school–college conference.

The em dash is the width of an m. Em dashes may replace commas, semicolons, colons, and parentheses to indicate added emphasis, an interruption, or an abrupt change of thought.

Examples:
You are the friend—the only friend—who offered to help me.
Never have I met such a lovely person—before you.

RAG
This is the uneven vertical edge of a block of type, most commonly the right-hand edge, as in the case of left-aligned text. It is important to pay attention to the rag, as it can affect readability in a big way. If the rag is not very good, it can be very distracting on the eye, as you read down a column. It can be fixed by reworking the line breaks, or by editing the copy.

WIDOWS AND ORPHANS
 
When a word or significantly short line is left at the end of a column, it is called a Widow. If the same is left at the top of the following column, it is called an Orphan. Widows and orphans are considered bad typography as they cause distracting shapes in a block of type. They can usually be fixed by reworking the line breaks in the column or by editing the copy.

Happy Freelancing!

You Might Also Like

2 comments

  1. Thank you for such a great post! Specifically, I enjoyed readinbg about the difference between fonts and typefaces (as u know, lees people care about this issue) and serif and sans serif fonts classifications! Indeed, great article!

    ReplyDelete

instagram