Styling text

There are quite a lot of font-related properties and values that we can use when styling text. I don’t suggest trying to memorize them all. You’ll be repeating some of them very often that they’ll sink in, and you can do a quick search for the others when you need them.

The most common

• color: change the color of the text
• font-family: choose the font you want to use
• font-size: set the size of the text
• font-weight: Make your text bold, light, etc.
• font-style: Used to change the style, generally for italic text
• text-align: Change the text alignment
• text-decoration: Used for the underline on links, among other things
• text-transform: Make text uppercase, or titles capitalized
• line-height: Controls the distance between lines within blocks of text (the leading)

The next few lessons will look at font-size and font-family in more detail, as they are bigger topics. We’ll quickly look at a few of the others first.

See the Pen Starter - No CSS by Kevin (@kevinpowell) on CodePen.

text-align

We can align text using:

• text-align: start
• text-align: center
• text-align: end

These are all logical properties, with left and right also being options.

See the Pen logical properties by Kevin (@kevinpowell) on CodePen.

font-weight

We can make text bold, light, etc. using font weight. We do have keywords that we can use, with the most common being:

• light
• normal
• bold

There are others as well, but I’d suggest avoiding using the keywords, and using the the numerical values instead, which there is 100 to 900, though most fonts only have a limited set of numbers you can use.

The most common ones you’ll use will be:

• 300 (light)
• 400 (normal)
• 700 (bold)

There are also keywords like bolder and lighter which will go one step bolder or lighter than the current font weight.

When you use <strong>, the user agent style is font-weight: bolder (Chrome and Safari used to use font-weight: bold, but all browsers now user bolder).

font-style

If you ever need to italic text, you would use font-style: italic. There is also font-style: oblique, which simply slants the font at an angle, while italic text often has different shaped characters. Often you won’t notice the different, but I’d suggest using italic unless you have a very specific reason to use oblique.

• This is normal
• This is using italic

text-transform

If you need your text to be all uppercase, or the first letter of every word capitalized, instead of re-writing it, we can use text-transform.

• uppercase: MAKES ALL CAP TEXT
• capitalize: Makes The First Letter Of Every Word A Capital
• lowercase: makes all of the letters lowercase
• none: the default, which doesn’t change anything