The a to x(height) of typography

For many designers, typography is the heart of what we do — we love it. I got hooked on graphic design by copying the logos of my favourite groups, especially the type. Perhaps it’s because there are an infinite number of ways to design those 26 letters, or that by varying the colour, size and spacing of type you can create a complex world of meaning that can illuminate and reinforce the meanings of the words themselves. Whatever makes it so attractive, typography is fundamental to graphic design and it surrounds us all the time, from traffic signs, to adverts, to newspapers, to websites. It’s an intrinsic part of our lives.

Unfortunately, it’s also perhaps the area of graphic design that has the most jargon and is most baffling to clients. It is a complex subject so some use of technical language is unavoidable, but it’s not helped by the fact that much of the vocabulary comes from the early days of printing in the late middle ages. At that time the terminology was simply literal: upper case letters were stored in the case at the top of the typesetter’s workbench; leading referred to the slivers of lead used to set the space between rows of type. Over the centuries the technology has changed from individual metal letters set in strips, to typesetting machines to computer software outputting directly to screen and paper, but most of the language has remained the same and is now only indirectly related to its origins.

This post tries to define some of the most common typographic terminology you might come across when talking to your designer, and to address how some of the terms are shifting their meaning. I’ve tried to limit it to more commonly used terms for the sake of brevity, so it’s not remotely comprehensive. I hope you find it useful.

If you are inspired and want to get more into typography, two really good books out of the dozens available are The Elements of Typographic Style by Robert Bringhurst and The New Typography by Jan Tsichold.

Ascender — the part of the letter that extends above the main body on b,d,f,h,k,l and t.

All caps — ALL CAPITALS. It may work for headlines, but it’s harder to read than text set conventionally in upper and lower case.

Baseline — the imaginary line on which the letters of a row of type sit. To keep the optical illusion of a straight line, curved letters such as a,c and s actually sit very slightly below the line.

Body copy — the main text, not including headlines, page numbers, subheads, captions, photo credits, small print or other pieces of type. Most documents and websites will have one stylesheet for body copy.

Descender — the part of the letter that extends below the baseline on g,j,p,q and y.

Drop cap — an enlarged initial letter (or several letters) that indicates the start of a section.

Em dash — a dash roughly the width of an upper case ‘M’. Quite rare in British English, much more common in America.

En dash — a dash roughly the width of an upper case ’N’. Used to indicate a range of values, such as 1–10, where it stands in for the word ‘to’. Also used as a punctuation mark to indicate parentheses — such as this — instead of brackets or paired commas. In ranges it is used without spaces, in parentheses it is spaced.

Folio — page number.

Font — properly speaking, a font is a specific weight within a font family or typeface, in practice it’s used interchangeably with typeface.

Hyphen — a short dash used to indicate that a word has been broken and continues on the next line, or to connect the two or more parts of a compound modifier (which is getting into the even more complicated world of grammar, and is beyond the scope of this post). Some style guides also use hyphens to indicate ranges (see en dash above).

Italic — sloped characters used for emphasis or to indicate the title of a book, film or TV programme. Originally based on handwriting, italic letters were carefully drawn to flow and preserve the quality of serif typefaces. In many sans serif typefaces the characters are simply slanted to create what is known not as italic but oblique fonts, for instance Helvetica Oblique. Either way, they should used sparingly as they can be hard to read in long passages.

Justification — justified text has straight margins on both left and right so every line, apart from the last one, is the same length. It gives a clean appearance but the design software has to vary the spaces between words to make each line fit the fixed column width, and it has to hyphenate words so they can run over on to the next line. This can result in rivers and a lot of hyphens.

Kerning — adjusting the spaces between letters in a word so that they look consistent. Because letters are such a variety of shapes it can be difficult to have them sit comfortably next to each other without gaps. Design software adjusts the spaces, bringing some pairs of letters closer together and moving others further apart. There are a huge number of possible letter pairs so it is sometimes necessary for the designer to kern manually, particularly on an important or prominent piece of type such as a poster headline or a logotype.

Leading — the vertical space between lines of type. This is a crucial consideration because it has a big effect on the readability of a document. If the leading is too tight or too loose it can be harder to keep your place on the page. As type gets bigger the leading appears to get even bigger, so headlines need much lower leading than body copy.

Logotype — a logo, or part of a logo combined with a symbol, consisting of type. Examples include Coca Cola, IBM, the BBC and Ford.

Lorem ipsum — designers use distorted Latin as dummy text so they can show the client how a page will look without the client being distracted by reading the text. The original passage starting Lorem ipsum dolor sit amet, is taken from a book by the Roman author Cicero. Modern design software contains a random pseudo-Latin generator so that the dummy text is always unfamiliar. If your designer does use dummy text, always check that all of it has been deleted before you publish.

Lower case — small letters, you’ll often see this marked up as lc or l.c.

Measure — you won’t hear this very often, but it is simply the line length in number of characters. The optimum measure for readability is about 65 characters.

Pull quote — a particularly important or impactful passage of the main text displayed in a larger size, perhaps in a bolder font or a different colour, to give it more impact.

Ragged — ragged text has a straight margin on one side (it can be ragged left or ragged right). This means that each line is a different length. It avoids excessive hyphenation and keeps the space between words constant, which helps to avoid rivers.

Rivers — a phenomenon where a large space between words in justified text aligns (or nearly does) with a similar space in the lines above and below, creating the impression of a river of white space flowing down the page. If several rivers are close together, they can visually combine to form a lake.

Serif — serifs are the little embellishments on the end of strokes in some typefaces, they are conventionally thought to increase readability by guiding the eye along the line, although the research is mixed. Fonts that don’t have serifs are called sans serifs.

Stylesheet — in both print and web design, the designer will (or should) create a set of stylesheets. These are instructions that define all the parameters that determine the appearance of a given piece of type: typeface, weight, size, colour, kerning, tracking, leading and so on. Once the stylesheet is created it can be applied to any piece of type, this speeds up the work, enables consistency and allows the designer to change any attribute by changing the stylesheet rather than going through the whole site or document changing it manually.

Tracking — adjusting the space between all the letters in a line, a paragraph or throughout a document by the same amount. This is done at the stylesheet level to adjust the overall appearance and readability of the type or it can be applied to a particular paragraph to try to get rid of widows.

Typeface — accurately, this is the overall name of a set of fonts. So if your designer is using Helvetica Bold for headlines, the typeface is Helvetica, the font is Helvetica Bold. In practice, typeface is used interchangeably with font. It’s important to note that many typefaces come in a variety of slightly different versions made by different manufacturers, this is either because the typeface is very old and no longer covered by copyright (so anybody can use the name), or because the typeface has been redrawn to work better with modern technology (indicated by the addition of a word such as Neue or Next to the original name).

Weight — this refers to the width of the lines used to make up a particular font. Recent typefaces come in as many as 10 different weights, ranging from hairline to light to regular to bold to black to extra or ultra black. Many typefaces also have condensed or compressed (narrower than normal) and extended (wider than normal) forms, again in a range of weights. So including italics, a contemporary typeface could include more than 30 fonts.

White out — the practice of using white type on a dark coloured or black background. This style is commonly thought to be harder to read than black on white so avoid doing it for long passages or whole pages, it looks stylish but some readers won’t like it.

Widows and orphans — the meanings of these terms are changing, both are now generally used to mean a single word alone on the last line of a paragraph. The terms originally meant either the first line of a paragraph being on its own at the bottom of a page (orphan), or the last line of a paragraph being on its own at the top of a page (widow). Whatever your designer means by these terms, they should adjust the text to get rid of the offending item.

x-height — the distance from the top to the bottom of the letter x in a typeface. Most modern typefaces have a relatively large x-height as it makes them easier to read at small sizes and on screen.

© 15 North 2017