CSS Text & Fonts

This post covers all essential CSS properties for controlling text styling, font settings, spacing, and web fonts — everything you need to make your content readable, stylish, and responsive.

✅ Font Basics

font-family

Defines the font stack to use:

body {
  font-family: 'Poppins', Arial, sans-serif;
}

💡 Always include fallbacks and a generic family like sans-serif, serif, or monospace.

font-size

Sets the size of the font:

h1 {
  font-size: 2rem; /* or px, %, em */
}

Use relative units like em, rem for better scalability.

font-weight

Sets how bold the text is:

p {
  font-weight: 400; /* normal: 400, bold: 700 */
}

font-style

Used for italic or oblique fonts:

em {
  font-style: italic;
}

font

Shorthand for multiple font properties:

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

Text Styling

text-align

Aligns text horizontally:

h2 {
  text-align: center; /* left, right, justify */
}

text-decoration

Applies decoration like underline:

a {
  text-decoration: none;
}

Options: underline, overline, line-through, none

text-transform

Controls case styling:

p.upper {
  text-transform: uppercase; /* lowercase, capitalize */
}

text-indent

Indents the first line:

p {
  text-indent: 2em;
}

text-shadow

Adds a shadow to text:

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

Line Height & Spacing

line-height

Controls vertical spacing between lines:

body {
  line-height: 1.6;
}

letter-spacing & word-spacing

h1 {
  letter-spacing: 1px;
  word-spacing: 3px;
}

White Space & Wrapping

white-space

Controls how white space is handled:

pre {
  white-space: pre-wrap;
}

Values:

  • normal (default)
  • nowrap
  • pre, pre-wrap, pre-line

word-break and overflow-wrap

p {
  word-break: break-word;
  overflow-wrap: break-word;
}

These prevent long words from breaking layouts.

direction

Sets text direction:

body {
  direction: rtl; /* or ltr */
}

🔗 Using Web Fonts

Google Fonts

  1. Go to Google Fonts
  2. Copy the <link> tag:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  1. Add to your HTML <head>, then use in CSS:
body {
  font-family: 'Roboto', sans-serif;
}

@font-face (Self-hosted Fonts)

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

Use like this:

body {
  font-family: 'MyFont', sans-serif;
}

Pro Tips

  • Use rem for font sizing across your site for better control.
  • Keep line-height around 1.4–1.8 for readability.
  • Avoid using too many different fonts — 2 is ideal.
  • Use text-align: justify carefully; it can create awkward spaces.

Final Example

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  word-spacing: 1px;
  letter-spacing: 0.2px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}