Typography.
Basic Guide
The
Mildred Santos Erosa Designed
by
Typography
The Basic Guide
Erosa
by
Mildred Santos
Designed
Anatomy 3 25 Arm Ascender Ball Bar Bowl Counter Descender Ear Eye Foot Kerning Serif Shoulder Stem Stroke Tail Tittle Tracking Baseline Cap-Height
Leading Weight
X-Height
Type Properties Content
Type Classification
Serif
Sans Serif
Monospace
Display Script
Type Glossary
Glyph
Character
Legibility
Readability
Getting to know terminology…
It’s useful to know the terminology that’s used to describe the design of a typeface.
First, a typeface is a collection of fonts that share the same design, each one of the glyphs have a unique design, but between them there’s a shared pattern. A typeface may include letters, numerals, punctuation and various symbols. It is a family containing individual fonts, which vary by being italic, bold, light, etc. We use typefaces because of their aspect, style, legibility and readability.
41
33
a Anatomy
Arm a
Is a horizontal stroke which only connects to one part of the letter.
4
a Ascender
Lowercase letters which body extends above the X-Height, such as b, d, h, k and l.
5
Ball Terminal
X-Height
Appears at the end of a stroke, it has a curved shape.
a
6
a Bar
Horizontal stroke that goes across the middle of an uppercase or that goes under the Eye of a lower case.
7
a Bowl
The curved part of a letter which encloses a Counter.
8
a Counter
It’s the space of an enclosed area of a letterform. The letter ‘E’ has its own term, named Eye.
9
Descender
Opposite to the Ascender, it refers to lowercase letters that go below the Baseline.
Baseline
a
10
a Ear
11
It’s a decorative part of a character, usually found on the lowercase ‘g’.
It’s the space enclosed in a lowercase.
a Eye
12
a Foot
It appears mostly in Serif typefaces, it rests on the Baseline and it is an extension of the Stem.
13 Baseline
Kerning
It’s the horizontal space in-between two letters.
a
14
Serif
Stroke which extends the ends of a letterform, if a letterform lacks this strokes it’s called Sans-Serif.
a
15
Shoulder
Is the curved stroke in lowercases such as m or n.
a
16
a Stem
It’s the main stroke of a letterform.
17
Stroke
Similar to a Stem but is mostly known for being the diagonal part of a letterform.
For letters such as A and V, they have both, Stroke and Stem.
a
18
a Tail
Is a decorative stroke, usually found on the uppercase ‘Q’.
The Descender is also known as Tail in letters such as g, j, p, q and y.
19
a Tittle
Is a small shape on top of a lowercase, like i or j.
20
a Tracking
It’s the space between characters in a text.
21
a 22
Typefaces
Helvetica Aa
It’s one of the most famous typefaces in the world, originally it was called Neue Haas Grotesk, designed by Max Miedinger in 1957 for the Haas Type Foundry in Switzerland. The name was changed to Helvetica in 1960 which is the latin name for Switzerland.
Typefaces
Futura Aa
It’s considered the major typeface out of the Bauhaus movement in Germany, designed by Paul Renner in 1927, first presented by the Bauer Type Foundry in 1928. The original drawings were based on simple forms of circles, triangles and squares, becoming a modern typeface in 1928 and nowadays continues to be so, expressing strength, elegance and clarity.
Type Properties tp
Baseline
Is an invisible line where the characters sit. Part of the character could rest below this line.
tp
26
Is an invisible line marking the upper end of capital letters.
Cap-Height
tp
27
Is the height of the lowercases without counting the Ascenders or Descenders.
x-height
tp
28
Is the space between texts, from Baseline to Baseline.
Leading Leading
tp
29
Refers to the heaviness of the stroke in a single typeface. The common weights are Light, Regular, Medium and Bold.
Weight
tp
30
Typefaces
Aa
Times New Roman
Stanley Morison was commissioned a type design for The Times of London in 1931. Morison supervised while it was drawn by Victor Lardent, artist from the advertising department of The Times. It became successful, and the typeface became popular in print because of its readability and continues to be nowadays.
Typefaces Baskerville Aa
Designed by John Baskerville in 1757 in Birmingham, England. Baskerville was used in the printing presses and is classified as a transitional serif between old style and a modern typeface, it represented a transition from the old style of the past centuries and set the bar for the modern typefaces to follow.
Type Classification tc
Serif tc
It’s a line or stoke which appears at the end of a Stem in a letter or a symbol. Serifs aren’t just used for their aesthetics but also for their legibility in smaller scales, specifically in print.
34
tc
Sans Serif
Sans means “without” in Latin, which means that contrary to Serif typefaces, Sans Serif typefaces lacks the stroke at the end of a stem.
35
tc
Monospaced
These typefaces have characters with the same width. It is used by code editors by default.
36
Display typefaces are designed with decorative purposes and are used in larger settings.
Display
tc 37
Script
These typefaces reflect a handwritten feel, they are divided between formal or informal type.
tc 38
Typefaces Garamond Aa
Created by Claude Garamond in the 16th century, it is a combination of elegance and practicality. Nowadays there are a lot of adapted versions of the original typeface, and the original type punches are preserved in the Imprimerie Nationale in Paris.
Typefaces Bodoni Aa
Designed by Giambattista Bodoni in 1798, inspired by the work of John Baskerville. It has had many interpretations by design houses throughout the years, this serif typeface is very well-known and well suited for titles and logos.
Type Glossary tg
It refers to any Character in a typeface, for each character there could be more than one glyph. For ex.: a,a
Any letter, numeral, punctuation mark, and other sign in a font. Some characters could have more than one Glyph.
It refers to how easy it is for the reader to decipher and correctly identify the glyphs of a text. Legibility affects Readability.
It refers to how easy we are able to read a block of text, affected by the style of a typeface.
Open Type Font is a format for computers to download typefaces, developed by Adobe in the 90’s.
OTF tg
Glyph Charcter Legibility Readability
42
References
Glossary. (n.d.). FontShop. https://www.fontshop.com/glossary#glyph
Supremo. (n.d.). Type Terms. Supremo. https://www.supremo.co.uk/typeterms/
Material Design. (n.d.). Material Design. https://m2.material.io/design/typography/understanding-typography.html#type-properties
LinoType. (n.d.). Helvetica. https://www.linotype.com/es/1308886/helvetica-familia.html
LinoType. (n.d.). Futura. https://www.linotype.com/es/1212991/futura-familia.html
Dmcwo’s Notebook (2019). Visiting Baskerville in Intro to Typography. https://dmcwo. github.io/dmcwo/blog/visiting-baskerville/
Bodoni Font Family Typeface Story | Fonts.com. (n.d.). Fonts.com. https://www.fonts.com/ font/linotype/bodoni/story
EB Garamond - Google Fonts. (n.d.). Google Fonts. https://fonts.google.com/specimen/ EB+Garamond
Bodoni Font Family Typeface Story | Fonts.com. (n.d.-b). Fonts.com. https://www.fonts. com/font/linotype/bodoni/story
"Typography the Basic Guide"
Designed by
2023
Mildred Santos Erosa