
To set a font size of 32 px, you would use 2em. When setting fonts, 1em is equal to the default body (paragraph) text size of 16px. ems and remsĪn "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. 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. By "body text", we mean the height of paragraph text. The default body text size in CSS is 16px. This can cause strange behavior sometimes on certain screen sizes or if a user uses custom size settings in their browser. 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.

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. On web pages, however, you won't use points. It's a good unit for setting font sizes in print documents. This number is defined in a unit called "points" or "pt" for short. When working in Word or Google Documents, you choose a font size from a dropdown list. Pixelsĭefining a font size using pixels most closely resembles the way you set font sizes in most other contexts. Let's start defining sizes with pixels (an absolute way to define sizes). If the base size of 34 is redefined, the other sizes will change as well. 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. All sizes will be defined relative to the size 34.

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. 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. There are two options: setting absolute sizes and relative sizes. The primary differences between them is how sizing is calculated relative to the overall web page. Several units of measurement are available to control font size in CSS: In this chapter, we'll see how to set a font's size and control the spacing between different letters, words, and lines.įirst, let's cover the different ways to control text sizing in CSS. Now that you know how to set fonts, you're likely interested in being able to control their sizes and spacing.
