Text Styling and CSS Units

Some of the most important properties for styling text are font size and line height.

CSS has several different units for expressing length. Font size consists of a number followed by a length unit, for example 10px.

The length unit can be: px, pt, em, rem, vw, vh, vmin, vmax.

1h1 {
2  font-size: 28px;
3}

A pixel (px) is a unit of measurement commonly used in web design, which is approximately 0.26 mm. It is an absolute unit, meaning its value is fixed in CSS, although the browser scales it when you zoom the page. In everyday life, we also encounter other absolute units, such as centimeters (cm) or millimeters (mm).

Nowadays, in web design, relative units are increasingly used, which allow elements to scale depending on other length properties. This way, page elements better adapt to different screens and resolutions.

The most popular relative units are:

• em - a unit relative to the font-size value of the element (2em means a font size twice the current font size of the element).
• rem - a unit relative to the font-size of the root element (usually the html element).
• vh - 1vh equals 1% of the browser window height (viewport).
• vw - 1vw equals 1% of the browser window width (viewport).

Using relative units enables creating responsive and flexible layouts that adapt to different devices and screen sizes, ensuring better user experiences.

The line-height property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. In other words, it is the spacing between the baselines of two adjacent lines of text. This property affects text readability as well as the overall appearance of a block of text on the page.

The line-height value can be specified as:

• An absolute unit, e.g., pixels (px) or points (pt).
• A relative unit, e.g., em, rem, or percentage (%).
• A unitless number that specifies the ratio between line height and font size. For example, line-height: 1.5 means the line height will be 1.5 times the current font size.

Here is an example of using the line-height property:

1p {
2  font-size: 16px;
3  line-height: 1.5;
4}

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - Units and Text Styling</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="container">
11        <h1>CSS Units</h1>
12
13        <div class="section">
14            <h2>Absolute Units (px)</h2>
15            <p class="absolute">This text has a size of 16px and line-height 24px.</p>
16            <p class="absolute-large">This text has a size of 20px.</p>
17        </div>
18
19        <div class="section">
20            <h2>Relative Units (em)</h2>
21            <p class="relative-em">This text uses em units (1.2em).</p>
22            <p class="relative-em-large">This text has a size of 1.5em.</p>
23        </div>
24
25        <div class="section">
26            <h2>Relative Units (rem)</h2>
27            <p class="relative-rem">This text uses rem units (1.1rem).</p>
28            <p class="relative-rem-large">This text has a size of 1.4rem.</p>
29        </div>
30
31        <div class="section">
32            <h2>Viewport Units (vw, vh)</h2>
33            <p class="viewport">This text has a size of 3vw (3% of window width).</p>
34        </div>
35
36        <div class="section typography">
37            <h2>Typographic Properties</h2>
38            <p class="bold">Bold text (font-weight: bold)</p>
39            <p class="italic">Italic (font-style: italic)</p>
40            <p class="uppercase">uppercase letters (text-transform: uppercase)</p>
41            <p class="letter-spacing">T e x t   w i t h   s p a c i n g</p>
42            <p class="different-font">Different font (Georgia, serif)</p>
43        </div>
44    </div>
45</body>
46</html>

In the example above, the line height for paragraph elements is set to 1.5 times the font size (16px). As a result, the spacing between lines will be 24px (16px * 1.5).

A well-chosen line-height value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.

Text Styling

Text styling in CSS includes various properties that can be customized:

• Font: The font-family property allows you to specify which font to use.
• Font Size: font-size specifies how large the text should be.
• Font Style: font-style controls whether the text should be italic or not.
• Font Weight: font-weight sets the thickness with a word (normal, bold) or a number from 100 to 900: 400 is regular text, and 700 is standard bold, the same as bold.
• Text Color: color allows you to specify the text color.
• Text Alignment: text-align controls text alignment to the left, right, center, or justified.
• Letter Spacing: letter-spacing allows you to control the space between letters.
• Line Spacing: line-height allows you to control the space between lines of text.
• Text Transforms: text-transform can be used to control capitalization, such as uppercase, lowercase, or capitalize.

You can write several font properties at once with the font shorthand. Style and weight come first, in any order, then the size, and the typeface last - the size and the typeface are required:

1p {
2  font: italic bold 16px serif;
3}

This paragraph will be italic, bold, 16px and in a serif typeface - one line instead of four declarations.

Exercise: Text Styling and CSS Units

In this exercise, you'll learn how to style text using various CSS units and how to use the line-height property to control text line height.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Text Styling</title>
7</head>
8<body>
9    <main>
10        <!-- Place your page content here -->
11    </main>
12</body>
13</html>

Step 2: Add a Heading and Paragraph

Add a heading and a text paragraph that you'll be styling.

1<main>
2    <h1>Text Styling in CSS</h1>
3    <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
4</main>

Step 3: Add CSS Styles

Add an internal stylesheet in the <head> section and start by setting basic styles for the heading and paragraph.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 28px;
8            color: darkblue;
9        }
10        p {
11            font-size: 16px;
12            line-height: 1.5;
13        }
14    </style>
15</head>

Step 4: Experiment with Different Units

Try applying different units to the font-size and line-height properties to see how the text size and spacing change.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em; /* Changed to em unit */
8            color: darkblue;
9        }
10        p {
11            font-size: 1rem; /* Changed to rem unit */
12            line-height: 1.8; /* Increased line height */
13        }
14    </style>
15</head>

Step 5: Add Additional Paragraphs

Add several additional paragraphs to better see the effect of the line-height property.

1<main>
2    <h1>Text Styling in CSS</h1>
3    <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
4    <p>The <code>line-height</code> value can be specified as an absolute unit, a relative unit, or a unitless number that specifies the ratio between line height and font size.</p>
5    <p>A well-chosen <code>line-height</code> value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.</p>
6</main>

Step 6: Add Additional Text Styling Properties

Add more text styling properties such as color, alignment, letter spacing, and text transforms.

1<head>
2    <style>
3        body {
4            font-family: Arial, sans-serif;
5        }
6        h1 {
7            font-size: 2em;
8            color: darkblue;
9            text-align: center; /* Center alignment */
10        }
11        p {
12            font-size: 1rem;
13            line-height: 1.8;
14            color: #595959; /* Text color */
15            letter-spacing: 0.05em; /* Letter spacing */
16            text-transform: capitalize; /* Capitalization */
17        }
18    </style>
19</head>

Result

After completing all steps, your HTML file should look like this:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Text Styling</title>
7    <style>
8        body {
9            font-family: Arial, sans-serif;
10        }
11        h1 {
12            font-size: 2em;
13            color: darkblue;
14            text-align: center;
15        }
16        p {
17            font-size: 1rem;
18            line-height: 1.8;
19            color: #595959;
20            letter-spacing: 0.05em;
21            text-transform: capitalize;
22        }
23    </style>
24</head>
25<body>
26    <main>
27        <h1>Text Styling in CSS</h1>
28        <p>The <code>line-height</code> property in CSS is used to specify the height of a line of text, i.e., the spacing between consecutive lines of text in an element. This property affects text readability as well as the overall appearance of a block of text on the page.</p>
29        <p>The <code>line-height</code> value can be specified as an absolute unit, a relative unit, or a unitless number that specifies the ratio between line height and font size.</p>
30        <p>A well-chosen <code>line-height</code> value can significantly affect the comfort of reading text for users, so it's worth experimenting with different values to achieve the optimal effect.</p>
31    </main>
32</body>
33</html>

Now you have a complete web page with text styled using various CSS units and the line-height property. You can continue experimenting by adding more styles and changing values to better understand how CSS works.