The color property allows you to set the
colour of the text (or foreground) inside an element.
It takes any valid colour value.
Note that any colour settings on the foreground affect not only the
characters, but any text decoration you add to the characters, such as
strike through, etc.
You can play with the color property using
the following CodePen:
There are several properties that you can use to customize the
word spacing, letter spacing, and line height of text. These
properties can help you make the text content of a page more
readable when the font is difficult to read to accommodate
users with specific disabilities.
defines the amount of horizontal space between characters.
The word-spacing property defines the
amount of horizontal space between words.
Both properties take any valid length measurement, which consists of
a number followed by
a dimension that measures size
(such as px or em). Using a positive measurement increases the
amount of spacing and using a negative measurement decreases the
amount of spacing.
Both properties can also accept the value normal,
which sets the property to the font's default spacing or the
user's browser (the user may have changed the browser default).
The line-height property defines the
amount of space between lines of text. This property takes a
numeric value (integer or floating point) but it can also take a
dimension that measures size
(such as px or em). For example, using line-height: 1.5
sets the line height to 1.5 times (or 150%) of the font
size , and line-height: 10px sets the line height
to exactly 10 pixels, regardless of the font size. Using the
numeric value with no units is the preferred way to use the
CodePen: letter spacing, word spacing, line height
CSS also contains several properties that you can use to
customize fonts. Pages without font settings will always display
using the user's browser default (each browser generally allows you
to set a default font and a default mono-space font). You can
override those defaults by using font properties in CSS. Note however,
that you shouldn't use a font that is hard to read! You don't
want your users leaving your web site because they can't read it!
For accessibility, stick to regular fonts (the most accessible fonts
for visually impaired users are Arial and Verdana).
It's important to understand the different terms when
working with fonts: many people are confused by terms
like "font", "font family", and "typeface" - what do
these terms mean, what's the difference? What's a glyph
and why is it important?
A glyph is a representation
of a single character. For example, F is the glyph for
upper-case letter f, and * is the glyph for the asterisk symbol.
is the glyph for 0 in a monospaced font (I told the browser to use
Courier or Courier New, but it might be different in your browser, it
depends on your browser settings).
Typeface vs. Font
A lot of people will define typeface as a specific
font, and that's somewhat true. A typeface
is the name given to a specific style and size of a set of glyphs.
For example, this
part of this sentence is in the Courier New typeface, although if
you configured an override of the default monospaced font in your browser,
it might render in a slightly different typeface.
A typeface consists of a specific glyph for each character, so you might
notice that some fonts/typefaces don't support some characters: that's because the
designer didn't create a glyph for that character.
A font is a file for a specific typeface in a
specific style. For example, the typeface "Courier New"
might be in the file called "courier.ttf".
As you probably know, you can write some text in a specific typeface and
then make it bold, or italic, or both bold and italic. When you
type something in a word processor in the Courier New typeface and
then make it bold, you're actually using a different font.
The Courier New Bold font might be in a file called "courierbd.ttf".
Each style of a particular typeface is in a different file.
On a computer, there would be several files for
a specific typeface. For example, one file
might be for Courier New with no embelishments (i.e. "regular"),
one file for Courier New in bold, another one for Courier New in italics,
and a third file for Courier New in both bold and italic.
Therefore, the Courier New typeface has four different
fonts (font files) on a standard computer.
This means that for a specific typeface, a character will have
several glyphs. For example, the number 0 (zero) in regular Courier New,
the 0 in Courier New bold, the 0 in Courier New italic, and the
0 in Courier New bold-italic. Each set of glyphs is stored in
the font file for that typeface/style combination.
A font family is a collection of
fonts for a specific typeface. So on my computer, the font family
"Courier New" is made up of Courier New (the regular one with
no bold/italic), Courier New
Bold, Courier New Italic, and Courier New Bold Italic
Generic Font Families
In addition, CSS defines generic font families.
Generic font families are
collections of typefaces with specific characteristics. CSS
has five different font families:
serif fonts have small strokes and other
embellishments to make them seem a bit more formal.
For example, this is the letter T in a serif font called "Times New
(although your browser might use a different serif font if you configured
your font settings)
sans-serif fonts have no embelishments and look
more modern (people pronounce "sans" differently:
people from the US and UK often say "sanz" [like "cans"], others
say "sawns" [like "lawns"]; I grew up learning French so I pronounce
"sans" the French way, since "sans" in French means "without")
This is the letter T in Arial, a common sans-serif font:
monospaced or fixed-width fonts are designed
so that all the glyphs are exactly the same width (you can read an
overview of monospaced fonts and how they're different from
variable-width fonts at Terminal
Learning: Fonts for Writing Code)
cursive fonts are various styles of fonts that
look like different kinds of hand writing
fantasy fonts are fonts that are more decorative
and whimsical, and are used for ornamentation
For example, the Courier New font family fits into the
monospace generic font family. The Times New Roman fonts fit
into the serif generic font family, and Arial font family fits into
the sans-serif generic font family.
For web sites and applications, you would generally stick
with serif or sans-serif fonts, and use monospace fonts
for specific purposes (e.g. displaying sample code or
output from code/programs, etc). Cursive and fantasy fonts
are difficult to read and are not considered good for
accessible web design.
Here are various CSS properties you can use to customize
fonts: be sure to read the MDN documentation for each
so you can learn the various values each one accepts.