Serif vs. Sans Serif

Kalob Taulien
A free video tutorial from Kalob Taulien
Web developer and coding instructor
4.6 instructor rating • 28 courses • 321,016 students

Lecture description

Serif.. Sans Serif... Cursive... These are just 3 different font types. As a front end web developer you need to know the difference between font types. 

Learn more from the full course

Build Responsive Real World Websites with CSS3 v2.0

Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!

12:57:25 of on-demand video • Updated July 2020

  • Real-world skills to build real-world websites. Including several mini projects!
  • Learn the basics, then learn Advanced Selectors, Gradients, Transformations, Transitions, Animations, Flexbox and Responsive Web Design!
  • Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen
  • Get helpful support in the course Q&A
  • Downloadable lectures, code and design assets for the entire project
English [Auto] OK, we're done talking about text, and now we're technically talking about font, and if you're wondering, Caleb, what's the difference between text and font? OK, so the difference here is a font is actually the text. So the text is like the content. So this says, hello, I learned Web development from Arcon Dotcom. OK, so that would be the text and you can add a decoration to it, you can add a line through it, you can change the color of it, but your font is how it actually shows up. And so right now, I have two examples of. The exact same sentence, actually, so it's one example twice. And I'm going to show you the difference between serif and sans serif, so let's do this. I'm going to go back here, get rid of that sample. And I have a class called Saraph, and this uses a property called Font Family. And for this one, let's just do times. And for sans serif, let's change the font. Family will learn about font family a little bit later, a little more formally anyways. And let's change this one to Ariel. OK, so I refresh the page. Do you see the difference? If you don't, you got to look really close. But I mean, you should be able to see the difference pretty clearly. So the difference is that actually going to zoom in here? Is a serif font, has those little ticks at the end, so if you see right in here, I'll zoom in actually. So you see right in there where that P is that has a tick at the bottom, has a tick. The Y has a little swoopy part at the bottom, whereas the same part, the exact same word in a sans serif font doesn't have any of that. The censor, a font is literally just a regular font. It doesn't have those ticks. Now there are pros and cons to using both. And when would you use either one? Well, that's a great question. The truth is that most websites use some sort of censor a font, this one, because it looks better. Unfortunately, your brain, your eyes, not just yours, I'm saying your as in plural, the royal, you're everybody every human has a hard time reading font like this. So if you have to write paragraphs and paragraphs and paragraphs or if you're writing an entire blog post, you might want to consider using a serrefine. Now, you don't have to use times. That's times new Roman. You can use whatever other serrefine. The reason for that is because longboats of text are hard on your eyes. And those little tics that we see that the part that actually makes the Sarah font a serif font, it helps your eyes sort of stay on the same line. And you notice how even just this line looks a lot more square than this one. This one looks like there's a lot more fluctuation, but your eyes naturally go from left to right using a set of font. And so that's the difference between the two. Now, as a designer, you need to know those differences. And if you're not a designer, guess what? You don't have to be, but you do need to know some of these differences. Now, there's a place and time for both of these, and I can't tell you right now when those are going to be generally speaking, if it's a large amount of text, I try to stick with a Sarah font, unless there's a reason to stick with sounds like we're talking about branding or, you know, maybe it just looks better, maybe doesn't fit in with the rest of the page. I don't know. Each situation is different now. This lesson is not meant to teach you the difference between when you should use one, when you should use a phone, when you should use a sensor instead. This lesson is really just to talk to you about the differences between them and when you could possibly use them, why you should possibly use them. And I guess to introduce you quickly to the property called Font Family. There's no task for this lesson. I'll see you in the next video.