Quick Start Guide to Styling Text With CSS

When you think about styling text, what’s the first thing that pops into your mind? Probably just changing the font, size, and color, right? Well there are a bunch of other options that when combined, can create an infinite amount of possibilities. Let’s take a look at the different options and how to use each, so you can customize your blog’s design.

Font Family

The first text customization you can make is changing an element’s font. To change the font of an element, you’ll want to use the font-family property, like so:

.the-element {
     font-family: 'Playfair Display', Georgia, serif;
}

When using font-family, you can specify either a font or a generic font style, such as serif or sans-serif. You can also specify multiple fonts, separated by commas. This is known as a font stack and it allows your site to have some fall back options in case the first font specified cannot be displayed.

Also, when using fonts that are multiple words, such as Playfair Display, surround the font name with single quotes, as shown in the above example.

Font Color

Changing the color of your text is perhaps one of the easiest ways to instantly call attention to certain words, phrases, or paragraphs.

To change the color of a particular text element, use the color property.

.the-element {
     color: #000000;
}

Colors can be specified via hex code or RGB. The above example shows a hex code. To use an RGB color, use this instead:

.the-element {
     color: rgb(0, 0, 0);
}

Font Size

No one wants to squint when reading a webpage, right? The font-size property allows you to customize the size of the text displayed.

.the-element {
     font-size: 14px;
}

Font size can take on a variety of different units of measurement. In the above example, we’re using pixels to define the size of our text. You can also use em, pt, and even percentages to specify your font size.

Font Weight

Font weight is the thickness or thinness of a particular bit of text. When you use a font, you’ll notice that there are usually different versions available. Take Open Sans for example. There’s light, regular, semi-bold, and bold. Each of those styles is a particular weight and has a number assigned to it.

Light is 300, regular is 400, semi-bold is 600, and bold is 700. Now depending on the font, those numbers available may vary slightly. But keep in mind that 400 is always regular and 700 is always bold. Fonts can have a weight ranging anywhere from 100 to 900, so as you can see, there is a lot of room available for different weights.

When specifying the font weight, you’ll want to use the corresponding number value for the weight you want to use. For example:

.the-element {
     font-weight: 700;
}

In the above example, you are making the font bold (because 700 corresponds to bold).

If you want to keep things simple, you could also do the following:

.the-element {
     font-weight: bold;
}

Keep in mind that if you don’t want to use the number values for weight, normal and bold are your only options. If you want to be more specific with the font weight, you must use the numerical values.

Font Style

If you want to make your text italic, the font-style property is what you’ll want to use, like so:

.the-element {
     font-style: italic;
}

Font-style can either be italic or normal, so there aren’t a ton of options. However, this will come in handy if you want to consistently style italic text across your site.

Text Decoration

Text decoration allows you to further style your text in a few ways. The most popular way is by adding an underline. To add an underline to specified text, use the following:

.the-element {
     text-decoration: underline;
}

You can also style your text by specifying line-through in place of underline in the above code example. And of course, setting text-decoration to none will allow your text to display normally, without any lines through or below.

Letter Spacing

One of my favorite ways to style text is to add letter spacing. Letter spacing allows you to increase or decrease the spacing between characters. Check out the example below:

.the-element {
     letter-spacing: 2px;
}

In this example, we’re adding 2px of space between each of the characters. You can also apply negative values, which moves the characters closer together.

But remember, too much space between characters breaks the flow of your text and makes words harder to read. Same goes for too little space — letters begin to overlap. I usually like to keep letter spacing 1-3px, but ultimately the values will depend on the font being used.

Line Height

Line height allows you to adjust the height of the line, which prevents your lines of text from feeling a bit cramped. In most browsers, the default line height is set to 110-120%.

.the-element {
     line-height: 150%;
}

In the above example, setting the line height to 150% is 1.5x the standard line height. If you set the line height to 100%, you’ll notice that there really isn’t much room between the lines.

Besides percentages, you can also include a value of any number from 1 and up. Specifying a line height of 1 is the same as 100%, while 1.5 is the same as 150%, and 2 is the same as 200%.

Text Transform

Want to change the case of some text without having to actually go in and change it? That’s where text transform comes in handy.

Text transform allows you to change the case of your specified text. Changing the case can be done by adding the following code:

.the-element {
     text-transform: uppercase;
}

In the above example, I’m using uppercase, but you can also specify lowercase or capitalize. Also, if you specify none, the text will display as entered.

Text Align

Aligning your text can be done with the following bit of code:

.the-element {
     text-align: center;
}

In the above example, you’re centering your text. You can also specify left or right for text-align.

And there you have it. 10 different ways you can style the text on your site with CSS. The best part is that you can combine these and create infinite amounts of different font styles. Just think about how you can make your text stand out when you change the color, font, weight, letter spacing, and more. It really does give you a ton of options so you’re really not limited to the default font styling. Try it out and see what you can create!

Want more help with fonts? Check out the ultimate type glossary and the ultimate list of font resources.

Quick Start Guide to Styling Text With CSS was originally posted on Allyssa Barnes.