LESSON 3.08

Font and Text Properties

Style your text down to the last detail

Control text size, weight, line height, spacing, and alignment with CSS's powerful set of font and text properties.

💡 The Concept

CSS text properties give you fine-grained control over how text looks on a page, from size and weight to line height and alignment. Now that you know how to choose a font family and load Google Fonts, it is time to look at the properties that control everything else about how text looks: weight, style, alignment, spacing, and decoration. These are the finishing touches that turn plain text into polished typography.

font-weight

Controls how bold or light the text appears. You can use keywords or numeric values (100–900):

h1 { font-weight: bold; }  
p  { font-weight: 400; }    
b  { font-weight: 700; }

font-style

Used primarily to make text italic:

h3      { font-style: italic; }

font-size

The font-size property controls how large or small text appears. You can use several units:

p { font-size: 16px; }   /* pixels - fixed size */
p { font-size: 1rem; }   /* rem - relative to root html element */
p { font-size: 1.2em; }  /* em - relative to parent element */

Rem is usually the best choice for modern development. It is relative to the root <html> element (typically 16px by default), avoids the compounding issues of em, and respects users’ browser font size preferences:

html { font-size: 16px; }

h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
p  { font-size: 1rem; }    /* 16px */

text-align

Controls the horizontal alignment of text within its container:

h1          { text-align: center; }
p           { text-align: left; }    /* default for left-to-right languages */
.pull-quote { text-align: right; }
.article    { text-align: justify; }

text-decoration

Adds or removes decorations like underlines. Most commonly used to remove the default underline from links:

a              { text-decoration: none; }         /* removes underline */
.underlined    { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }

line-height

Controls the vertical spacing between lines of text. Good line-height dramatically improves readability. A value of 1.4–1.8 is generally ideal for body text:

p {
  font-size: 16px;
  line-height: 1.6;   /* 1.6 × 16px = 25.6px between lines */
}

h1 {
  line-height: 1.2;   /* tighter spacing for large headings */
}

letter-spacing

Adjusts the spacing between individual characters. Especially useful for headings and uppercase text:

.heading-caps {
  text-transform: uppercase;
  letter-spacing: 3px;
}

.tight {
  letter-spacing: -0.5px;
}

text-transform

Changes the capitalization of text without altering the HTML:

.upper     { text-transform: uppercase; }
.lower     { text-transform: lowercase; }
.cap-words { text-transform: capitalize; }  /* First Letter Of Each Word */

🎬 Video Demonstration

In this video I demonstrate how to apply text properties including bold, text-align, line-height, and letter-spacing:

Exercise: Try It Yourself

Step 1. Open JSFiddle.net.

Step 2. Paste this into the HTML panel:

<h1> Placeholder Text </h1> 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Step 3. In the CSS panel, try these properties:

  • font-weight: normal | bold
  • line-height: 1.5 (try a few values)
  • text-align: left | right | center
  • letter-spacing: 2px (try different pixel values)

Click Run. Your JSFiddle should look something like this:

Text properties demonstrated in a code editor
Experimenting with letter-spacing, text-align, font-weight, and line-height is the best way to see their effects.

❓ Frequently Asked Questions

Can I use font-weight values like 300 or 600, or just bold and normal?

You can use any value from 100 to 900 in increments of 100. The keywords normal and bold are equivalent to 400 and 700 respectively. However, not every font includes every weight. Some fonts only offer Regular (400) and Bold (700), while others have a full range from Thin (100) to Black (900). When you choose a font on Google Fonts, check which weights are listed for that font before using a numeric value in your CSS. If you request font-weight: 300 but the font only has 400 and 700, the browser will substitute the nearest available weight and the text may not look any different.

What is the difference between em and rem?

Both are relative units for font size, but they reference different things. em is relative to the font size of the parent element, which can cause compounding: if a parent is set to 1.2em and a child is also set to 1.2em, the child ends up at 1.44 times the base size. rem is always relative to the root <html> element, so it stays predictable no matter how deeply an element is nested. For most font-size work, rem is the safer and more consistent choice.

What line-height is best for body text?

A line-height between 1.4 and 1.8 is generally comfortable for body text, with 1.6 being a widely used default. Headings typically use a tighter value like 1.1 to 1.3 because large text looks better with less vertical space. Line-height is unitless by convention, meaning it multiplies the current font size — so line-height: 1.6 on 16px text gives about 25.6px between lines.

Is text-align: justify good for web text?

Generally no. Justified text looks clean in print, where software can carefully adjust spacing and hyphenation, but on the web it often creates uneven gaps between words, especially on narrow screens or mobile devices. Left-aligned text is the standard for body content on the web because it creates a consistent rhythm that is easier to read.

How do I remove the underline from links?

Use text-decoration: none; on the a selector. Just keep in mind that underlines are a visual cue that text is clickable, so if you remove them, make sure links are still clearly distinguishable through color, font weight, or another indicator. Removing underlines without a substitute can hurt usability.

★ Key Takeaways

Typography is one of the most impactful parts of web design. This lesson covered font size, weight, line height, and text alignment, which together control how comfortable your text is to read. Next, you will learn about CSS Classes and IDs, which are the tools you use to target specific elements with your styles. They unlock a whole new level of control over your design.

Next Lesson: CSS Classes and IDs: Targeting Elements Precisely

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons