CSS 3: Text

Introduction to CSS Text

Having great content on your webpage is just one of the many ways you can attract people to your webpage.

To keep readers intrigued, we need the right presentation skills, one of which has to do with Text.

Text should be easy on the eyes and the flow of words should be intuitive to the user.

In this section, we'll look at how to choose and apply fonts, and then learn about the attributes you can use to change how text appears.

Font Types serif, sans-serif, monospace

There are quite a few fonts out there, but they can all be broken down into three main categories: Serif, Sans-serif and Monospace.

1) Serif

Serif fonts contain a bit of extra detail at the ends of the main strokes. These fonts were considered easier to read back in the olden days. Some serif fonts that we still use today include: Georgia, Times New Roman, and Palatino.

2) Sans-serif

Sans-serif includes all fonts that have straight ends to letters. They are not only considered "modern" and "clean," but are also said to be easier to read, especially when the text is small. In fact, this font that you're right right now is a Sans-serif font. Some examples include: Arial, Comic Sans, and Tahoma.

3) Monospace

Monospace fonts are unique in that they have fixed-width, which makes great for displaying code. Examples include: Courier New, Lucida Console, and Monaco.

There are two other categories that are mainly used for headings, or for special designs. We advise that you do not use this as your body text, as it can be difficult to read.

Now that you know the different types of fonts, let's learn how to get them installed onto your viewers' browser.

Getting Fonts font-family, font-face

There are two ways you can get fonts loaded onto a reader's browser - either by using a browser's default, or importing your own.

1) Font-family

This group of fonts comes pre-loaded from the user's browser. Although they are limited in option, we have the assurance that they will readily be available. Additionally, we do not have to worry about licensing, which is a common issue for other fonts.

Examples include: Arial, Georgia, Times New Roman, Impact, Comic Sans, Courier New.

2) Font-face

If you want to use a font outside of the user's default font styles, we can use the @font-face method. With this, the font is downloaded from either a hosting website or from your own server.

This may take more bandwidth, so make sure the aesthetics are worth the extra loading time!

Here is how we use this:

@font-face {
  font-family: 'SlimJimFont';
  src: url('/public/fonts/slimjimfont.eot');
}

Here, the font "SlimJimFont" is to come from your public/fonts directory. Notice that this format is .eot.

There are several other font formats, and you should include them all in case your user's browser does not support a particular format. Thus you should place all the different formats in this order:

1. eot
   • Embedded Open Type.
   • Created by Microsoft over 15 years ago.
   • The only type supported by IE8 and below.
2. woff
   • Web Open Font Format.
   • Developed by Mozilla.
   • Loads faster than other formats because they use a compressed version structure.
   • Most likely the next generation font format option.
3. tff/otf
   • TrueType Font and OpenType Font.
   • These fonts can be illegally copied.
4. svg
   • Scalable Vector Graphics
   • vector re-creation of the font.
   • Small file size, making it ideal for mobile use.

One last note! Before you use @font-face fonts - make sure you read through the license, as some may come with a fee!

Websites that offer fonts for downloads

There are a good amount of websites that allow you to choose and download fonts. Here are just a few:

FontSquirrel allows you to choose from high-quality free fonts for commercial use.

Google web fonts allows you to access over 600 font families! Google Fonts.

Type Depot has a number of free fonts for download, along with great commercial fonts to buy.

1001 Free Fonts doesn't actually have 1001 free fonts. It has even more! Choose from a large selection from 64 categories.

Applying Fonts font-family, font-size

After we have chosen which font to use, and loaded them up using the @font-face property, we can now apply them to our webpage.

Applying fonts to text

To specify the text, we use the font-family property.

In case the user does not have a certain font, we list multiple, each separated by a comma. This list is called the font stack.

The user's browser then goes through each font, from left to right, searching for a font that works until it finds one.

p {
  font-family: Consolas, Arial, Helvetica, Serif, "Times New Roman";
}

Notice how we have to use quotation marks ("") when specifying a font that is longer than one word.

There are a few "safe" fonts such as Arial, Verdana and Times New Roman that are guaranteed to work.

Applying Styles to your Font bolding, italicizing

Now we can begin to style and decorate our fonts!

Bolding Text

For bolding, we use the font-weight property.

The values range from 100 to 900 in increments of 100. You may also place predefined values such as lighter, normal (same as 400), bold (700) and bolder.

p {
  font-style: bolder;
}

Italicizing Text

For italics, we use the font-style property.

Values include normal, italic and oblique.

Oblique is different from italic, in that it distorts the glyphs.

a {
  font-style: italic;
}

Decorating Text text-decoration, text-shadow

Let's now discuss the two ways in which we can decorate our text.

Lines under, over, and through our text

We can apply decorations to our text with the text-decoration property. The values include: none, underline, overline, and line-through.

We can take this a step further and add color the line with the text-decoration-color property.

p {
  text-decoration: underline;
  text-decoration-color: pink;
}

Hello Venus!

Adding a Drop Shadow

To add a drop shadow behind your text, we can use the text-shadow property.

p {
  text-shadow: 3px 3px 1px blue;
}

The property takes three lengths and a color:

1. The first length tells how far to the left/right the shadow should fall.
2. The second length is the distance to the top or bottom that the shadow should fall.
3. The third length is optional, and specifies the amount of blur that should be applied.
4. Lastly, you may choose the color of the drop shadow with the fourth value.

Hello World!

Text Effects text-transform

Transforming Text

To transform the entire text, we use the text-transform property.

Values include UPPERCASE, lowercase, capitalize, and none. A value of capitalize will capitalize only the first letter of each word. A value of none is useful if you want to take off the default underlining used in anchor texts (links).