Now that you know how to set fonts, you're likely interested in being able to control their sizes and spacing.
In this chapter, we'll see how to set a font's size and control the spacing between different letters, words, and lines.
First, let's cover the different ways to control text sizing in CSS.
Font sizing
Several units of measurement are available to control font size in CSS:
pixels
em
rem
percentages
The primary differences between them is how sizing is calculated relative to the overall web page. There are two options: setting absolute sizes and relative sizes.
Setting absolute sizes means that you define exact size values, like saying you want to make t-shirts that are sizes 34, 36, 38, 40, and 42.
Setting relative sizes means that you define all values relative to a base value, like saying that you want to create a t-shirt line with a base size of 34. All sizes will be defined relative to the size 34. You might say that you want to produce another size that's 2 inches wider than that base value, a size that's 4 inches wider than that base value, a size that's 6 inches wider than that base value, and so on. If the base size of 34 is redefined, the other sizes will change as well.
Let's start defining sizes with pixels (an absolute way to define sizes).
Pixels
Defining a font size using pixels most closely resembles the way you set font sizes in most other contexts. When working in Word or Google Documents, you choose a font size from a dropdown list.
This number is defined in a unit called "points" or "pt" for short. It's a good unit for setting font sizes in print documents.
On web pages, however, you won't use points. You'll use a similar value of measurement called pixels. A screen is composed of many pixels, and by setting a font size of 12 pixels, you are saying that you want your text to have a height of 12 pixels.
The one downside with defining size by via pixel values is that your elements' sizes are defined absolutely and are not relative to one another. This can cause strange behavior sometimes on certain screen sizes or if a user uses custom size settings in their browser.
The default body text size in CSS is 16px. By "body text", we mean the height of paragraph text. This is the most fundamental text on any website, and 16px is an important number to keep in mind as you start working with the other units described in this chapter.
ems and rems
An "em" or "rem" (pronounced as one syllable) are very commonly used units of sizing in CSS because they let you define sizes relative to other elements.
When setting fonts, 1em is equal to the default body (paragraph) text size of 16px. To set a font size of 32 px, you would use 2em.
The following math will help you set a font sizes in ems:
em = desired element pixel value / parent element pixel value
A rem is similar to an em, except that it doesn't compound. When using ems, if you have an element at a size of 2em inside another element of 2em, the inner element will be shown at 4em. When using rems, it will still be shown at 2rem.
Percentages
Setting sizes via percentages is similar to setting them using ems. Sizes are defined as relative to one another, not as absolute values.
The following math will help you set font sizes in percentages:
percent value = em = desired element pixel value / parent element pixel value * 100
Font-size
Use the font-size property in CSS to adjust the size of text using any of the units above.
Once you choose a unit, just be consistent. For example, if you define one font size using ems, define all font sizes using ems.
We mentioned above that the default text size for body (paragraph) text is 16px. Therefore:
Say you want to make an h1 element larger than its default size, which is 32px, and you want to increase the paragraph text size to 18px. You can see the smaller size on the left, and the new, bigger size on the right.
The 3 different sets of CSS below all result in the same new font sizes:
/* pixels */
h1 {
font-size: 48px;
}
p {
font-size: 18px;
}
/* ems */
h1 {
font-size: 3em;
}
p {
font-size: 1.125em;
}
/* percentages */
h1 {
font-size: 300%;
}
p {
font-size: 112.5%;
}Only the above units of measurement are different. The resultant visual size is the same!
Let's quickly check out three more CSS properties that both involve sizing: line-height, letter-spacing, and word-spacing.
line-height
In school, you may have been asked to submit essays that were single-spaced or double-spaced (or even 1.5-spaced)!
In CSS, you control the vertical space between lines of text using the line-height property. This can particularly help with the readability of long paragraphs.
This paragraph is a little tough to read:
An increased line height can help. I advise you to start with a line of 1.4em and adjust it as necessary.
#code-of-conduct {
line-height: 1.4em;
}
letter-spacing
Increasing the space between letters is often useful when dealing with headings in all-caps. You should always give this value in the em or rem unit so it is proportional to the font the user has set in their browser. The spacing will be added on top of the default spacing.
Notice how the default appearance of an all-caps heading is fairly cramped (see the "C" and "A" almost touching?).
A little letter spacing can help this:
h2 {
letter-spacing: 0.08em;
}
word-spacing
You won't often need to increase the space between words, but it can be useful for poetic or literary effect. You should always give this value in the em or rem unit so it is proportional to the font the user has set in their browser.
A simple bit of text can be more theatrical with some word spacing. Here's some regular text:
Plus a little bit of word-spacing:
#quote {
word-spacing: 1.1em;
}
With extra space between words, readers focus more on each word, which can increase the sentences power. Don't do this all the time though, or your pages will be tiring to read!
Practice!
Before moving on, try manipulating font size and line and word spacing in this example on CodePen!
