Whichever software programme you’re using, and whether you’re designing for print or online, typography will no doubt play a large part in the eventual success (or failure!) of your design.
A timely drop cap or an extra bit of tracking can elevate your designs to new levels, in the same way that a poor choice of font or illegible sizing can ruin an otherwise perfectly good layout.
Typography can be technically tricky to perfect, and the jargon used by professional designers can be baffling. So for your peace of mind whenever your boss or client asks you to apply a 14 pt leading, a touch of kerning between the ‘a’ and the ‘b’, or alter the baseline shift, you can refer to this handy A to Z list of typography terms and tips rather than panic googling each definition.
We’ve also included some of our favorite tried and tested typefaces to help you get your typography perfect every time.
Tips for achieving the effects described are tailored especially for users of Adobe InDesign, which is the software program best optimised for handling typography.
A
Adobe Pro Fonts: Adobe has developed Pro versions of some classic typefaces, which are optimised to work best within Adobe software. The fonts closely reference the original typefaces, but are designed to help you achieve a ‘pro’ look in your finished design. Some of my favorites to use are:
- Adobe Garamond Pro, as used in this magazine tutorial
- Adobe Caslon Pro
- Source Sans Pro
Alignment: You can set the Alignment of text from the Character Formatting Controls or Paragraph Formatting Controls panels. This will flush the text in a text frame to Align Left, Align Right, Align Center, Align Towards Spine or Align Away From Spine. You can also choose to Justify the text (see J, below).
All Caps: Setting text in all caps, i.e. all capital letters, can give display typography (see D, below) more impact and give titles and headings more authority. It’s also a great technique for improving the legibility of text. In InDesign, you can click the All Caps icon in the Character Formatting Controls panel.
Alley: This refers to the vertical space between two columns of type. Sometimes, alley is also referred to as gutter, although gutter has a slightly different definition (see G, below).
Ampersand: The typographic symbol ‘&’ for representing the word ‘and’. An ampersand can become a dramatic typographic feature, like the vintage-style typographic effect you can learn how to create in this tutorial on high-impact typography effects.
Aperture: The little gap which would otherwise mean a letter would be fully enclosed. See also Counter, in C, below. If you look at the letter ‘n’, for example, the aperture can be seen at the bottom of the letter, sitting on the Baseline (see B, below).
Ascender: This is used to describe the vertical part of a letter which extends above the character’s x height (see X, below). For example, the top of the letter ‘h’ is made up of an ascender.
B
Baseline: The invisible line on which characters sit. Go to View > Grids & Guides > Show Baseline Grid to view the baseline in InDesign.
Baseline Grid: This grid is defined by the leading of text, and can help you judge where lines of text should sit correctly on the page. You can view the grid in InDesign by going to View > Grids & Guides > Show Baseline Grid.
Bold: You can set type in a bold weight, which increases the thickness of each line of a character to create a darker, heavier appearance. Perfect for display headings, as well as bringing out key words in a piece of text.
Book: Picking a suitable font for typesetting the interior pages of a book can be a daunting task. This is not the place to be experimental—the chosen font needs to be legible and attractive when printed at small scale and when set within dozens of lines of text on the page. Classic fonts like Garamond, Electra and Caslon are fail?safe choices, and have a serious, literary look.
Bowl: Describes the curved stroke that helps to enclose the Counter of a letter (see C, below). The letter ‘a’ has a bowl that allows the letter to have the enclosed space that sits at the bottom of the letter, resting on the baseline.
Bullets: To visually separate a list in a body of text, you can apply a Bulleted List or a Numbered List. To apply bullets to text in InDesign, first highlight the text, then go to Type > Bulleted & Numbered Lists > Apply Bullets.
C
Calligraphy: The art of creating lettering with a brush or pen in one stroke, creating a very beautiful, artistic appearance to lettering. Calligraphy is popular in contemporary typographic practice for event invitations, logo design, certificates and maps. Learn how to master calligraphy.
Case: Case defines whether a letter is set in Upper Case, as capitals (also see All Caps, in A, above), or set in Lower Case, as small letters. In InDesign you can adjust case from the Character Formatting Controls panel or by going to Type > Change Case.
Character: Refers to a single letter or symbol, which may either stand alone or be the building block of a word, a sentence or phrase, and eventually a paragraph.
Character Formatting Controls panel: This InDesign panel runs along the top of the screen and contains almost all of the editing options for typography. Other editing windows are accessible from the Window > Type & Tables option.
Color: You can adjust the color of type to improve legibility, alter the mood of the type, or create contrast against an image or colored element. Black type on white (‘Paper’) is the classic color for most traditional publications, like books and newspapers, which creates high contrast without the need for color printing. But designers continue to experiment with applying a whole spectrum of colors to type.
Columns: Used to break up large bodies of text, columns are vertical sections of text content, divided by alleys (see A, above) or gutters (see G, below).
Comic Sans: Often reviled by designers and non-designers alike, Comic Sans was designed by Vincent Connare for Microsoft in 1994. Modelled on the hand-drawn styles used in American comic books, it has a juvenile, jaunty look. Whether you like it or detest it, you have to respect Comic Sans for becoming one of the most widely used fonts worldwide ever.
Composer: You can access InDesign’s composer features by opening the Paragraph panel (Window > Type & Tables > Paragraph) and clicking on the drop-down menu accessible at the top-right corner of the panel. Adobe Paragraph Composer is the default selected option, and adjusts the line breaks in text responsively as you type more lines of text. Adobe Single-Line Composer does a similar job, but responds pragmatically to each line as you go, breaking the text where it feels it appropriate and not revisiting its choice. Adobe World-Ready Paragraph Composer is really useful when composing text in different languages. Setting Arabic text, for example, using the World-Ready Composer joins up individual characters to make it legible, and breaks words across lines only where appropriate.
Counter: This term is used to describe a fully or partially enclosed space formed by the shape of a letter. ‘O’ has a fully enclosed counter, whereas ‘u’ has a partially enclosed one, due to the small Aperture at the top of the letter (see A, above).
Crossbar: This word is used to describe a horizontal stroke that makes up part of a letter. For example, the horizontal line joining the two Stems (see S, below) to form a capital ‘H’ is called a crossbar.
Cursive: A word used to describe joined-up, script-like fonts, usually intended to mimic handwriting or calligraphy. See the Cursive typeface as a nice example.
D
Descender: Some letters have a downward stroke that extends past the baseline. This is known as a descender. For example, both the letters ‘y’ and ‘p’ have descenders. This is more common for letters set in lower case, depending on the font you are using.
Diagonal Stroke: Some letters are made up of diagonal strokes (as opposed to vertical or horizontal strokes). A capital ‘A’ uses two diagonal strokes to make up the triangle shape of the letter.
Display Typography: Setting type for display purposes, as opposed to larger bodies of smaller text which will involve typesetting (see T, below), can be more artistic, and can be combined with images and negative space (see N, below) for added impact. Increased size (see S, below) and/or use of color (see C, above) can transform type into something that is adapted for display.
Drop Cap: A drop cap is a superb effect for adding drama and impact to the beginning of a piece of text. It increases the size of either the first, or first few, character(s) of the first line of a paragraph, extending its height across a defined number of lines. You can apply a Drop Cap in InDesign from the Character Formatting Controls panel (see C, above). Learn how to Enhance Text With a Dramatic Drop Cap.
E
Ear: Term used to describe the small stroke that extends out from the top-right of a letter ‘g’. This is more common with serif typefaces.
Experimental Typography: A more artistic and offbeat approach to designing and setting type, experimental typography is associated with the Dada art movement from the early 20th Century. The American graphic designer David Carson is often linked with experimental typography, as he developed and used unconventional typographic methods, mainly in his role as Art Director for Ray Gun magazine.
Eye: Similar to a Counter (see C, above), an eye refers specifically to the enclosed space in a lower-case letter ‘e’.
F
Family: A font family describes the base definition for a font, before additional styles or weights are applied to it. A font family can also be described as a typeface (see T, below). A few well-known font families are:
- Times
- Calibri
- Garamond
Families become very important when working in CSS. Defining the font family should be the first criterion you enter for fonts, to ensure text is displayed in the correct family. In this CSS example, two font families are defined in a particular order which ensures text is displayed in the secondary font if the first preferred font is not available on the reader’s computer:
font-family: “Open Sans”, “Helvetica-Neue”, sans-serif;
Font: If we’re going to get picky, a font is actually different from a typeface (see T, below). A font defines the selection of a typeface (e.g. Garamond) with weight and size variables applied to it, e.g. Italicized Garamond set at 16 pt. But nowadays, the two terms, font and typeface, have become more interchangeable, particularly with the growth of digital typography. What you need to know is that ‘fonts’ (or ‘typefaces’) come in all sorts of variations, and can be free, paid-for, or included with editions of your software programme.
G
Garamond: A very elegant and legible typeface, Garamond traces its origins back to some of the typefaces developed by punchcutters in the 15th and 16th centuries. Adobe has released a Pro version of the font (see A, above) which translates superbly to use in design software programmes, like InDesign.
Gill Sans: Designed by Eric Gill in 1926, this classic sans serif has stood the test of time, and still looks relevant today. It’s probably best known for its use across British railway signage and publicity materials, as well as being the choice of typeface to front Penguin’s classic, minimalist book covers.
Glyphs: More broadly known as symbols, glyphs are the individual characters that make up a typeface. In InDesign you can go to Window > Type & Tables > Glyphs to open the Glyphs panel. Double-click on a glyph to enter it into your selected text frame.
Gutter: Gutter defines the blank space between two pages of a spread, from the right side of the column on the left-hand page, across the binding, to the left side of the column on the right-hand page. Depending on the binding technique of the document after printing, the gutter may have to be increased or decreased in size to ensure text doesn’t disappear into the binding.
H
Hairline: This is used to describe the very thin parts of a serif letter. Notice that the ‘a’ or ‘s’, when set in something like Garamond, will have thinner sections towards the top and bottom of the letter.
Handwritten Typefaces: A growing number of typefaces out there mimic the erratic, informal style of natural handwriting. Some are really fantastic, but there are also loads that are probably not worth a look! Some of my favorites are Yellowtail, for a more polished, retro take on hand-drawn styles; Hemingway, which is a simple, bouncy handwritten design; and LSTK Bembo, for an old-school look.
Helvetica: Probably best known as the font used on signage for the New York City Subway, Helvetica, invented by Swiss designer Max Miedinger in 1957, also has the privilege of being one of the 20th Century’s most popular typefaces. An elegant and modern sans serif, Helvetica is an example of the International Typographic Style (see I, below).
Horizontal Scale: You can adjust the horizontal scale of type in InDesign, which stretches the character to give a warped effect. Adjust this from the Character Formatting Controls panel.
Hyphenate: It’s really up to you whether you choose to hyphenate text, i.e. break words across lines, in a paragraph. It can be a space-saver, and can also give large blocks of text a more uniform, square appearance. On the other hand, poorly hyphenated words can be off-putting for the reader, and make text less readable. You can switch hyphenation on or off from the Paragraph Formatting Controls panel in InDesign.
I
Indent: An indent can be applied to the first line of a paragraph, the last line, or to a whole paragraph. It simply pushes a defined line or lines inwards from the edge of the text frame, and is a common way of visually breaking up large blocks of text without the need for paragraph breaks.
International Typographic Style: Also known as the Swiss Style, the International Typographic Style is a design style that was developed in the 1950s in Switzerland. The style is marked by the use of sans serif typefaces like Helvetica (see H, above) and Akzidenz Grotesque.
Italic: A weight setting, text can be italicized to give the letters a slanted appearance. Suitable for pulling out quotes, dialogue or for simply giving emphasis to certain words or phrases, italicized text can also give an elegant, feminine appearance to headings and other display typography (see D, above).
J
Justify: You can set the alignment (see A, above) of text to Justify, which stretches the line of text across to fill the width of the whole text frame. This can be a really effective way of neatening the appearance of text and getting rid of any ragged lines. In InDesign you can set the text to Justify with Last Line Aligned Left, Justify with Last Line Aligned Center or Justify All Lines from the Character Formatting Controls or Paragraph Formatting Controls panels.
K
Kerning: Defines the process of adjusting the space between individual characters. In InDesign, kerning can be applied directly from the Character Formatting Controls panel. Carefully applied kerning can improve the visual evenness of a word, but it can also reduce legibility if too much kerning is applied… so use with caution!
L
Language: All text is set in a particular language, and the typography may need to adjust to adapt to the language the text is set in. For example, some languges, e.g. Arabic, need to be flushed right to be read from right to left, and some languages may employ a wide variety of diacritics, or symbols, which may need to be inserted using the InDesign Glyphs panel (Window > Type & Tables > Glyphs).
Leading: Specifies the spacing between lines of text. Increasing the leading of text can make text more legible and appear cleaner. You can adjust leading from the Character Formatting Controls panel in InDesign.
Legibility (see also Size, in S, below): The ‘quality of being decipherable and recognisable’; quoted by Water Tracey in Letters of Credit (1986, pp. 30–31). Font choice, Size, Weight and Color can have a huge impact on whether type can be judged to be legible (which is linked to perception of the text) and readable (which is defined by the comprehension of the text).
Letterpress: Letterpress printing uses relief printing, transferring ink from a press to create an impression on the paper. Letterpress is a traditional technique for printing type, but is enjoying a modern-day resurgence, due to the high quality printing it produces.
Ligature: When two or more letters are joined together to form a single glyph this is called a ligature. The effect can also be imitated by increasing the Kerning between letters (see K, above).
Link: This describes a stroke that connects the top and bottom Bowls (see B, above) of a lower-case serif ‘g’.
Linotype: Linotype printing was the industry standard for printing text in newspapers, magazines, posters and brochures from the 19th Century to the mid?20th Century. The linotype machine created an entire line of type at once, which gave it the name ‘line-o’-type’. Letterpress printing (see above) was also widely used, alongside linotype. Digital printing and offset lithography printing slowly replaced linotype printing from the 1960s onwards.
Lower-case: This describes the smaller version of letters, as opposed to setting text in capitals (or All Caps, in InDesign; see A, above).
M
Minion: Designed by Robert Slimbach for Adobe in 1990, Minion is a digital font inspired by Renaissance type styles. You’ll notice that the default font in InDesign is set to Minion Pro.
N
Negative Space: An important concept to understand when creating typography for display (see D, above), negative space is the empty or blank space that surrounds an object, character, word, or phrase. Giving your display headings sufficient breathing space can transform your designs, and make them much easier on the eye. Crowded layouts which don’t use adequate negative space tend to appear overwhelming and unattractive.
Newspaper Typography: Newspapers adopt a unique typographic style, using typefaces and layout styles which are usually more conservative and serious than the type styles adopted by other print and online media. Times New Roman is a classic, traditional newspaper typeface, while newer typefaces like Gulliver and Times Classic give a fresher take on the traditional type style for broadsheets.
O
OpenType: A registered trademark of Microsoft, OpenType is a font format which allows type to be scaled in a flexible, expressive way, and is a great choice when designing typographic layouts on digital software. The TrueType font format is the predecessor of OpenType.
Optical Margin Alignment (see also Story, in S, below): This is a neat trick that allows you to align characters in a paragraph so they appear visually lined up rather than actually technically lined up. This tricks the eye into thinking the text looks more visually appealing. You can find Optical Margin Alignment hidden away in the Story panel; simply go to Window > Type & Tables > Story and tick the box.
P
Paragraph Formatting Controls panel: This InDesign panel runs along the top of the screen, accessible by clicking the ¶ icon at the top-left corner of the screen, and contains almost all of the editing options for adjusting bodies of text.
Point: The smallest unit by which Font Size, Leading and Baseline Shift are measured. Point (abbreviated to pt) is a division of the larger pica unit.
Printing Revolution: Johannes Gutenberg’s invention of the mechanical printing press triggered the Printing Revolution in Europe, where ideas could be printed and circulated en masse for the first time. This led to the world’s first printed book using moveable type, the Gutenberg Bible, which was produced in Germany in the 1450s.
Q
Quotation Mark: Part of a set of typographic symbols or glyphs, quotation marks can be tricky to deal with. They can appear to push letters further into a text frame, misaligning those letters with the lines of text below them. To avoid this, you can instruct InDesign to turn on Optical Margin Alignment (see O, above).
R
Roman: Roman can refer to the ‘Regular’ weight of a typeface. It can also refer to the Roman type style, which has its origins in Greek letterforms. Roman type styles usually appeared as monumental capitals, which went on to form the basis of Western serif typefaces.
S
Sans Serif: A term used to describe a typeface which lacks protruding serifs at the end points of the lines that make up a character. Sans serif typefaces often look more modern and less conservative than serif typefaces.
Semantic Typography: These are ‘type pictures’—cleverly arranged letters or words that visually create an image of what the word is describing. Korean designer Ji Lee is a contemporary pioneer of semantic typography.
Serif: The term used to describe the small protruding elements at the end points of the lines that make up the character within a typeface, sometimes referred to as ‘feet’. A serif font tends to look more traditional, and sometimes more ornate, than its sans serif counterparts.
Shoulder: This term describes a curved stroke that emerges from the Stem of a letterform (see below). For example, lower-case ‘h’ has a shoulder that connects it from the left-hand vertical stem to the right-hand vertical stem.
Size: The size of type can be extremely important, defining its legibility, readability and visual impact for the viewer. In Adobe software, font size is measured in points (see P, above). In InDesign you can edit size directly from the Character Formatting Controls panel or from the Character panel (Window > Type & Tables > Character).
Skew (False Italic): From the Character Formatting Controls panel in InDesign you can apply a skew, or false italic, to type by adjusting the degree of the skewed angle. This will only mimic the appearance of italicized fonts, and should not normally be used as a substitute for a true italic font.
Slab Serif: A sort of serif typeface characterized by thick slab-like characters. Slab serifs are great for headlines and poster art. Patua One is a lovely example of a slab serif, and is free to download.
Small Caps: You can set capital (or All Caps; see A, above) letters in small caps, at the reduced x-height (see X, below) while maintaining the same form of capital letters.
Spine: The curved central part of a lower-case or capital ‘S’.
Spur: A miniscule ‘foot’ that appears at the end of a curved serif stroke. For example, capital ‘G’ has a small spur at the bottom-right of the letter.
Stem: A term used to describe a vertical stroke that makes up a letter. For example, the letter ‘l’ is made up of a single stem.
Story (see also Optical Margin Alignment, in O, above): The Story panel is an InDesign feature from which you can choose to set text to optically align to the margin (Window > Type & Tables > Story).
Style: In InDesign you can define Styles for characters and/or paragraphs, which allows you to save typographic formatting and apply it again with ease to other parts of your document. To access the Character Styles and Paragraph Styles panels, go to Window > Style. Learn more about creating and applying styles in InDesign.
Subscript: This reduces the size of specified characters and pushes them below the baseline. You can set this from the Character Formatting Controls panel in InDesign.
Superscript: Like subscript, except that this pushes specified characters above the top of the line of the text. Useful for defining dates, e.g. 15th June, and some mathematical concepts, you can adjust superscript from the Character Formatting Controls panel in InDesign.
Symbols: Term used to define individual characters that make up a given typeface (see also Glyphs, in G, above).
T
Tail: The descending stroke of a letter. In serif and italic typefaces the tail is often decorative or ornate. See for example, the letter ‘R’ set in Garamond Italic.
Terminal: This is used to describe the end of a stroke on a serif letter that doesn’t have a Serif (see S, above). You can see this at the top of a lower-case ‘f’, where the end of the top stroke usually doesn’t have a serif, or ‘foot’.
Tracking: Defines the increase or decrease of space between a group of characters. You can adjust this in InDesign from the Character Formatting Controls panel or the Character panel (Window > Type & Tables > Character).
Typeface: A typeface is technically a group of fonts which share common design characteristics (see also Font and Font Family, in F, above).
Typekit: Adobe’s new typeface selection feature, pictured above, for CC 2014. Check out how to get the most out of Typekit.
Typesetting: The practice of composing bodies of text, either manually or digitally.
U
Underline: Type can be underlined to give emphasis and to also distinguish headings from body text. You can set an underline in InDesign from the Character Formatting Controls panel.
Univers: Also based on Akzidenz-Grotesk, just like Helvetica, Univers is a classic sans serif without any stylization. It’s streamlined and simple, making it an elegant and non-intrusive font choice for your design projects.
Uppercase: Also known as capital letters, you can set text in uppercase to give it more prominence and impact. The first letters of a sentence or word are usually set in uppercase. See also All Caps, in A, above, for setting text in uppercase manually in InDesign.
V
Vintage: There are thousands of vintage-inspired fonts available to download, with new ones being designed all the time. Choose from styles that mimic Art Deco type, for example, or the ever-popular rustic hipster styles that continue to dominate the popular face of graphic design. Try Vincent for a nice take on the style.
Vertical Scale: You can adjust the horizontal scale of type in InDesign, which stretches the character upwards to give a warped effect. Adjust this from the Character Formatting Controls panel in InDesign.
W
Weight: The thickness of the lines that form a single character, in relation to the character’s height. Some terms for a character’s weight may include, but aren’t limited to:
- Regular / Normal / Roman
- Bold
- Heavy
- Black
- Italic
- Bold-Italic
- Medium
- Light
Weight can also refer to the attribution of normal or strong weights in CSS.
X
x-height: The x-height describes the height of the main section of a letter, word or group of words. The bottom of the x-height sits on the baseline. Ascenders (see A, above) and Descenders (see D, above) extend beyond the x-height of a letter.
Xenophone: a playful font which you can download free. This font typifies the trend for naïve, childlike, hand-drawn fonts which lend an impression of optimism and fun when adopted on commercial products. Love Ya Like a Sista, as used in this tutorial on how to design typography layouts for packaging, is another example of this type style.
Z
Ziamimi: One of my favorite new typefaces available to download at the moment, Ziamimi is a beautiful display font. It references Art-Nouveau styles, tapping into the trend for vintage typography (see V, above), and will look fantastic on posters, logos or book covers.
{excerpt}
Read More