Working with Typography - Learn to Code HTML and CSS: Develop and Style Websites - page 97

Lesson 6. Working with Typography
The field of web typography has grown substantially over time. There are a couple of differ-
ent reasons for its rise in popularity; one widely acknowledged reason is the development of
a system for embedding our own web fonts on a website.
In the past we were limited to a small number of typefaces that we could use on a website.
These typefaces were the most commonly installed fonts on computers, so they were the
most likely to render properly on-screen. If a font wasn't installed on a computer, it wouldn't
render on the website either. Now, with the ability to embed fonts, we have a much larger
palette of typefaces to choose from, including those that we add to a website.
While the ability to embed fonts gives us access to countless new typefaces, it's also import-
ant for us to know the basic principles of typography. In this lesson we're going to take a
look at some of these basic principles and how to apply them to our web pages using HTML
and CSS.
Typeface vs. Font
The terms “typeface” and “font” are often interchanged, causing confusion. Here is
a breakdown of exactly what each term means.
A typeface is what we see. It is the artistic impression of how text looks, feels, and
reads.
A font is a file that contains a typeface. Using a font on a computer allows the
computer to access the typeface.
One way to help clarify the difference between a typeface and a font is to compare
them to a song and an MP3. A typeface is very similar to a song in that it is a work
of art. It is created by an artist or artists and is open to public interpretation. A font,
on the other hand, is very similar to an MP3 in that it is not the artistic impression
itself, but only a method of delivering the artistic value.
Adding Color to Text
Typically one of the first decisions we'll make when building a website is choosing the
primary typeface and text color to be used. While there are a number of other properties that
can be changed—size, weight, and so on—the typeface and text color generally have the
largest impact on the look and legibility of a page. Getting rid of the browser defaults and
using our own typeface and text color immediately begins setting the tone of our page.