Introduction to Web Development CSS Text Properties and Measurements

Transcript from the "CSS Text Properties and Measurements" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: We're just gonna go over a handful. There's a ton of CSS properties. Ton, ton, ton, ton. And there's good resources on it. We talked a little bit about the MDN. MDN's great for CSS. Again, stands for the Mozilla Developer Network. It's like the bible of front-end web development.

[00:00:24] If it says it in the MDN, it's truth. CodePen, the creator has another site called CSS Tricks. He has a glossary of CSS, super useful. The MDN gets really technical sometimes. And CSS Tricks is really good at putting it like, in layman's terms and giving examples, and stuff like that.

[00:00:46] So, for CSS, I highly recommend Chris Coyer's website, which is CSS Tricks. Okay, so, let's talk about some ways just to modify text, right? And there's umpteen billion. This is just some of the highlights. Color, think you can kind of figure that one out. It modifies the text color.

[00:01:08] Font weight. So, you can say normal, and that'll be like just normal text. If you say bold, then it'll bold your text for you, right? So, that's kind of what font weight does. You can also give it numbers. Again, something you'll discover is there's many ways to do this and just kinda pick your favorite, whatever makes the most sense to you.

[00:01:29] So font-weight, if you say 900 I think, that's bold. Whereas if you give 100, it's really thin text. But not every font has it. Anyway, we're not talking about fonts right now. Anyway, but that's what font weight is, I'll just stick to normal and bold, that's what I do.

[00:01:45] Font-style, you can have normal or italic, if you wanna make your text italicized. Text-align, so we talked about like divs being like containers, right? If you wanted to bump up against the left side versus bump up versus the right side or you want it to center. That's what text-align is.

[00:02:04] Text-indent, so if you have a paragraph but you don't want to move all the text over, you just wanna move the first line over, kind a like paragraphs having indentations. That's what text-indent does. And you just gives us like I want you to indent like 20 pixels. So it'll just indent that first line like 20 pixels.

[00:02:25] And then font-size. Again, this is just like, I want really small text so I say be nine pixels tall, right? Or I want you to be really huge, so be 40 pixels. And we're gonna go over units of measurements here in just a sec so.
>> Brian Holt: Like right now, I feel like I do that a lot.

[00:02:57] Measurements, so, CSS has a whole bunch of different measurements for legacy reasons. And you look, you'll see that legacy reasons, reason very often, like the reason why JavaScript has so many weird things about it is that they're trying to be compatible with code all the way back from the 90s which is just a huge pain.

[00:03:23] But then CSS has kind of the same issue, right? So, there are pixels, points, ems, exs, rems, inches, millimeters, centimeters and I don't think I'm even covering them all.
>> Brian Holt: Just a total mess, right? Totally different ways of measuring things, so for font size, I can say it's ten pixels tall or I can say it's two ems or I can say it's three exs or I can say it's four rems or three inches or two millimeters.

[00:03:54] All of those are valid and they will work. Which one do you use then is the correct question, and the answer is there are a few. So for example, don't use points, don't use inches, don't use millimeters, don't use centimeters. Those are all like super old, no one uses them.

[00:04:11] They were more for print anyway as opposed to the web, because CSS has also been used for print stuff like setting up magazines and newspapers and stuff like that. So and as far as like, you can use pixels, you can use ems, and rem is kind of new, but also kind of useful as well.

[00:04:33] And they have different usefulnesses. So pixels is kind of the defacto standard for most things. It's not actually a real pixel, just so you know, it's just an arbitrary unit that they've just called a pixel. Which is good because a pixel on an iPhone is very, very small, right?

[00:04:53] So if you said it was ten pixels on an iPhone, it would be like this big, right? Whereas if you were on a big desktop, or even worse, like an old CRT monitor, it would be like this big. Not really but it'd be much larger. So it's kind of up to each individual manufacturer to make sure that a pixel looks good on their own screen.

[00:05:14] That being said, text can't be much smaller than nine, eight, nine, probably seven the smallest or it's not readable after that point, so just kinda as an FYI. Ems are relative. Won't talk too much about it but what it is, is you have a font, right, and every font is different.

[00:05:37] And is the size of one. The letter m, right, a lowercase m, how wide it is. So it's a relative measurement of unit. So let's say you have an image and then when make the text different sizes, you want the image image to resize with the text so it's always the same relative height or width or something like that.

[00:06:00] You would use an right, because an is always relative to the font size of wherever it is. And ex, just so you know, is the height of a lowercase x, whereas like an is the width. Ex is not super well-supported so just stick to for the most part.

[00:06:18] Rem is a root. So can kind of be convoluted a little bit because if like you have like a body that's like three ems and then you have like a paragraph inside the body that's like two ems. It has this kind of elastic width that kind of happens, right, because it's relative to something that's relative.

[00:06:41] Does that kinda make sense? If it doesn't, it's totally cool. But just so you know, if you nest measurements, they get kind of out of whack. And that's what rem is. It's root ems. So it's like, when the page loads, how big was right? And then base everything off of that.

[00:06:58] So it's, you kind of lose that elastic effect.
>> Student 1: Is that for kind of responsive type designs?
>> Brian Holt: Yeah, so responsive design is like when you're trying to make things work on desktop, tablet, mobile. Yeah, so it's for that, and ems are very useful in trying to do that.

[00:07:20] And the measurement of good question, yeah?
>> Student 2: So if we want our CSS to be responsive, we need to use a certain one of those or what?
>> Brian Holt: Not necessarily. Again, kind of a little bit beyond the scope of this class. But it'll be a combination. Just certain things make sense in certain measurements, right?

[00:07:47] Very rarely are you gonna do widths and ems, widths are nearly always going to be pixels, but text sizes are often in ems. So, they're different tools for different jobs and it's kind of hard to blanket them.
>> Brian Holt: I'd say when in doubt use pixels. That's a pretty good rule of thumb.

[00:08:13]
>> Brian Holt: Default to pixels and then if you know better like, I'm doing font sizes, I should probably use ems, then you use that. Okay, yeah, so pixels, while not necessarily uniform across browsers, it will be uniform across your page, right? So you're not gonna have one pixel that's wider then the other if you're in Chrome, right?

[00:08:38] But Chrome might be a little bit different then Firefox. And in particular, phones are gonna be different than normal browsers.
>> Brian Holt: Ems, it's how wide the literal lowercase m is in the current font, and it's good for sizes that scale with font.