Type Anatomy Crash Course Teaches You Must-Knows In Bite-Sized Tweets
The back bone’s connected to the neck bone, and the neck bone’s connected to the head bone. If only there was a song to remember typographic body parts as easily as the human anatomy.
Pablo Stanley, design lead at InVision, thankfully has the next best thing: a Twitter thread to help you conquer the basics of typography.
Each post in the eight-part tweetstorm teaches you a couple of type anatomy terms, and is paired with a short video to serve as a visual aid. Check out the full crash course below.
Pablo Stanley@pablostanleyTYPE ANATOMY 101 THREAD! (1-8)
Let’s nerd-out with some basic type elementsBASELINE: The line where all the letters sit.
CAP HEIGHT: The distance from the baseline to the top of the capital letters.
X-HEIGHT: The height of lowercase letters excluding ascenders and descenders
Pablo Stanley@pablostanley(2-8)
STEM: Vertical, full-length stroke in upright characters.
SERIF: A stroke added at the beginning and end of main strokes.
BOWL: The closed, curved part of letters such as b, d, o, B.
DESCENDER: The part of lowercase letters, such as q and y, that extends below the baseline.
Pablo Stanley@pablostanley(3-8)
LIGATURES occur where two or more letters are joined as a single glyph. Some ligatures represent specific sounds or words such as the æ ligature and the ampersand (&) which represents the Latin letters e and t. Other ligatures are stylistic for example fi, ff, ffi, st.
Pablo Stanley@pablostanley(4-8)
TERMINAL: The end of a stroke without a serif.
EYE: The enclosed space in a lowercase “e.”
FINIAL: A curved end.
SPINE: The main curved stroke of the letter S
ASCENDER: The portion of a lowercase letter that extends above the x-height.
Pablo Stanley@pablostanley(5-8)
UPPERCASE: Capital letters.
SMALLS CAPS: Lowercase glyphs that resemble uppercase letters but reduced in height and weight.
LOWERCASE: Little letters! The smaller form of characters in a typeface.
Pablo Stanley@pablostanley(6-8)
CROSSBAR: Horizontal stroke in letters
COUNTER: The open space in a closed area within a glyph
EAR: A stroke on the upper-right of lowercase g and some r
NECK: A stroke that connects the top and bottom of double-story g’s
LOOP: Counter below the baseline of a two-story g
Pablo Stanley@pablostanley(7-8)
TRACKING VS KERNING:
These two sometimes get confused.
Tracking adjusts the overall spacing between all the characters of a word or block of text—this affects the density.
Kerning refers to the spacing between a pair of letters to correct for visually uneven spacing.
Pablo Stanley@pablostanley(8-8)
PRACTICE!!!
Ok, it’s time to put into practice what we’ve just learned—can you name at least eight points from the image?If you wanna learn more I recommend
Thinking with Type: https://www.amazon.com/dp/1568989695/
Flawless Typography by @Typewolf: https://www.typewolf.com/checklist
[via Pablo Stanley]