Learn typography with this handy reference guide.
Alternates
Alternates are different shapes (or glyphs for the same character) in a typeface, for example, swash characters, contextual alternates, case-sensitive forms, small caps, etc.
Ampersand
The ampersand was originally a combination of the letters ‘e’ and ‘t’, which combined formed ‘et’, meaning ‘and’ in Latin. It has since become a beloved flagship of typography, and type designers from all over the world now display it to show off their creativity.
Apparent Size
The x-height of a typeface affects how large it is perceived to be. The two typefaces shown in the above example are the same point size, but the bottom one appears much larger, due to the taller x-height. When designing with limited space, it is a good idea to use a tall x-height font for the best legibility.
Blackletter Typefaces
Blackletter or gothic, was the first typeface, and it is based on the writing of medieval European scribes. It is dark and dense, often with poor legibility compared with the roman typefaces used today. Searching this type of typeface and you will see hundreds of bad tattoo designs!
Character
An individual symbol of the full character set that makes up a typeface. It may take the form of letters, ligatures, punctuation marks, numerals, and other symbols.
Comic Sans
Nope, nope and nope. Did you know that Comic Sans was created as a kid friendly font for a Microsoft program that had a talking dog? Despite that it is a highly legible typeface, unless you’re a preschool teacher, it’s a good idea not to use it.
Display Typefaces
Display Typefaces have a lot of detail and character, and are better used in large sizes. The thickness and complexity of the characters make them difficult to use for large paragraphs of text. A huge variety of display typefaces are available, and they can be serif, san-serif, slab or script.
Hierarchy
Hierarchy is done by using different sizes, weights and typefaces. A big bold headline in an eye-catching font engages the reader, and the body text in a subtle, legible font delivers the details. Hierarchy is also an important factor in web for Search Engine Optimisation, so ensure you are utilising headings correctly.
Hyphen and Dash
Did you know there was a difference? A hyphen joins linked words, or breaks a word at the end of a line. There are two types of dashes; a en dash connects ranges of numbers or indicates relationships e.g. 9-5 while a em dash marks a strong grammatical break in a sentence.
Ink Traps
Printing letters in small sizes? The characters sometimes use ink traps. These cutouts in the corners of characters allow the ink to spread without ruining the overall shape of the letter. If these letters are viewed on a screen or expanded to large sizes, they can often look a little distorted.
Italics
Italics are a sloping, light-bodied, compact, and almost cursive letter form, which, with roman and black letter shapes, has been one of the three major typefaces in the history of Western printing. Italics were introduced in 1500 by Francesco Griffo, typecutter to the printer Aldus Manutius, in Venice. They were created as a way to fit more words onto the pages of his tiny books. Today, they are mainly used to give emphasis to words and to indicate titles of books and movies.
Johannes Gutenberg
Johannes Gutenberg revolutionised the world of communication by inventing the printing press. It took him a couple of months to print the bible, something that would have taken years for scribes to write by hand.
Leading
Leading (pronounced ‘ledd-ing’, named after the strips or slugs of lead traditionally inserted between lines of metal type for printing) is the space between lines of text. The term comes from the bars of lead that were used to separate lines of text on a printing press. If the leading is too tight, it can make it hard to read and frustrate the reader due to losing track of their position on the page.
Letter Anatomy
Characters can be broken down into several different components, different letterforms will have different components. Such components include;
Aperture
The somewhat enclosed, partially rounded negative space in some characters such as ‘n’, ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.
Apex
The point at the top of a letter where two strokes meet, for example in the capital ‘A’.
Arm
The horizontal stroke in a character that does not connect to a stem at one or both sides.
Ascender
Any part in a lowercase letter that extends above the x-height, for example in ‘b’, ‘d’, ‘f’, ‘h’, ‘k’, etc. Some types of ascenders have specific names.
Ball Terminal
A design feature of a typeface or glyph where the end is shaped like a ball. Appears most often in serif typefaces.
Bar
An enclosed horizontal stroke.
Bowl
The strokes that fully or partially enclose an interior space in such characters as a, b, d, the upper part of g, and O, P, and R. Usually rounded or curved. (The lower part of the g is generally called a loop.)
Counter
The fully or partially enclosed interior space of a character. The enclosure may be made by curved strokes and/or stems. Some characters, such as A and M, have more than one counter.
Descender
The part of lowercase letters (such as y, p and q) that descends below the baseline of the other lowercase letters in a font face. In some typefaces, the uppercase J and Q also descend below the baseline.
Ear
Typically found on the lower case ‘g’, an ear is a decorative flourish usually on the upper right side of the bowl.
Leg
The down-sloping stroke on the letter ‘K’, ‘k’ and ‘R’.
Link
The small, usually curved connecting stroke between the upper bowl and lower loop in the double-storey ‘g’.
Loop
The lower portion of a two-story lowercase g. Also, an enclosing stroke that either ascends or descends from a lowercase script letter.
Shoulder
A transitional section on a character, including lowercase letters such as ‘h’, ‘m’ or ‘n’ where a curved arch merges downward into a straight stem.
Spur
Small extensions of letter strokes, which don’t qualify as a serif on such letters as C, E, F, G, S, T, and Z; also sometimes on letters such as a, c, and f.
Stem
A vertical only stroke that creates the character. The capital letter ‘I’ is a good example of stems.
Stress
The direction of thickening in a curved stroke.
Stroke
The main diagonal portion of a character such as in M, N, or Y is the stroke. The stroke is secondary to the main stem(s). Some characters have two diagonals, such as A or V have a stem and a stroke.
Swash
A fancy flourish replacing a terminal or serif.
Terminal
The end of a stroke that is not terminated with a serif.
Tail
The descender of a Q or short diagonal stroke of an R. These tails are often decorative.
Letterpress Printing
Letterpress is the earliest form of typographic printing. It involves coating letter cutouts in ink , they are then arranged and pressed against paper. It is quite labour intensive, but creates a tactile and elegant appearance that cannot be reproduced digitally.
Letter Storeys
A double-story ‘a’ or ‘g’ has two counters, as opposed to their single-storey variants which only have one counter. The single-storey format is used mostly in script typefaces, italics and geometric sans-serifs. The double-storey format is used mostly in serif and some san-serif.
Ligature
A ligature is a character created by combining two letters, generally to avoid them from clashing. Some typefaces feature ligatures that automatically appear when two particular letters are typed next to each other, you will often see this a lot with script fonts.
Line Anatomy
Line anatomy refers to the different ‘imaginary’ lines references used in typography such as;
Cap height
The height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat—such as H or I.
Ascender height
The imaginary line marking the topmost point of the cap line.
X-height
The distance between the baseline of a line of type and tops of the main body of lower case letters (i.e. excluding ascenders or descenders).
Baseline
The imaginary line upon which the letters in a font appear to rest.
Descender height
The imaginary line marking the lowest point of the descenders within a font.
Line Length
When laying out body text, it’s recommended to not put more than 12 words on a single line. Any longer and the reader’s eyes tend to get lost. Too short and the reader has to continuously jump lines, which can be fatiguing. A full width layout can look clean, however, functionality should take priority.
Logotype
A logotype is a logo that consists mainly of typography, as opposed to one that is purely graphical. You will notice a lot of today’s iconic brands such as Google, Visa, Coca-Cola & IBM all use logotypes.
Monospaced Typefaces
Monospaced typefaces are where every character takes up the same amount of horizontal space. These typefaces are usually less legible and less aesthetically pleasing than other typeface varieties. They are most commonly used for typewriters and computer programming.
Orphans/Widows
An orphan is a word at the end of a paragraph that extends onto its own line. A widow is a word or short phrase at the end of a paragraph that extends into the next column. It is good practice to avoid orphans and widows when laying out text.
Pairings
Typefaces are often paired by using two typefaces; one for headings and one for body text. Contrasting styles with similar x-heights can be effective as well as pairing a sans serif with a serif.
Point Size
The units used to indicate font size are points and picas. A point is 1/72 of an inch, and a pica is 12 points. The size indicates the total vertical distance occupied by a line of text. The text you are currently reading is set at 10.5-point which is 14px. The use of pt and px differs depending if the type is used for print or digital.
Quotation Marks
A common misconception is that all quotes are the same. The proper way to indicate someone speaking is with curly quotes E.g. “Hello, friends!”. Straight quotes on the other hand are used for measurements e.g. 6’2”. Back in the days of the typewriter (seems like a lifetime ago!) people were forced to use straight quotes for everything, as curly quotes weren’t on the keypads to save space.
Rivers
When spaces between words in blocks of text align, rivers of white space can emerge. These can be distracting to the reader and should be removed if possible by either changing the column width or adding paragraph breaks. Justified text can also lead to puddles and lakes which are gaps in between justified text.
Script Typefaces
Script typefaces are meant to look cursive and handwritten, and often have connections between the letterforms (See above: ligatures). They are used for headings or short passages as they are more than often hard to read when used for large amounts of text. There is a huge variety of script typefaces available that can make a design look elegant, casual, or even modern.
Serifs
Serifs are the small ornamental lines extending off the ends of the main strokes in letterforms. They date back to Ancient Rome, when they were chiseled into stone. Typefaces with serifs can look more traditional and are better used for long blocks of text.
Text Alignment
Generally speaking, left-aligned text is the easiest to read. Justified text is commonly used for books, and should be used with hyphenation to avoid any awkward spacing. Centered text can look good when used for titles and short phrases.
Tittle
A tittle or superscript dot is a small distinguishing mark, such as a diacritic or the dot on a lowercase i or j.
Tracking
Tracking is the overall spacing of a group of characters, also known as letter spacing. It can be used to change the visual weight and intensity of text. You should not use loose tracking on lowercase text, as it can be difficult to read.
Type Weights
Just about every typeface comes in regular and bold, however, a typeface can come in many different weights, referring to how thick the stroked are. The use of multiple weights can create hierarchy in type layout.
Type Widths
Typeface families often contain multiple styles including different widths, referring to the horizontal space each character takes up. When trying to fill a certain space, a big no no in typography is to stretch the type; instead, choose a typeface that is the right width.
Typeface vs. Font
This one is a hot topic and one you’ll hear used interchangeably, technically, they are actually two different things. Typeface refers to the design of a family of letters, including italics and all the different weights. ‘Arial’ is an example of a typeface. Font refers to a specific style and size contained within a typeface. ‘Arial bold 12-pt’ is an example of a font.
Uppercase/Lowercase
The terms uppercase and lowercase are literally how they came about back in the days of letterpress printing, the metal type was stored in cases. The case that had all the capital letters was stored above the case that had all the small letters.
