An easy guide to typography
CONTENTS
TYPE ANATOMY
04
Ascender • Bowl • Terminal • Leg • Crossbar • Leak
07
Head Serif • Closed Counter • Open Counter • Arm • Foot • Spine
10
Shoulder • Link • Crotch • Bilateral Serif • Ear • Body
12
Eye • Descender • Bar • Hailine • Tittle • Spur
14
Finial • Tail • Loop • Serif • Stress • Stem
TYPE PROPERTIES
18
26
Font Variations Weight • Style
28
Positioning & Spacing Baseline • X–height • Cap–height • Leading • Kerning • Tracking
36
Punctuation Terminal Points • Pausing Points • Hyphens & Dashes • Parentheses, Brackets & Braces
46
TYPE CLASSIFICATION
54
based on the Vox-ATypl classification system
Classics Humanist Serif • Garald • Real or Transitional
56
Moderns Didone • Slab-serif Lineals
Grotesque • Neo-Grotesque • Geometric • Humanist
62
TYPE ANATOMY 01
TYPE ANATOMY Typeface anatomy describes the graphic elements that make up printed letters in a typeface. Highlighted areas points out different parts of a letter.
ASCENDER The part of the letter that extends above the x-height of a font as seen in l h f t h d and b.
BOWL A closed curved stroke as seen in b d o p q D O P Q and B which has two bowls.
TERMINAL The end of an instroke or outstroke that does not include a serif. There are three types of terminal: teardrop/ lachrymal, ball, beak/ spur.
06
TYPE ANATOMY
LEG Short, descending portion of a letter, seen on a K, R and Q.
CROSSBAR A short stroke connecting to other strokes, such as the stroke of an A H f or t.
BEAK A style of decorative stroke at the end of the arm of a letter, such as a capital T and E.
07
WHAT DO THESE LETTERS
08
HAVE IN COMMON?
09
HEAD SERIF A serif at the top of an ascender.
CLOSED COUNTER A closed area of negative space (white space) formed by straight and/or curved strokes.
OPEN COUNTER An open area of negative space (white space) formed by straight and/or curved strokes in letters such as c f h i s m e and n. Also known as an aperture.
10
TYPE ANATOMY
ARM A longer horizontal stroke at the top or bottom of a letter such as an E or F.
FOOT Detail at the ends of some strokes, also known as a serif.
SPINE The main curved stroke of an S.
11
SHOULDER Curved stroke attached to stem.
LINK / NECK A stroke connecting the top and bottom bowls of a lowercase double-story g.
CROTCH An acute, inside angle where two strokes meet seen on characters such as v w and y.
12
TYPE ANATOMY
BILATERAL SERIF A serif extending across both sides of a letter’s main stroke.
EAR The very short stroke at the top of a g.
BODY The main area of lower case
X-height
letters between the baseline and x-height.
baseline
13
EYE The closed counter in a lowercase e.
DESCENDER A stroke which drops below the baseline, as seen in q y p g and j.
BAR A short horizontal stroke such as the middle stroke of an E or F.
14
TYPE ANATOMY
HAIRLINE The thinnest stroke of a letterform common to serif typefaces.
TITTLE The dot on a lowercase i or j.
SPUR A small projection off a main stroke.
15
THE COUNTERS POWER If you remove the outlines of the letters that feature closed counters, you can read them still!
16
TYPE ANATOMY
WHAT LETTERS ARE THESE?
17
FINIAL A tapered, curved end seen on letters such as c e and a.
TAIL A trailing/descending outstroke as in j y J Q and R.
LOOP The bottom of a two-story g.
18
TYPE ANATOMY
SERIF A stroke added as a stop to the beginning and end of the main strokes of a character.
STRESS The disparity between thick and thin strokes that alters optical perception.
STEM The main, vertical, full-length stroke of an upright letterform. Also known as a stroke.
19
o Oo OPTICAL PERCEPTION
The The disparity disparity between between thick thick and and thin thin strokes. strokes.
DIAGONAL STRESS 20
NO STRESS
oo TYPE ANATOMY
VERTICAL STRESS
21
POGGENDORF ILLUSION The letter x appears to me made from two continuous lines that cross. But to have the appearance of continuity, the lighter stroke needs to be broken in a phenomenon known as the Poggendorf illusion.
22
JASTROW’S ILLUSION A small curve next to a larger ones is something you see a lot on a typeface. But setting aside what we think we see and measuring what’s actually there, we find that these small and large curves are identical.
1
2
WHICH ONE IS BIGGER, 1 OR 2?
OH, they’re actually the same size.
23
BALANCE
B
To make a letter like B feel as if its top and bottom halve match,they often need to be drawn differently.
TURN IT OVER!
you’ll see that it’s actually
smaller above than below.
B 24
S
THE DIABOLICAL LETTER S
An S that’s balanced and centered looks bizarre when turned around. It’s thinner at the top and bottom, thicker in the middle, and it leans slightly backwards
25
S
TYPE PROPERTIES 02
FONT VARIATIONS Using variations of weight and style can help to create visual hierarchy.
WEIGHT Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights from ultra-light to extra-bold or black, and four to six weights is a typical number available for a typeface, and a few others have as many as a dozen.
28
TYPE PROPERTIES
light medium bold
29
uj
regular
light
semi-bold
30
v i extra light
bold
thin
extra-bold
31
FONT VARIATIONS
STYLE The style of a font is usually connected to an angle. It is either upright or slanted. The normal style is upright or roman and will display by default. Many font families have an italics version of the font. The italic font style of a typeface has been slanted to the right and has had other changes made to the letter glyphs to make them slightly different. It approaches a more handwritten, cursive style. Sometimes the characters may even connect.
32
TYPE PROPERTIES
roman italic
roman oblique Note: Oblique font faces are found in many sans-serif typefaces. Their characters are also slanted but, unlike italics, the glyphs themselves are not changed. Oblique fonts are not true italics because they lack the change in letter shapes which is part of the definition of “italic� 33
34
35
POSITIONING & SPACING Time to think about the spatial relationships between letters Time to think about the spatial relationships between letters.
xxxx BASELINE
The invisible invisible horizontal horizontal line line that that all all letters letters rest rest on. on. This This is is the the line line The across the bottom of the x-height. The curves of some letters, across the bottom of the x-height. The curves of some letters, descenders, and punctuation marks often go below the boundaries of descenders, the baseline. and punctuation marks often go below the boundaries of the baseline.
36 10
TYPE PROPERTIES
x xx X-HEIGHT
The The x-height x-height refers refers to to the the distance distance between between the the baseline baseline and and the the top top of the lower case line in a typeface. Typically, this is the height of the of the lower case line in a typeface. Typically, this is the height of the letter x in the font (the source of the term). letterx-height x in the is font (the source of the The a relative measure of term). typeface, so different typefaces The x-height is a relative measure of typeface, so different typefaces set in the same point size may appear differently. A typeface withpoint a large x-height looksdifferently. much bigger than a typeface set in the same size may appear A typeface with a with small x-height at the samethan size.aTypefaces withatall x-heights largeax-height looks much bigger typeface with small x-height have better legibility at small font sizes, as the white space within at the same size. Typefaces with tall x-heights have better legibility at each letter is more legible. small font sizes, as the white space within each letter is more legible.
On On the the illustration illustration above, above, all all letters were set in 150 points, yet letters were set in 300 points, resulting in different heights of yet resulting in different the lower case. The relationship heights of the The of the x-heightlower to thecase. em square defines the perceived type size. relationship of the x-height to the em square defines the perceived type size.
37 11
POSITIONING & SPACING
CAP-HEIGHT Cap height refers to the height of a typeface’s flat capital letters (such as M or I) measured from the baseline. Round and pointed capital letters, such as S and A, are optically adjusted by being drawn with a slight overshoot above the cap-height to achieve the effect of being the same size. Every typeface has a unique cap-height.
38
TYPE PROPERTIES
39
POSITIONING & SPACING
LEADING The spacing between the baselines of the typeface is referred as Leading. The word leading has originated from the lead strips that were used in the old handset printing presses. The lead strips in the older letterpress used to serve the same purpose as Leading in modern typeface design. Through the adjustment of the space within a page can be utilized properly. By bigger or shorter leading space the aesthetics of typographical design can also be changed to a great extent. More leading means your text will be easier to read.
61/82 pts.
40
LEADING LEADING LEADING
is is is is
TYPE PROPERTIES
75/65 pts.
IMPORTANT IMPORTANT
Negative leading
Default leading
Positive leading
The unit of measure for leading in most programs is points—same as for measuring type size. When you specifying a typeface’s measurement and leading, you’ll write, for example “10/12”—the first number is the point size and the second number is the leading size. The default starting size for leading is roughly 2 points more than the point size—this measurement is sometimes referred to as default leading.
The unit of measure for leading in most programs is points—same as for measuring type size. When you specifying a typeface’s measurement and leading, you’ll write, for example “10/12”—the first number is the point size and the second number is the leading size. The default starting size for leading is roughly 2 points more...
The unit of measure for leading in most programs is points—same as for measuring type size. When you specifying a typeface’s measurement and leading, you’ll write, for example “10/12”—the first number is the point size and the second number is the leading size... 41
Inter Regular, 8/7 pts.
Inter Regular, 8/9.6 pts.
Inter Regular, 8/11 pts.
POSITIONING & SPACING
KERNING In typography, kerning is the process of adjusting the spacing
Depending on the letters, space
between characters usually to achieve a visually pleasing result.
should be reduced or increased.
Kerning adjusts the spacing between individual letterforms. In a
Common characters that require
well-kerned font, the two-dimensional blank spaces between each
some kerning adjustments
pair of characters all have similar area. Even after applying kerning
include uppercase letters that
the change is expected to be very subtle and almost imperceptible.
have a diagonal shape followed
In most cases without looking intently at the typeface people
by a curved one or another
cannot realize the change in the space between individual letters.
diagonal one.
TYPE TYPE Before Kerning
After Kerning
42
Kerning isn’t a mathematically equal amount of space, it’s a perceived equal amount of space between letters according to the human eye.
TYPE PROPERTIES
To get more accustomed to this thought process, consider looking at the negative (white) space between each letter and try the following:
TIP 1
TIP 2
TIP 3
Manipulate it to make it of an
Once you’ve established your
Always avoid letting serifs touch
equal mass within similarly
point of reference, keep the
each other.
shaped letters (e.g., straight/
negative space consistent
round, straight/straight, round/
throughout.
round letters).
Ke rning ohno! THIS IS NOT HOW YOU SHOULD DO IT
43
POSITIONING & SPACING
TRACKING Tracking is another effective method of spatial adjustment much like kerning but in this case, instead of adjusting space between individual letters, it is the process of reducing or increasing space between letters in words or blocks of text. Tracking can be tight or loose. Tightening or loosening the tracking decreases or increases the overall spacing throughout the selected words or block of text by the same proportional amount. When text is tracked too tightly, the words appear crowded and touch each other, and become difficult to read. On the other hand, when the text is tracked too loosely, it presents too much white space between the words, which makes it hard to read as well.
Tracking Tracking Tracking
-40 tracking
44
0 tracking
50 tracking
TYPE PROPERTIES
orphans? Through tracking, you can easily eliminate orphan lines and make them appear neatly organized.
!
!
WITHOUT TRACKING
WITH TRACKING
In the world of “typography” where the printed page is sometimes classified as a work of exquisite craft (or even art, if you ask some typophiles), there is a villain known as the orphan. This really might seem like one of those pedantic issues that only stuffy designers care about, but it’s an issue that can be easily avoided once you know to look for it. It’s bad enough when a single word stands on a line of its own, but a short word is even worse. The horribly short two-letter word at the end of the first paragraph creates a huge white gap between the two paragraphs.
In the world of “typography” where the printed page is sometimes classified as a work of exquisite craft (or even art, if you ask some typophiles), there is a villain known as the orphan. This really might seem like one of those pedantic issues that only stuffy designers care about, but it’s an issue that can be easily avoided once you know to look for it. It’s bad enough when a single word stands on a line of its own, but a short word is even worse. The horribly short two-letter word at the end of the first paragraph creates a huge white gap between the two paragraphs.
45
PONCTUATION Punctuation refers to typographic symbols (and sometimes spaces) used to clarify the meaning of text, as well as to aid in reading comprehension. Some punctuation marks – such as commas, periods, dashes and colons – serve to divide text into phrases and sentences, directly impacting, and sometimes significantly altering, their meaning and interpretation.
TERMINAL POINTS PERIOD (.)
QUESTION MARK (?)
EXCLAMATION MARK (!)
The period is a neutral way to
The question mark is used at
Exclamation marks are used to
mark a pause or complete a thought and it’s used to end a sentence.
the end of a direct question and replaces a period at the end of a sentence. Because of this, the word that follows a question mark should be capitalised.
add emphasis to sentences, express excitement, surprise, astonishment, or any other such strong emotion.
PAUSING POINTS COMMA (,)
SEMICOLON (;)
COLON (:)
The comma is a rather complex
Usually described as a
Used to introduce lists and to put
punctuation mark and can be
punctuation mark in the middle
emphasis on a phrase or single
used in many different ways:
of a comma and a period. Yet
word at the end of a sentence.
it can separate grammatical
there is more to the semicolon
Other non-grammatical uses of
components of a sentence and
than that.
the colon include: to separate
create pauses to simulate when
hours from minutes when giving
a sentence is spoken aloud.
time, to express a ratio of two
The presence or absence of a
numbers, to separate the volume
comma can change the meaning
from page numbers of a cited
of a sentence.
work and in business or personal correspondence.
46
TYPE PROPERTIES
Without the benefit of correct punctuation, text may be subject to misinterpretation in dramatic, and even embarrassing ways. Most punctuation marks are designed to visually complement the typeface they are part of, in terms of weight, width, angle, and other design characteristics.
PARENTHESES, BRACKETS & BRACES PARENTHESES ( )
BRACKETS [ ]
BRACES { }
Parentheses are always used
Brackets allow the insertion of
Also known as curly brackets,
in pairs and allow a writer to
editorial material inside quotations.
these marks are used in
provide additional information.
programming languages, mathematical expressions, and some musical notation.
HYPHENS AND DASHES THE EM DASH (—)
THE EN DASH (–)
THE HYPHEN (-)
Perhaps the most versatile
The en dash is used to represent
The hyphen is used for word
a span or range of numbers,
division and to form certain
dates, or time. There should
compound terms and to join
be no space between the en
digits in phone numbers.
punctuation mark, the em dash can take the place of commas, parentheses, or colons. Being so versatile can create confusion if overused, therefore it is best limited to two appearances per sentence. Two em dashes can be
dash and the adjacent material. En dashes can also be used between words to represent conflict, connection, or direction.
used to indicate missing portions of a word, whether unknown or intentionally omitted.
47
48
49
HOW MANY PONCTUATION MARKS CAN YOU FIND?
50
51
52
53
TYPE CLASSIFICATION 03
CLASSICALS The classicals can be broken down into Humanist, Garald, and Transitional categories, and are characterized by triangular serifs, oblique axis, and low stroke contrast. In other classification systems, this group is often referred to as “oldstyle.”
HUMANIST SERIF Don’t be fooled! Humanist characters may look like somebody just wrote you a letter by hand but in reality they are typefaces. With a natural, organic look Humanist typefaces tend to have an axis inclined to the left that resembles calligraphy. They are characterized by the cross stroke of the lower case “e” which is oblique; there is no great contrast between thin and thick strokes, the serifs are bracketed and the serifs of the ascenders in the lower case are oblique. Exemples include Verona, Centaur and Jenson.
56
gQ
j eh TYPE CLASSIFICATION
m
03 57
CLASSICALS
GARALD Also called Aldine, this group is named in homage to Claude Garamond and Aldus Manutius. In general, the garaldes have finer proportions than the humanists, and a stronger contrast between downstroke and upstroke. The weight of the garaldes are distributed according to an oblique axis. In France, under King Francis I, the garaldes were the tool which supported the official fixing of grammar and orthography. Exemples of this typeface includes Garamond and Bembo.
58
TYPE CLASSIFICATION
REAL OR TRANSITIONAL Transitional typefaces were created by John Baskerville, in the mid 18th century. These typefaces take inspiration from both old style and neoclassical type designs. Baskerville’s developments with calendared paper and printing methods, opened up opportunities to create typefaces that maintained finer strokes and shapes. Some characteristics of this typeface are: a contrast more distinctive, vertical axis on the strokes and inclined axes for cuves strokes, bracketed serifs and slanted serifs on ascenders. Popular slab serif fonts include Baskerville and Times New Roman.
59
CLASSICALS CLASSICALS
CAN YOUguess GUESSwhich WHICH ONEtwo OF THE TWO LETTERSinISGaramond WRITTEN IN Can you of the letters is written and GARAMOND ANDinWHICH IS WRITTEN IN BASKERVILLE? which is written Baskerville? The dots will give you tips!
ee gg AA bb THE DOTS WILL GIVE YOU TIPS!
60 06
TYPE TYPE CLASSIFICATION CLASSIFICATION
o o hh CC k k 61 07
MODERNS The moderns are characterized by a simple, functional feel that gained momentum during the industrial period of the late 19th century and early 20th century.
DIDONE The Didone name comes from combining two popular Didone typefaces, Didot and Bodoni, together. Didone typefaces, also called Neoclassical or Modern, became popular at the turn of the 18th century and have never really gone out of style since they are practically synonymous with elegant and sophisticated type design. Didones are characterized by extreme weight contrast between thick and thin strokes, vertical stress, narrow and delicate serifs, and a uniform modern appearance. Luxury brands like Cartier and Christian Dior use Didone typefaces for their logo.
62
M
TYPE TYPE CLASSIFICATION CLASSIFICATION
63 09
MODERNS
SLAB-SERIF You can’t go far, typographically speaking, without seeing a slab serif. Whether in a magazine article or an advertisement, in a logotype, a poster, a book cover or signage; places where a display font is required. A slab serif font, often called square serif or Egyptian, is a serif font where the serif is squared off, giving the font a blocky, sturdy appearance as opposed to the more refined look of a traditional serif. Slab serifs tend to have less contrast overall than other serifs, which contributes to their heavy, geometric, often dramatic and confident appearance. Popular slab serif fonts include Rockwell, Clarendon and Courier.
64
TYPE CLASSIFICATION
65
MODERNS - LINEALS
GROTESQUE Sans serif typefaces largely came on to the design scene in the early 20th century. These early sans serif typefaces were called Grotesque (or Gothic Fonts) and included typefaces like Franklin Gothic. They were called “grotesque” due to their rejection of the more “elegant” serif design elements. These typefaces tend to be very distinct, with awkward weight distribution around bowls of characters and irregular curves.
66
TYPE CLASSIFICATION
NEO-GROTESQUE Later in the 1900s, after the Grotesques came the Neo-Grotesque sans serif typefaces (also called Transitionals or Realists). They generally have much plainer designs and their proportions are more square than condensed. These typefaces lose many of the awkward curves and peculiarities that are common in earlier sans serifs and you’ll see much less variation in line weight. They were created with an emphasis on neutrality and simplicity. Helvetica is an example of Neo-Grotesque sans serifs.
67
R R R R R y R y QQQQ y y uuu y y a a
g
a aa a
aa aa
y RRR R R
y uuu y
a
yR QQQQ y a
g
aa aa
y
aa aa
MODERNS - LINEALS
GEOMETRIC Geometric sans serifs, like the Modern serifs, took the style to the edge. They have letterforms based on simple geometric shapes — most notably the circular ‘O’ shapes — and are very modern. Basic geometric shapes like a circle, square or triangle play a major role in the design of the typeface. As a result, the structure of these fonts, based on formal and optical repetition, lends them a very structured character, generally speaking.Their ultra-modern shapes do sacrifice legibility at smaller sizes, however. Futura is the most notable Geometric sans serif.
70
TYPE CLASSIFICATION
71
MODERNS - LINEALS
HUMANIST Humanistic sans serifs sought to retain some of the influence that natural handwriting had on the letterforms of earlier typefaces. These are more calligraphic than other sans-serif typefaces, and are also the most legible. The letterforms are made more approachable through features like variable stroke widths. Gill Sans is one of the more popular sans serif typefaces.
72
Q
Qg TYPE CLASSIFICATION
R t
19 73
JUST YOUR TYPE An easy guide to typography January 2021 Lisbon Graphic project Francisca Andrade Marina Silva Rita Carreira Margarida Melo Fonts Inter Poppins Not original text. Project developed within the subject of Editorial Design, degree in Communication Design (2020—2021), Faculty of Fine Arts of ULisboa.
Type is power. The power to express words and ideas visually. It's timeless but always changing. Type is everywhere – street signs, magazines, the web. Every typeface you see around you has been painstakingly and carefully planned out, and each has its own personality and vibe. But have you ever stopped to wonder how the typefaces we encounter everyday came to be? Who invented them, and why? If you’re interested in learning more about typography, you’ve come to the right place.