- In this chapter I want to spend some time
going over some of the common CSS concepts
that you'll likely to encounter when using stylesheets.
While the main focus will be to provide you
with a broad overview of topics,
we will spend some time exploring syntax
and best practices to use when authoring styles.
I want to start by focusing on fonts.
Controlling typography is often the first thing
that designers learn to do when using CSS,
and for good reason.
Typography is so important to your design
and what you're trying to communicate
that it's just a natural starting point.
Remember, if you don't specify a font
and format your text, your content will receive
the browser's default styling.
I highly doubt that that's the look
that you're going for.
The first thing you'll need to decide
when choosing a font for your site
is whether you want to use system fonts
or web fonts.
Let's take a moment to discuss the differences
between the two.
Now in the past, designers have been limited
to using a small set of fonts that are preinstalled
on almost every machine.
These are called system fonts.
And I have no doubt that you've used them
at one time or another.
Fonts like Arial, Helvetica, Verdana, Times,
Times New Roman, Courier, and yes, even Comic Sans
are so common on the web
that you're more likely than not
to encounter at least one of them
every time you go online.
So why are these fonts so popular?
Well, it has very little to do
with the popularity or quality of the fonts,
although most of them are quite good,
and everything to do with their ubiquity.
Until recently, HTML and CSS contained no mechanisms
for displaying a font that wasn't already installed
on the client's machine.
You can certainly specify that you wanted your webpages
to use Garamond, but unless the person viewing your page
had Garamond installed, it would fall back
to the system's default font.
You can see this concept illustrated most clearly
by looking at the syntax for declaring font families.
Now at first glance, this may look a little odd.
Here the designer seems to be asking
for more than one font for all paragraphs.
In reality, what this syntax allows designers to do
is to provide fallback fonts in case
the first one requested isn't found on the client's system.
In this case, the first choice would be Arial.
If Arial wasn't installed, it would then request Helvetica.
If Helvetica wasn't found, it would then request Verdana.
Now if, in the unlikely event, that one of those three fonts
weren't found, it would finally ask
for the system's default sans-serif font
so that at least the text would display
in the style that the designer wanted.
Now is there anything wrong with that?
No, actually there isn't.
Many of the system fonts like Georgia and Verdana
were designed specifically for the screen,
making them very functional choices for websites.
However, recent advances to CSS and browser support
now make it possible to use a much wider array of fonts.
By now, you've probably heard of web fonts.
The term web fonts is used to describe the technique
of embedding font files in webpages
using the @font-face method.
This allows web authors to use fonts
without worrying about whether they're installed
on the client machine or not.
The CSS @font-face rule has actually been around
for quite some time, but it took some time
before browser support, font formats,
and licensing issues reached the stage
where it was feasible to use.
Web fonts typically work by having an @font-face rule,
such as this one, in your styles that point
to an external font resource.
Now this could be a font that you host yourself
or one that's hosted through any number
of recent font hosting services
that have appeared to support web fonts.
Now I know that this syntax looks a little complicated.
But trust me.
It's not as bad as you think.
There are also plenty of online resources
that can help you find fonts
and even generate this syntax for you.
I'll list some of those in the final chapter.
I also want to point out that if you'd like more information
about web fonts, check out any
of the web font related titles in our library.
What all this means is that when you're working
with fonts in CSS, you have three basic choices.
First, you can rely on the browser to supply
the user's default font.
Second, you can specify a preferred system font
and then provide fallback fonts all the way down
to specifying the generic font family to use
in case the client machine doesn't have
the defined fonts installed.
Or third, you can use @font-face to supply custom fonts
to the browser.
You could also use a blended approach
where you use web fonts but provide fallback
system fonts to the user agent
if it doesn't support web fonts.
Okay, now that we've talked a little bit
about some of the different ways
you can use fonts with CSS,
we'll move on and talk about some of the options
for formatting fonts.
And we'll do that next.