CSS Text Spacing

CSS CODES & EXAMPLES

CSS Text Spacing

Learn how to control the spacing between letters, words, lines and paragraphs using CSS. Create clean, readable and professional typography for modern websites.

← CSS Text Transformation Start Learning →

What is Text Spacing?

Control the space around text

CSS provides several properties for controlling the spacing and readability of text. You can increase or decrease the space between letters, words and lines and also control the indentation of paragraphs.

Important Properties: letter-spacing word-spacing line-height text-indent

letter-spacing

Control the space between characters

The letter-spacing property controls the horizontal space between individual characters.

letter-spacing.css

h2 {
  letter-spacing: 3px;
}

CSS TEXT SPACING

Positive Letter Spacing

Increase the space between letters

Normal

Computer Education

2px

Computer Education

5px

Computer Education

Negative Letter Spacing

Reduce the space between letters

A negative value can bring characters closer together.

negative-spacing.css

h1 {
  letter-spacing: -1px;
}

SNCEC

word-spacing

Control the space between words

The word-spacing property controls the amount of horizontal space between words.

word-spacing.css

p {
  word-spacing: 10px;
}

Learn Computer Courses Online

line-height

Control the vertical space between lines

The line-height property controls the distance between lines of text. It is one of the most important properties for paragraph readability.

line-height.css

p {
  line-height: 1.8;
}

Shree Narayan Computers & Education Center provides practical computer education and skill-based learning opportunities for students, beginners and professionals. Proper line spacing makes longer content easier to read.

Compare Line Heights

See the difference in readability

1.0

Learn computer skills with practical examples and structured lessons designed for beginners.

1.5

Learn computer skills with practical examples and structured lessons designed for beginners.

2.0

Learn computer skills with practical examples and structured lessons designed for beginners.

text-indent

Add indentation to the first line

The text-indent property specifies how much the first line of a paragraph should be indented.

text-indent.css

p {
  text-indent: 40px;
}

CSS text indentation can be useful for articles, educational content and long-form text. It creates a visual starting point for each paragraph and can improve the structure of written content.

Spacing in Headings

Create professional typography

CSS COURSE

CSS Text Spacing

Create clean and readable website typography.

heading-spacing.css

.label {
  letter-spacing: 2px;
}

h2 {
  letter-spacing: -0.5px;
}

p {
  line-height: 1.7;
}

Navigation Menu Spacing

Improve menu readability

navigation-spacing.css

.navigation a {
  letter-spacing: 1px;
  word-spacing: 2px;
}

Button Text Spacing

Create clear call-to-action buttons

button-spacing.css

button {
  letter-spacing: 1px;
  word-spacing: 2px;
}

Course Card Typography

Practical education website example

FEATURED COURSE

Diploma in Computer Application

Learn computer fundamentals, Microsoft Office, internet, digital services and practical computer applications with structured lessons and hands-on activities.

6 Months View Course

Combining Text Spacing Properties

Use multiple properties together

Text spacing properties can be combined to create a complete typography system for headings, labels, paragraphs and buttons.

Build Your Digital Skills

Develop practical computer skills through structured lessons, examples, projects and exercises.

combined-spacing.css

.label {
  letter-spacing: 2px;
}

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

.description {
  word-spacing: 2px;
  line-height: 1.8;
}

.button {
  letter-spacing: 1px;
}