Styling Text with CSS (Fonts, Size, Line Height)

by

Typography plays a huge role in how your website looks and feels. With CSS, you have full control over how text appears on the web page – from fonts to spacing, from size to weight.

In this post, you will learn how to:

  • Apply fonts (including Google Fonts)
  • Change text size and style
  • Control spacing using line-height, letter-spacing
  • Align text properly and more

Let’s make your text look beautiful.

Changing Fonts in CSS

Use the font-family property to apply fonts to your text.

Example:

p {
  font-family: Arial, sans-serif;
}

This sets Arial as the primary font. If it’s not available, it falls back to a generic sans-serif.

Good Practice

Always provide fallback fonts.

body {
  font-family: "Open Sans", Helvetica, sans-serif;
}

The browser will try to use the fonts in the listed order. Here, “Open Sans” is placed inside quotes because the name has a space.

This code ensures that the page text is displayed using “Open Sans” if it’s available, or falls back to Helvetica or any generic sans-serif font. It’s a common approach to ensure consistent typography across different devices and browsers.

Using Google Fonts

<!-- HTML Code -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  • This code is an HTML <link> tag that imports a font from Google Fonts.
  • This tag is used in the <head> of an HTML document.
  • The URL in this code points to a stylesheet provided by Google Fonts.
  • display=swap is a performance setting that tells the browser to show fallback fonts immediately, then swap in Roboto when it’s loaded.
  • It enables you to use the Roboto font in your CSS like this:
body {
  font-family: 'Roboto', sans-serif;
}

This is commonly done to enhance typography on websites with custom web fonts.

Font Size

Use font-size property to control how big or small your text appears.

Units You Can Use

  • px (pixels): fixed size
  • em: relative to parent font size
  • rem: relative to root font size (usually preferred)

Example using px:

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

Example using em:

  • em sizes are relative to the parent element’s font size.
  • 1em = 100% of the parent element’s font size. Means, if the parent font size is 16px, then 1em = 16px.
  • Nested em values compound, which can lead to unexpected sizes.
body {
  font-size: 16px;
}

.container {
  font-size: 1.5em; /* 1.5 * 16px = 24px */
}

.container p {
  font-size: 0.5em; /* 0.5 * 24px = 12px */
}

So here, the <p> tag ends up with 12px, because 0.5em is based on its parent .container, not the root.

Example using rem:

  • rem sizes are relative to the root element’s font size
  • 1rem = 100% of the root (<html>) element’s font size.
  • More predictable than em, since it’s not affected by nesting.
html {
  font-size: 16px;
}

.container {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

.container p {
  font-size: 0.5rem; /* 0.5 * 16px = 8px */
}

Here the <p> tag gets 8px, no matter where it is placed, because rem always refers to the root font size.

Pro Tips:
1. Use rem for base layouts and text, for predictability.
2. Use em for scaling elements within components, like buttons.

Font Weight and Style

Font Weight

The font-weight property controls the thickness or boldness of the text.

strong {
  font-weight: bold; /* or numeric: 400, 700 */
}

Common Values:

  • normal – Default weight (usually 400)
  • bold – Bold text (usually 700)

Numeric Values:

  • CSS also supports numeric values to define font weight more precisely (in increments of 100).
  • Not all fonts support all weights. If a specific weight isn’t available, the browser may simulate it.

Font Style

Font styles mainly refer to whether the text is italic, oblique, or normal.

Example:

p {
  font-style: italic;
}

font Shorthand Property

You can combine several font properties into one line using the font shorthand:

p {
  font: italic bold 16px 'Open Sans', sans-serif;
}

This includes:

  • font-style: italic
  • font-weight: bold
  • font-size: 16px
  • font-family: ‘Open Sans’, sans-serif
  • and more..

Line Height (Vertical Spacing Between Lines)

Line height improves readability by adding space between lines of text.

p {
  line-height: 1.6;
}

It’s a multiplier (not pixels here). 1.6 means 160% of the font size.

Letter and Word Spacing

Letter Spacing:

Adds horizontal space between characters.

h1 {
  letter-spacing: 1px;
}

Word Spacing:

Adds horizontal space between words.

p {
  word-spacing: 5px;
}

Text Alignment

The text-align property in CSS is used to control the horizontal alignment of inline content (typically text) inside a block-level container (like <div>, <p>, <section>, etc.).

Example:

h2 {
  text-align: center;
}

Common Values:

  • left – Aligns text to the left (It’s default for LTR languages like ‘English’)
  • right – Aligns text to the right (It’s default for RTL languages like ‘Arabic’)
  • center – Centers the text horizontally
  • justify – Stretches lines so that all lines have equal width (like in newspapers)

Pro Tips:
1. text-align affects inline content only, not the container itself.
2. To horizontally center a block element, use margin: auto or flexbox/grid instead.
3. text-align: justify is great for print-style layouts but may cause awkward spacing on web if not used carefully.

Text Transform

This CSS property controls letter casing.

Example:

text-transform: uppercase; /* Transforms all letters to capital */
text-transform: lowercase; /* Transforms all letters to lowercase */
text-transform: capitalize; /* Transforms first letter of each word to capital */

Combined Example

HTML

<div class="typography-box">
  <h1>Hello CSS!</h1>
  <p>This is styled text with proper spacing and font.</p>
</div>

CSS

.typography-box {
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  word-spacing: 2px;
  text-align: justify;
}

Quick Recap

PropertyWhat It Controls
font-familyFont type
font-sizeText size
font-weightThickness of the text
font-styleItalic or normal
line-heightSpace between lines
letter-spacingSpace between characters
word-spacingSpace between words
text-alignHorizontal alignment of text
text-transformUppercase/lowercase styling

Practice Challenge

Try styling a paragraph with:

  • Google font: Roboto
  • Font size: 18px
  • Line height: 1.8
  • Justified alignment
  • Capitalize the first letter of each word.

Sharing Is Caring...