Make Lemonade

The Basics of Typography

General, Tutorials
The Basics of Typography

An introduction to Type: Framework, Anatomy and Classification.

Typography is the art and technique of arranging type in order to make language visible. Until the emergence of the Digital Age, typography was considered a specialised field performed by a range of visual artists and technical specialists. With the digitisation of type and increasing accessibility of publishing platforms, typography has been opened to almost everyone, regardless of skill level. Whilst typographic arrangement within a design should carefully consider a wide range of stylistic and technical options, in practice it can often intimidate, or worse – be disregarded, because of a lack of understanding the basics. The Basics of Typography aims to introduce terminology and concepts to new practitioners, or refresh the knowledge of professionals.

Typeface vs font.

A typeface is a set of typographical symbols and characters. It references the actual design of an alphabet and includes the letters, numbers and symbols that make up that design.

A font, in comparison, is traditionally a complete character set (or collection) within a typeface. A printer wanting to use a specific typeface, like Baskerville, would order it in the character sets they required. Typically this would mean the printer would buy sets in certain sizes (e.g. 18pt, 24pt, 32pt) or styles (e.g. regular, bold, italic). These individual sets were known as fonts.

In contemporary usage, a font is more commonly accepted as the digital file which contains a typeface. Much like a small piece of software, a font enables the use of a typeface by telling the computer or printer how it should be displayed and printed. For this reason, many font formats can exist of the same typeface. Common font formats are OpenType, TrueType and PostScript.

A face, or font face, is one of the styles within a typeface family. For example, the italic, bold and regular styles of the Helvetica family are each an individual face. The term ‘face’ has somewhat fallen into obscurity, however it still tends to be used interchangeably with ‘font’.

A family is a collection of faces that are designed to be used together. The range of available faces in a family is determined by the typeface’s designer. Typical families can include regular, italic, bold and bold italic versions of a typeface

Typeface Framework

With the exception of some handwriting styles, most typefaces are designed to a typographic stave of horizontal lines. These lines allow conformity within a design acting as guides for the vertical lengths of the elements within individual letterforms.

The Basics of Typography

From the bottom up, the guides are as follows:
  • Beard line: the bottom rung defines the limit of the length of the descenders of a letterform. Descenders are the portions of a letterform which extend below the baseline.
  • Baseline: The baseline is the line on which the typeface sits. It is also the line from which leading is measured.
  • Mean line: Traditionally, the mean line (or mid line) marked half the distance between the baseline and cap height. Today, the mean line is generally used in conjunction with the baseline to denote a letterform’s x-height. There have been criticisms in recent years of the misuse of the mean line for this purpose. Purists argue in preference of the traditional definition and that consequently, an x-height may sit either above, or below, the mean line depending on the design (REF that chick). (See X-Height within this article.)
  • Cap height (cap line): The line to which capital letterforms extend above the baseline. Specifically, cap height refers to the height of capital letterforms that are flat. Rounded capitals such as O, or pointed letters like A, may present an overshoot. (See Overshoot within this article.)
  • Ascender line: In many typefaces, the ascenders of their letterforms reach higher than the capital letters. The ascender line therefore defines this height.
  • X-height: Literally, x-height refers to the height of the lowercase ‘x’ within a typeface. The x-height is used as a height guide for the main body of all lowercase letters in that face.

The Anatomy of Letterforms

A number of common characteristics between typefaces (and individual glyphs within a typeface) have allowed for an extensive lexicon of specific terminology to develop within typography. Even a basic understanding of some of the general letterform attributes can aid in typeface identification and professional development.

Stem

Stem: The main, typically vertical and anchoring stroke of a letterform, excluding any serif. If the stem is of a similar weight to other strokes in the letterform, it is said to be ‘low contrast’. If there is a significant difference in weights between strokes, a face is said to be ‘high contrast.

Cross bar: A horizontal (or close to it) line in a letterform. Unlike an ‘arm’, it is connected to a stem or stroke at each end. Similarly, it differs from a ‘cross stroke’ because it it doesn’t usually intersect or cross over the stem. The positioning, thickness and slope of the bar is a key identifying feature of many type designs.

Cross stroke: The horizontal stroke which crosses the stem of a letterform.

Bowl

Bowl: the curved part of a letterform that forms an interior space called the counter. The shape, size and counter of a bowl can affect readability and is an identifying factor for some typefaces.

Counter: The enclosed or partially enclosed curved negative space of some letterforms. The shape and size of the counter can affect edibility and is an identifying factor for some typefaces.

Hairline: The thinnest stroke found in a typeface that contains strokes of varying widths.

Ascender

Ascender: A vertical stem on some lowercase letters which extends above the x-height is known as an ascender. Some ascenders extend beyond the cap height and those typefaces with equally long descenders may require additional leading for readability.

Descender: The portion of a lowercase letter that extend below the baseline is known as a descender. The length and shape of descenders are typical distinguishing features of a typefaces.

Spine: The connecting curve found in the letter ‘s’.

The Basics of Typography

Link: The curved stroke that connects the bowl and loop of a double-storey ‘g’ is called a link.

Loops: Found sometimes on lowercase ‘g’, the loop may be fully or partially enclosed.

Ear: Similar to a serif, an ear is a decorative flourish, usually found on the upper right side of a bowl in some letterforms. The distinctive nature of ears allow this to be an identifying feature of some typefaces.

Arm

Arm: A horizontal (or sloped in the case of the letter ‘k’) stroke in a letterform which does not connect to a stroke or stem at one or both ends.

Terminals: Most consider terminals to be the curved end of a stroke which doesn’t include a serif. More broadly, a terminal can be considered the curve of tails, links, ears and loops. There are a number of classifications of terminals including:

  • Ball – the combination of a tail dot and hook curve
  • Beak – the sharp spur or beak at the end of a character’s arm
  • Teardrop – the drooping tear-shaped ends of some strokes.

Tail: The descending, often decorative stroke of a letterform.

The Basics of Typography

Shoulder: A curved stroke which originates from a stem and forms the beginning of a leg of a character.

Axis: The imaginary line drawn from top to bottom in a letterform, used to measure the angle of stress in glyphs with strokes of varying thickness. A completely vertical axis indicates a zero (0) vertical stress. When angled left or right, the axis is said to have a positive or negative stress.

Tittle: the dot on top of some lowercase letterforms.


Typeface Classification

Much like art, typography as a craft has a traceable history. Typeface classification systems exist to distinguish between typefaces according to their main characteristics and identify their heritage. Variations in typeface classifications have occurred throughout the centuries depending on country of origin and rationale. For the purposes of this article, we will be looking at the most commonly used styles of typefaces, rather than listing a semantic checklist to any particular classification system.

Serif: In typography, the term serif refers to the small lines tailing from the edges of letterforms. Thought to have originated in the Latin Alphabet with Roman stone masons, serifs help guide the eye along large blocks of text. For this reason, most books are set in serif typefaces.

Sans-serif: A sans-serif typeface is one that is absent of the small projections at the end letterform strokes. In print, sans typefaces tend to be used more often for headlines than body text. On screen, however, sans typefaces are generally more readable. Sans-serif typefaces are modern and clean when used in design.

Script: Based upon the varied and often flowing forms created by handwriting, script styles encompass both the regular formal types of cursive, as well as more casual variations. Script typefaces can add elegance, cheerfulness, playfulness or a laid-back mood to text.

Display: typefaces which are considered useful solely at display sizes (typically 30 points or more as in headlines), are referred to as display faces. Typically, display faces should not be used for large amounts of text, or at smaller sizes, to ensure legibility and readability.

Dingbat: A dingbat is an ornament, character or spacers used in typesetting. In fonts, symbols and shapes take the place of alphabetic or numeric characters. The Unicode system is a universal character set of dingbats which provides for commonly used glyphs to have their own code.

Proportional/Monospace: A proportional typeface contains glyphs of varying widths and is generally easier to read and nicer to look at than monospace typefaces.
Monospace typefaces are comprised of letterforms which are all of a single, standard width. ASCII art usually requires monospaced fonts to be properly viewable.

With the digitisation of type and publishing, typography has been opened to everyone. This does not mean, however, that everyone does it well or correctly. Utilising the correct typographic terminology and understanding the basic principles not only respects the accessibility of a once highly specialised field, but also preserves that knowledge going into the future.

In the next instalment, we’ll be examining the language of typesetting. From the spacing of individual letters, to the setting of whole paragraphs and special characters, part 2 of Make Lemonade’s The Basics of Typography aims to improve your terminology as well as your layout skills .