Fonts & Typography

[00:00:00]
>> So you'll notice that the first font-family, Georgia in this example, so first of all, a font-family is a list of one or more font-family names and/or generic family names. So we've got font-family: Georgia, serif. And the second one is font-family is Comic Sans in quotations, sans-serif. So the first font-family, Georgia, it doesn't have quotes around the name, while the second one does.

[00:00:25]
And it's really good practice to quote font-family names that have whitespace or digits or punctuation. Anything other than a hyphen, it should be in quotes. You'll also notice we've got serif and sans-serif noted after a comma, and that's because these are generic font-families. So these are essentially a fallback mechanism, where if we declare a font and it's not available, this fallback family is what's going to be rendered.

[00:00:55]
This is not a comprehensive list of the generic font-families, but you'll typically see these the most, right, monospace or serif, sans-serif. Let's take a look at what these are actually, what they look like. So in serif fonts, the glyphs have finishing strokes, flared or tapering ends, or they have actual serif endings.

[00:01:16]
And that stroke is one of the main lines that make up the appearance of a character. So here are a couple of fonts that are serif fonts. You can see they have that little tail on the end of each character. You might see this in, the font-family is they go back to the whole brand identity of your website.

[00:01:34]
So if you have a really established newspaper, The New York Times, for example, they might use a serif font because it's typically more established in feeling. The contrast of this sans-serif, sans in French means without, so means without serif. So the glyphs have stroke endings that are plain, they don't have that tail at the end, right?

[00:01:58]
So here are few fonts that are sans-serif fonts. They don't have that tail at the end. And sans-serif fonts are typically more playful. So you might see this on a really modern website builder, like Squarespace or something that has a little bit more bubbly personality. And then I think most of us, if we are developers, are familiar with monospace fonts.

[00:02:24]
All glyphs have the same fixed width, so we use these in our code editors. Yeah, question.
>> Are family names case-sensitive?
>> That's actually a great question. Are font-family names case-sensitive? Let's Google it together. Are CSS font-family names case-sensitive? It is case-insensitive within the ASCII range, according to Stack Overflow.

[00:02:54]
I mean, I think it's good practice to follow the capitalization, but yeah, They are case-insensitive according to my first page Google search. That's a fantastic question, though. Okay, some of the properties we will see when it comes to font-family. So font weight, often, this is dependent on the font-family being used.

[00:03:21]
There are limitations, some font-families don't allow for really bolded font. Some don't allow for a really thin font, but it does set the bold appearance of a font. So here are some of the values, right? So it can take a keyword, like normal or bold. There are keywords that are relative to parent, like bolder or lighter.

[00:03:42]
There are numeric key values, like 100 or 700. And then there are global values, like inherent. If you decided to use numerical weight, they do map to some of these keyword values. So 100 is gonna be really, really thin or hairline. Probably not the best to use on a website, probably not very accessible.

[00:04:00]
400 is normal font weight, 700 is bold font weight. So that's how those numerical values are mapped to the keywords. Font size sets the size of the font. And there are a few values that are accepted when you're defining your font size. So we've got absolute values, relative values, length values, percentage values, and global values.

[00:04:29]
Let's see what this means. So absolute values, you probably won't see them very often, it's based on the user's default font size, which is medium. But there's xx-small, x-small, small, medium, xx-large, kind of T-shirt sizes, I suppose, you probably will not see these very often. Yeah, Mark.
>> Is making font size a function of viewport with a common practice?

[00:04:54]
>> We're gonna talk about and rem, it's like calculating based on a viewport size. I don't think viewport size, but in terms of the root to clear a font size or the user-defined font size, the x that is common practice, and we'll talk about that. So we've relative values smaller or larger it makes it relative to the parent's font size.

[00:05:17]
Again, you probably won't see these very often. Length values are gonna be the most commonly used. So we've got pixels, and rem. I know and rem seem to confuse many people, so let's talk about those. For most font-relative units like the font size is relative to the parent element's font size.

[00:05:38]
So here we've got a div, it has one child, a paragraph element. On the HTML, we're setting a font size of 16 pixels. On the div element, we're setting font-size of 2em, and on paragraph, font-size also 2em. So if we calculate this, we've got a base of 16 pixels on HTML, times 2em for the div, gives us a font size of 32 pixels for a div element.

[00:06:07]
Now, the paragraph element, again, is relative to its parent, which is our div. So instead of 16 pixels times 2em, it is 32 pixels times 2em. This gives us a font size for that paragraph of 64 pixels. So again, relative to the parent. Rem is relative to the root.

[00:06:31]
So instead of calculating the div first and then the paragraph font size, these are both gonna be relative to the font size declared in HTML, on that HTML element of 16. So both the div and the paragraph have a declared font size of 2rem, and that calculates out to 32 pixels for each.

[00:06:50]
>> And so does this helps in responsiveness?
>> Does it help with responsiveness? Yes, we're gonna talk about this right now. Yeah, so there is a debate about which one we should be using. Many argue we shouldn't use pixels because they're not scalable, not responsive, right? So if we declare, this paragraph needs to be 16 pixels, it'll be 16 pixels.

[00:07:14]
Of course, users can zoom, right? But for users who set a different default font size, maybe they want their base font size to be 20 pixels instead of 16, using and rem, they will scale. That's why it's really useful for responsive design. Yeah, the thing is since is calculated based on the parent, it can be a little tricky when you're nesting elements to know exactly what font size a nested child's gonna have, right?

[00:07:43]
So I always recommend using rem, that's relative to the base, the root to clear the font size. And that will scale nicely as users update their base font size in their browser. Does that answer your question?
>> Yeah.
>> Okay, you're welcome. So we have percentage values as well.

[00:08:05]
Positive percent value is relative to the parent font size again. So here, we've got a declared font size again, 16 pixels on HTML. The div has a font size of 120%, and paragraph is also font size of 120%. And it gets a little bit messy, right? So 120% is 16 pixels declared in the HTML times 1.2, gives us a font size for that div of 19.2 pixels.

[00:08:36]
And then instead of using that 16 pixels for the paragraph calculation, we have to refer to its parent, which is the div. It's very confusing, this is why you're not often seeing percentages declared for font size. But this is how you would calculate that if need be. You look to its parent to see what font size they have and you multiply.

[00:09:01]
So we've also got a couple global values. So inherit, font size inherit, it's gonna set the property to the computed value of the property from its parent. So it's gonna inherit that font size from whatever its parent has. Initial applies the initial or default value of a property, so it would be maybe 16 pixels, if that's the initial.

[00:09:22]
Revert and revert-layer are a little tricky, and we're not gonna cover those in this since this is a foundational course. You're welcome to refer to the Mozilla documents linked below. And then unset will reset a property to its inherited value if the property naturally inherits from the parent, like color, for example, is inherited, right?

[00:09:43]
So if the property is not heritable by default, it's just set to the default. You'll see these keywords used in a lot of places with a lot of different properties. Okay, text decoration. So this is gonna set the appearance of decorative lines on texts. So it's shorthand for text-decoration-line, text-decoration-color, style, and thickness.

[00:10:08]
So this is a concept of shorthand. So instead of defining multiple CSS properties, we can use shorthand keywords and many different properties to change several properties at once. So here we've got an example that shows four different properties defined on this paragraph element for text-decoration-line, text-decoration-color, style, and thickness.

[00:10:30]
So we got four declarations there, but we can just use the text-decoration shorthand to set all of those in one go. You'll see this a lot with transition and other, trying to think, of course, when I have to come up with examples of my mind, I can't. But yeah, you'll see shorthand often, and I'll make sure to call that out.