Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now that we know a little bit more about how fonts work with CSS, let's take a look at how they're formatted. While CSS doesn't provide you with quite a level of control over typography that most desktop publishing programs do, you still have some very powerful typographic options when writing styles. As we begin exploring text formatting options, we will not only examine the properties themselves, but we are also going to see them in action as we preview how the styles we are discussing affect a sample HTML page. Keep in mind that in this course we are going to concentrate on more of the concept than the actual syntax itself.
If you are looking for a deeper dive into the ins and outs of the syntax, I would recommend exploring some of the other CSS courses in the lynda.com Online Training Library. Let's start with something we've already discussed, choosing a font. To define fonts, you use the font-family property. You can define a single font, or you can provide a fallback list of fonts, separated by commas, that instructs the browser to use the next font in order if the previous font isn't found on the client's system. In this example, all the text on the page would be set to Georgia.
Now if that's not available, it would be set to Times New Roman. If that wasn't available, it would be set to Times, and if Times wasn't available it would just say, okay, just go ahead and give me your default serif font. Now in terms of the syntax, note that Times New Roman is in quotation marks since there's more than one word in the font's name. Here is how our page would look with the new font applied. Now to control the size of the text, use the font-size property. CSS gives you a ton of options for defining size as you can use a diverse group of measurements.
Now I know this syntax looks a little weird, but I'm just basically giving you the same syntax that they give you within the specification. Now in one of our earlier chapters we took a look at reading through the CSS specifications and what all these meant. Just so you'll know, we have some computed values of absolute-size and relative-size-- those are about the keywords that you could use-- computed length which is what we are going to focus on, or a percentage, or you could use the inherit value, which is the default value for text. Later on I am going to explore the units of measurement that we can use for things like this in more detail, but for the moment I want to focus on the difference between using units like pixels and units like em.
So I am going to focus on the length value that you're seeing here. Length is basically saying, just give me a value and I will compute the length for you. So I want to talk about differences between using units like pixels and ems. Now pixels are fixed size or fixed units, meaning that if I set a font size to 16 pixels, it's going to be 16 pixels, regardless of which user agent it's viewed on. Now if, on the other hand, I use a relative unit such as em, the font size is relative to the device's current default size. And if you want to visualize this, take mobile devices.
16 pixels may look great on your desktop for body copy, but notice how huge it would be on a mobile device. Now if, for example, I said 1em, I'm essentially telling the device to set the font at 100% of its default font size, which is one size on desktop and another size on a mobile device. It's a way to bring a little bit more flexibility to your design. So let's go back to our example. Now, here you can see that we are setting the font size of the headings and the paragraphs to be relative to each other.
The main heading will be 1.6ems, secondary headings will be 1.4, heading 3s will be 1.2ems, and then finally the paragraph themselves will be 1em, and this is going to establish a strong relationship between all of them. And when I go ahead and apply that, I can see how now the size of the text changes to reflect that new relationship. Now if you are looking to set text as either bold or italic, you are going to use the font-weight and font- style properties respectively. Now font-weight can be either expressed as bold, normal, told to inherit, or it can be specified as a numeric weight from 100 to 900, 100 being the lightest, 900 being the boldest.
Now font-style allows us to specify italic, normal, oblique, or inherit. Now if I go back to our example, you can see how easy it is to set all of our span text to bold, then write custom styles for our title class, to set it as italicized, and overwrite the bold, and then write a specific style for author as well. And we will go ahead and apply that and we see the changes. Now another font property that I want to discuss is font-variant. Font-variant allows you to set text as small caps. Within the title there, we can see how that looks.
And this is a feature that you're not going to probably need that often, but it's nice to know that it's available. So essentially we are setting the author's name here, in this case inside of an h3 as small-caps. Now in a similar vein there are probably going to be times that you are going to want to control the capitalization of text. You will probably need to do that more frequently, to be honest with you, and for that you are going to use the text-transform property. That allows you to set text in all caps, uppercase, all lowercase, and then automatically capitalize text through the capitalize property.
As you can see, if we set text-transform to uppercase, our h2 is transformed and the text is displayed in all caps. The text-align property allows us-- I'm sure you can guess--to control the alignment of our text. You can choose between left, which is the default, center, right, and justified. As you can see here in our example, all of our text is left aligned by default, but by modifying the styles, we can set our paragraphs to be justified and our quote to be center-aligned. The text-indent property allows you to set a value to indent the first line of a block-level element such as a paragraph.
Now if the text only fits on one line, you'll still see the indent. Interestingly enough, you can set indents to negative values, which is sometimes used to hide text or just move it off the screen for a while. Now here you can see the results of our giving the paragraphs a text-indent value of 1em. If you're familiar with desktop publishing or desktop graphic design, I'm guessing that you've heard of the term kerning. If you're not, don't worry. It's just one of the most frequently used questions I get. How do you control kerning through CSS? Well, kerning is the process of changing the space between letters based on the letter pairs themselves.
It's considered actually somewhat of an art form in typography, and it helps to make text more readable. CSS unfortunately doesn't have a true kerning value, at least not yet, but you can control overall letter spacing and word spacing with the letter space and word space property. You can use any value you would like, including negative values, and here we see the effect of letter spacing on our course title. Finally, I want to discuss another common typographic need, controlling the space between lines of text. The common typographic term for that is leading, but if you're looking for the leading property in the CSS specifications, you're going to be disappointed.
To control the line spacing of text blocks, you are going to use the line-height property. Line-height can be set to an absolute value or set to be relative to the size of the text itself. Although you can use any value you would like, line-height is unique in that it's the only property that allows you to use a multiple. Now multiple uses no unit indicator, so it's just a number. So if we were to set our line-height to 1.4, for example, it would be 1.4 times the size of an element's font. Now in our example here, we are going to go ahead and set the paragraph's line-height to 1.6. We are using a 1.6 multiple, and as you can see, it increases the amount of space between the lines of text.
Now we didn't cover every single formatting option for text in CSS, but we've covered them enough to give you a good idea of the type of typographic control you are going to find when writing your styles. Now, I'm also pleased to announce that the W3C is adding OpenType support to the Fonts Level 3 Module. When these features are widely implemented, we will be able to do things like controlling ligatures, font-based kerning, old style numerals, and more. In terms of CSS and typographic controls, the best is yet to come.
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.