Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've talked about how to target content on the page and how to resolve any conflicts that might arise. I want to move on to focus on the properties that we can set for CSS rules and I want to start by focusing in this chapter on typography. Basic text formatting is a natural place to start when discussing CSS properties, because typography is such an immediate need for beginning web designers. I want to start by going over the syntax for choosing font-families. So I have the font-family.htm file open here and you can find that in 04_01 folder.
Very basic page structure. Again we have our article tag inside the body tag, inside of that we have a headline and just a couple of paragraphs. So what I want to do, is I want to go up to the body rule that's one of the places where we've been sort of setting font-families in the past and you may have remembered doing this in some of previous exercises, I'm just going to create a new property, I'm going to use the font dash family property, font-family and I'm just going to ahead and pass the font name Arial.
So you'll notice we don't need any quotation marks there, the font doesn't need to be capitalizes it is case- sensitive and it must be spelled correctly. So when I save this and if I test it one of my browsers, I can see that I am giving Arial as the font-family. Now, I'm not embedding Arial in the page. What's happening is the web browser is requesting from the client machine the font Arial, its saying hey do you have Arial installed. Well, one of the problems with using these types of system fonts is that we are relying on the client machine.
So in this case if the page we're being previewed on a system that maybe didn't have Arial installed what would happen is the browser would just go ahead and use its default font whatever that might be to display the page. What happens if the default font is a lot different than Arial? What happen if it's Times New Roman or Times? The page is going to look entirely different? So there are few things that we can do when we are defining our font-families the sort of combat this fallback procedure. So I'm going to go back to my code and right after Arial, inside the semicolon, I'm going to type in comma Helvetica. I'll save that and if I preview this in my browser I'll notice no change and I notice no change because we'll Helvetica is installed on the system, but Arial is as well.
So this is what's known as a font stack and you can have as many fonts listed here as you want. What's going to happen is that the browsers is going to request from the client machines this font first, if it finds it, it will display the page using that font. If it's not installed it will fall back to the next font in the stack, so you can just keep adding as many to the stack as you'd like. Usually at the end of the stack you're going to pass a generic font-family that is basically the same as the fonts you're requesting, so at the end of this stack if I type in comma sans-serif, I'm asking for whatever the devices default or generic sans-serif font might be.
So in the case that Arial or Helvetica wasn't installed I would at least get a sans-serif font. In this case if I saved it and tested it, again I'm not going to notice any change, because Arial is already installed. Well let see this fallback actually working. So I'm going to go ahead and remove this font stack and add another one, I'm just going to enter NoFont, Georgia, serif. I'm going to go ahead and save that and if I test this in my browser, I notice I get Georgia, because no font is not a font.
So it was the first font that the browser request for my system, the system said I have no idea what font that is I don't have it, so went ahead and used Georgia instead. Even if you were to have two of them fail on you, so I went NoFont, NotAFont, serif, if I saved this and tested it, notice that I'm not getting Georgia anymore, but I am giving the default serif font. So serif and sans-serif are part of the generic font families all systems have a font that's dedicated to be the generic sans-serif or generic serif font. Let's take a look at what those fonts might be.
Now this fonts are always going to change based on the operating system that you're using, what fonts are installed on the machine, whatever those preferences are. So as you're testing this with me, I would expect that you're going to see different results than I am. So don't be surprised by that. Remember, you're basically getting the default font that set for that sort of generic font-family. Two are the generic font families we've are talked about serif and sans-serif, but there are few more out there that I want to talk about. One is monospace. So if I just do a font stack with nobody else in front of it, I just name the generic font face, if I save this then I get what if the default monospace font might be in this case looks like it is Courier.
I could also request to little- known ones and that is cursive, so if I go ahead and save that and test that in my browser, I get this lovely font here, that's very nice. And we also have in place of cursive, you could use fantasy and it's probably my favorite. Now I'm going to save this and test it, and I get oh, Papyrus, well yes that's the first thing that comes in my mind when I think fantasy. Now if you're using a PC, you might even have in a comic-sans here which is even little bit more ironic.
Let's go back to our font stack and what I want to do now is to do sort of a longer font stack using Georgia. I'm going to type in Georgia, Times, Times New Roman, serif. So you can string as many fonts together as you want, there is no limit to them and typically you want to stick to two or three fonts, four fonts probably at the most. Now there is a little bit of a problem with the syntax that I've written here.
Times New Roman is one single font, but the problem is there are white spaces in its name. Whenever you have a font that has multiple words in its name, it's best to go ahead and pass that in as a literal string. So I'm going to want to go ahead and encase Times New Roman in quotation marks. So if I save this, test in my browser now I'm getting Georgia again, perfect. Now overall other than some of these little things you have to remember like quotation marks around any fonts that has more than one word in it.
The syntax is pretty easy to master it making declaring a font family one of the easier things that you'll ever do in CSS and that's a good thing, because you're going to be doing it a lot. Now if you want to get a little bit more information about system fonts and building really high-quality font stacks, I'm going to recommend a web site to you and that is code styles font stack builder. You can find it here at codestyle.org, you can just search their web site for built better CSS font stack then it'll take you here. Here you'll find a lot of information on the installation base of specific fonts, so you know which fonts are most widely installed and then some of the recommended font stacks that can help you get started.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.