Check out a free preview of the full Design Systems with React & Storybook course:
The "Typography" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Emma defines ascenders, descenders, cap lines, X-heights, tracking, kerning, and leading in the context of typography.

Get Unlimited Access Now

Transcript from the "Typography" Lesson

[00:00:00]
>> Let's talk about typography. Let's go over some terminology. So an ascender is the piece of the letter that actually rises above the x-height. So we've got these two lines that kinda set boundaries on our different font families. And anything that rises above's called an ascender. And on the opposite side, anything that dips below that bottom line is called a descender.

[00:00:26] The baseline is just that imaginary line that our letters are gonna sit on. And the cap line is the one that comes right above it. So we've got our cap line, our baseline, our ascenders and our descenders, which go above and below those. The x-height is just gonna be the height of the typeface's lowercase letters.

[00:00:49] Tracking is actually the uniform amounts of spacing between characters. So you can see here we've got some normal tracking, and we've got some tight tracking that reduces the letter spacing, and we've got looser tracking. You might have heard of kerning if you work with developers. Kerning is the horizontal spacing between two characters.

[00:01:08] And you might hear too, this, this font family has terrible kerning, we can't use it. So that's what they're talking about. Now this is not called leading, it's called letting, which is very confusing if you've not heard that before. It's just the vertical space in between lines, so line spacing.

[00:01:25] So we've got normal leading there, tight leading and loose leading. And actually, if you have super tight leading or super loose leading, it's gonna be harder for your users to read it. If you have really loose leading, or if you have really wide text, it's gonna actually cause some eye strain.

[00:01:40] I don't remember the actual pixel amount, but there is a specific width after which if you go longer, if you have really long paragraphs of text on your interfaces, it's hard for your users to keep reading it. It's gonna strain their eyes.