- [Voiceover] 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 the level
of control over typography that most desktop
publishing programs do, it still has some very powerful
typographic options when writing styles.
As we begin to exploring text formatting options,
we'll not only examine the properties themselves,
but we're also going to see them in action
as we preview how the styles we're discussing
affect a sample HTML page.
Keep in mind that, in this course, we're going
to concentrate on more of the concept
than the actual syntax itself.
If you're 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.
Okay, 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 is more than one word
in the font's name.
Here's 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
when 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 both keywords that you could use.
A computed length, which is what we're going to focus on,
or a percentage, or you could use the inherit value,
which is the default value for text.
Okay, later on, I'm 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'm going to focus on the length value
that you're seeing here.
Length is basically saying, you know, just give me a value,
and I'll 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 the 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 an 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 one em,
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.
Okay, so let's go back to our example.
Now, here you can see that we're setting the font size
of the headings and the paragraphs to be relative
to each other.
The main heading will be 1.6 ems,
secondary headings will be 1.4, heading threes
will be 1.2 ems, and then finally,
the paragraphs themselves will be one em,
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're looking to set text as to either bold
or italic, you're 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.
Okay, now, if I go back to our example,
you can see how easy it is to set all of our span text
to bold, and then write custom styles for our title class
to set it as italicized and override the bold,
and then write a specific style for author as well.
And we'll go ahead and apply that, and we see the changes.
And 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, you know, this is a feature
that you're not going to probably need that often,
but it's nice to know that it is available.
So, essentially, we're 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're going to want
to control the capitalization of text.
You'll probably need to do that more frequently,
to be honest with you.
And for that, you're 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.
Now, as you can see here in our example,
all of our text is left-aligned by default,
but by modifying these 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 awhile.
Now, here, you can see the results of our giving
the paragraphs a text-indent value of one em.
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'd 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 letting,
but if you're looking for the letting property
in the CSS specifications, you're going to be disappointed.
To control the line spacing in text blocks,
you're 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'd 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're going to go ahead
and set the paragraph's line-height to 1.6,
so we're 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're going to find when writing your styles.
Now, I'm also pleased to announce
that the W3C is adding open-type support
to the Fonts Level Three module.
When these features are widely implemented,
we'll 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.