Enhancing Text with CSS: Fonts and Spacing

Let’s start off with using CSS to make some awesome text by changing the font and spacing. CSS can do so many amazing things, but often the font and spacing are overlooked, much like typography in general. While I must admit I love typography (even though I’m not the best at it), this tutorial will provide you with a great start!

Setting the CSS Font

CSS offers a plethora of properties, but don’t worry—even seasoned designers rarely use all of them. After reading these tutorials, you’ll have a solid foundation to build upon as you grow into a styling master. Here are some common font-related properties:

• color – sets the font color
• font-size – sets the font size
• font-weight – sets the font weight (from light to bold)
• text-align – aligns text within an element (left, center, right, justify)
• font-family – sets the font type

Example

<style type="text/css">
p.special_one {
  color: #900;
  font-size: 2em;
  font-weight: 100;
  text-align: center;
  font-family: "Arial", "Myriad Web Pro", Arial, serif;
}
</style>

<p class="special_one">Sample CSS Demo</p>

Result

Text Spacing

When we talk about text spacing, we refer to the spacing between characters and lines of text. Two important properties to control this are:

• letter-spacing – adjusts horizontal spacing between characters
• line-height – adjusts vertical spacing between lines of text

Example

<style type="text/css">
p.special_two {
  letter-spacing: .1em;
  line-height: 2em;
}
</style>

<p class="special_two">
We will get to the idea of block spacing and margin spacing,
but for now we will only speak of them to have default text.
</p>

Result

Try using the line-height style with a dark background—you’ll soon see why. We’ll discuss this further in the Graphic Design tutorial. Essentially, the extra white space between lines improves readability. While the letter-spacing property is less commonly used, line-height is essential and can make a significant difference.