Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
medium bookmark / Raindrop.io |
Learn the basics of typography in this quick video!
The more we communicate, the closer we become. Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.
Start with the basics with this quick video below. Learn the anatomy of a letter.
Common Typography Terms
Familiarize yourself with these terms to get a better handle on typography.
Baseline
The invisible line letters rest on.
Stem
A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a crossbar detail, like the letter H.
Ascender/Descender
Letters with downward strokes that extend past the baseline have Descender strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the Ascender stroke.
Upper/Lowercase Letters
Uppercase letters are capital letters. Lowercase letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.
X-Height
For lowercase letters, the X-height is the main body of the letter.
Counters and Spine
Fully or partially closed spaces found in letters like O, A, and B. If the letter isn’t fully closed, then it’s an Open Counter.
Ear and Shoulder
An Ear is a decorative detail that pokes out from letters like g. A Shoulder is a bumped curve seen in letters like m and n.
Serif vs. Sans Serif
Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.
Learn More About Typography
Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time.
Get Amazing Design Resources
Want to create videos like this? Download the resources used in this video:
Check out these tutorials to learn more from our experts:
