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.