Serif vs. Sans Serif

Kalob Taulien
A free video tutorial from Kalob Taulien
Web developer and coding instructor
4.6 instructor rating • 29 courses • 291,752 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] Okay we're done talking about text and now we're technically talking about Funt. 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 our dot com. 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 going to show you the difference between Saraf and sand Saraf. So let's do this. I to go back here get rid of that sample and I have a class called Sarah. And this uses a property called font family. And for this one let's just do times and for censer if that's changed the font family will learnable font family a little bit later you know a little more formally anyways and the change just want to Ariel. OK so I refreshed the page. You see the difference. If you don't want you've 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 Sarraf font has those little ticks at the end. So if you see right in here I'll zoom in. Actually as you see right in there where that piece is that has a tick on the bottom has a take the Y has a little swoopy part at the bottom whereas the same part in the exact same word in a San Sara font doesn't have any of that the sensor 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 web sites use some sort of sensor font. This one because it looks better. Unfortunately your brain your eyes not just yours. I'm saying your as in plural the royal your every body every human has a hard time reading font like that 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 ticks that we see that the part that actually makes the Sarah a font Sarath 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 Assaraf 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 why you don't have to be. You do need to know some of these differences. Now there's a place in 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 set of font unless there's a reason to stick with sense like we're talking about branding. Or maybe it just looks better. Maybe it 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 Serrefine when you should use a sensor or font 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 is no task for this lesson. I'll see the next video.