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
Example

Result

Sample CSS Demo

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.

Example

Result

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.

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

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. the test code window does not shoing colors I hvae written the following for the p tag
    color:#900;
    font-size:2em;
    but nothing happened to color and size

  2. whats the logic of repetition of font family in this class , font-family:"Arial", "Myriad Web Pro", Arial, serif

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.