Working with Fonts and Text

Working with Fonts and Text
bluehost placeholder image

As you might imagine, CSS offers plenty of ways to change the look and feel of any text displayed on your screen. Let's take a look at all these ways.

Comments

While technically not part of styling text, it is useful to know how to write comments in CSS. The browser will ignore any text that is commented out, even if it is otherwise valid CSS.

Single Line Comments

For single line comments, just prepend your comment with /* and append with */, like so:

	
	body {
  		background-color: red;
  		/* I'm a comment */
	}
	

Multiple Line Comments

For comments spanning multiple lines, simply do the same as before and prepend the comment with /* and append with */. Everything in between that will be commented out and ignored.

Here's an example:

	
	body {
  		background-color: red;
  		/* I'm
		   a
		   comment
		*/
	}
	

Now that we got comments out of the way, back to styling text!

Font Family

To change the font that is used to render text, you specify it using the font-family property. If you want to use Times New Roman, it looks like this:

	
	body {
  		font-family: "Times New Roman";
	}
	

CSS allows you to specify fallback fonts in case your user did not have the font you originally specified. For example, if you wanted to use the Arial font followed by a serif font as a backup, it would look like this:

	
	body {
  		font-family: "Arial", serif;
	}
	

Here is a list of fonts that are generally deemed safe to use on the web, also known as web safe fonts:

  • Arial
  • Helvetica
  • Times New Roman
  • Times
  • Courier New
  • Courier
  • Verdana
  • Georgia
  • Palatino
  • Garamond
  • Bookman
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact
siteground placeholder image

Font Weight

You can give fonts weight using the font-weight property. The following is a list of all the valid values for a font's weight.

  • 100
  • 200
  • 300
  • 400 or normal
  • 500
  • 600
  • 700 or bold
  • 800
  • 900

Font Style

Your text can be rendered with a certain style if you change the font-style property. While you usually want it set to normal, you also have two additional values, italic and oblique.

All of the font styles.
All of the font styles.

Text Transform

You can use text-transform to change the cases of the text. This property has four values:

  • capitalize: This capitalizes the first letter in every word.
  • uppercase: This capitalizes every letter.
  • lowercase: This lowercases every letter.
  • none: This applies no effect to the text.
All of the text transforms.
All of the text transforms.
bluehost placeholder image

Text Decoration

You can use text-transform to change the decoration of the text. This property also has four values:

  • underline: This adds a line under the text.
  • overline: This adds a line over the text.
  • line-through: This puts a line directly through the text.
  • none: This removes any decoration effects.
All of the text decorations.
All of the text decorations.

Text Decoration Style

In addition, you can also apply a style to your text decoration. The values for text-decoration-style can be found below:

  • solid: This is the default.
  • wavy: A wavy line.
  • double: Two solid lines.
  • dotted: A dotted line.
  • dashed: A dashed line.

If you apply these styles:

	
	h2 {
		text-decoration: underline;
	}
	.solid {
		text-decoration-style: solid;
	}
	.wavy {
		text-decoration-style: wavy;
	}
	.double {
		text-decoration-style: double;
	}
	.dotted {
		text-decoration-style: dotted;
	}
	.dashed {
		text-decoration-style: dashed;
	}
	

to this markup:

	
	<h2 class="solid">I have a solid line.</h2>
	<h2 class="wavy">I have wavy line.</h2>
	<h2 class="double">I have two lines.</h2>
	<h2 class="dotted">I have a dotted line.</h2>
	<h2 class="dashed">I have a dashed line.</h2>
	

You'll get this:

All of the text decoration styles.
All of the text decoration styles.

Text Shadows

You can apply a shadow effect to text by using the text-shadow property. To declare it, you need to give it two values with an optional two more.

The first and second value is the horizontal and vertical offset from the text that you want the shadow.

The third and fourth optional values is the blur radius and the color of the shadow. Without a color, it will render as the same color as the text, and without a blur radius, it will be just as sharp as the text.

	
	p {
		text-shadow: -4px 4px 4px red;
	}
	
Example of text shadow.
Example of text shadow.

Text Spacing

There are three main ways to control the spacing around and between text.

Line Height

When you want to change the height of the lines, use the line-height property. Since this adjusts the height of a line of text, when lines are stacked, this basically increases or decreases the spacing between those lines.

The value will be a percentage, a length in any unit, or normal.

	
	<p class="a">I have 1rem of line height.</p>
	<p class="b">I have 3rem of line height.</p>
	<p class="c">I have 10rem of line height.</p>
	
	
	p {
		background-color: lightblue;
		margin: 0;
		border: solid 1px blue;
	}
	.a {
		line-height: 1rem;
	}
	.b {
		line-height: 3rem;
	}
	.c {
		line-height: 10rem;
	}
	
Example of different line heights.
Example of different line heights.

Letter Spacing

If you want to change how much space is between individual letters, use the letter-spacing property.

	
	p {
		letter-spacing: 0;
		letter-spacing: 2px;
		letter-spacing: 4px;
	}
	
Example of letter spacing.
Example of letter spacing.

Word Spacing

Word spacing is similar to letter spacing, except that the space you're adjusting is between the words instead of the letters. You declare this with the word-spacing property.

	
	p {
		word-spacing: 0;
		word-spacing: 6px;
		word-spacing: 12px;
	}
	
Example of word spacing.
Example of word spacing.
udemy placeholder image

Text Layout

When it comes to basic layout of text, you have two properties at your disposal.

Text Alignment

You can align text inside an element to the left, right or center, by using the text-align property.

	
	p {
		text-align: left;
		text-align: center;
		text-align: right;
	}
	
Example of text alignment.
Example of text alignment.

Text Indentation

Additionally, you may indent the first line of a paragraph by any specified length you want by using the text-indent property, like so:

	
	p {
		text-indent: 2rem;
	}
	
Example of text indentation.
Example of text indentation.

That's pretty much it for working with fonts and styling text in CSS. In our next one, we'll dive into everything regarding backgrounds!

Resources