Font and Spacing

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

Setting the CSS Font

CSS has a ton of properties, but no worries. Even guys like me that love CSS don’t use the majority of them. You will definitely possess a solid base of CSS knowledge after reading all of these tutorials that you can nurture and grow later to become a styling master. Common font related properties:

• color – sets the font color
• font-size – sets the font size
• font-weight – sets the font weight (skinny to very bold)
• text-align – sets the font position inside element (left, center, right, justify)
• font-family – sets the actual font type

<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>

Text Spacing

When I talk about text spacing, I am referring to characters in relation to other characters. The first important property is letter-spacing, which is the horizontal spacing between characters. The second and final is the line-height that is the vertical spacing between text lines.

<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>

Try using that style with a dark background. You will soon see why, and we will discuss this further in the Graphic Design tutorial. Basically, the extra white space between the lines helps your eyes read the text more easily. Of course, the letter-spacing property usually is not necessary to help with reading. Alright, we can clearly see that the letter-spacing is set to .1em. What the heck is an em? An em is a flexible measurement compared to its brother px (short for pixel). Generally, try to use em instead of px (again, we’ll go into why later). The second property line-height is set to 2em, which gives us a greater difference in the distance between lines. As I said, letter-spacing is not very commonly used, but line-height is and it can make all the difference.

References

• CSS Font Families (w3)
• CSS Font Face (NiceWebType)
• CSS Letter-Spacing Property (Quackit)
• CSS Line-Height Property (SitePoint)