Fonts

[00:00:00]
>> So what types of fonts? Serif fonts have short lines or strokes on the ends of their letters. So Times New Roman is just the default serif font that everyone knows of. Droid Serif, anything that's a serif is a serif font. Again, Sans-serif or Sans-serif, sans means without in French, so they don't have lines on the ends of their letters or strokes on the ends of their letters.

[00:00:22]
So IBM Plex Sans, PT Sans, Helvetia, those are all Sans-serif fonts. And serif fonts are typically very traditional, you'll probably see it in printed newspapers or things that are a little bit more prestigious, I guess. And then, Sans-serif are gonna be more modern, so you might see this on a technical blog or another website that's a little more colloquial, it's a little more casual.

[00:00:45]
We've got Monospaced fonts, which are our favorites, we use them in our IDEs and our text editors. So these are fonts where the letters and the characters occupy the same amount of space. So in other fonts like you'll see here, like the letters actually span different widths. In monospaced fonts, every letter takes up the same amount of space.

[00:01:05]
Let's talk about font measurements for a second. We're all familiar with pixels, so pixels are the units used by designers and we often use it throughout our UIs. And there's still some debate as to whether pixels or Or Rem is the best unit to use. We're gonna talk about all three today, so pixels can be used but they traditionally did pose an accessibility issue.

[00:01:25]
So let's talk about that. We've got And we've got Rem, so these are the relative units. So Rem is actually going to be relative to the document body, I believe. It's either HTML element or the the body element. We're gonna set this when we actually code our our global styles today.

[00:01:42]
And anything that we set a Rem value on is going to be relative. So like if we have 16 pixels on our HTML element, and we set 1.2 Rem on a text element like a header, for example, it's gonna multiply 1.2 times that base 16 value, and why is that great?

[00:01:58]
That's really great because users who are visually impaired can go into their browsers and change the default base size of the font. So typically, it would be 16 pixels, I believe, but if I'm a user who has a visual impairment and I go into my browser settings and I change that to 20 pixels, by using Rem, I'm actually able to adjust the relative size of all of my text content.

[00:02:20]
You shouldn't use Rem and For spacing, those can get a little weird with layouts, but they're really good for font. In relation is going to be relative to the nearest parent element that has a designated pixel value. So those are a little bit more, they're not as standardized as like Rem.

[00:02:38]
You set it on the base, you know everything is gonna be consistent. If you set it on a parent somewhere in the DOM, it's gonna be a little bit harder to calculate what that's gonna be.