We used font-family to select certain font families, especially generic ones. But what if you want a creative font, a more modern font?

The best place I know to get fonts is from Google. You can Google it up or go to fonts.google.com. You can use their filters to help narrow down your search. When you find one you like, click on it and it will give you the code to use. You’ll be linking to it like a CSS stylesheet. You’ll be adding something like this to the head of your HTML document.

<link href =”https://fonts.googleapis.com?family=Tangerine” rel=”stylesheet” type =”text/css”>

Below that is the code for CSS which you’ll put in your CSS under the selector you want to change to that font. It will look something like this.  font-family: ‘Tangerine’, cursive;

If you are really trying to make your site nice, you will want to use more than one font. Here is a site that shows font pairings. Typically, one would be for headings and one would be for paragraphs. You would not want to keep switching fonts all over the place. You want it to be pleasing to your reader, not distracting or even painful to look at!

A single switch of font from heading to paragraph gives the eye a natural break to look at.

And there are sites that show recommended fonts.

This isn’t exactly font, but another way we manipulate text is with text decoration.

Text-decoration : underline is how we underline a word or phrase. This property also takes the values of overline and line-through. You can also use text-decoration : none to get rid of what’s there.

You can also use the property of letter-spacing and word-spacing. Use pixels as your value. You can use a negative value to move the letters and words closer together than usually or an ever-increasing number to move them apart.

You can watch the video of this lesson.