First line indentation and letter spacing

In web design, first-line indentation and letter spacing are common requirements for controlling text layout. First-line indentation is often used at the beginning of paragraphs, while letter spacing affects the overall visual effect of the text. Both are implemented using CSS, but their specific application scenarios and detailed handling require special attention.

Basic Usage of First-Line Indentation

First-line indentation is achieved using the text-indent property, with units such as px, em, or percentages. For example, the following code indents the first line of a paragraph by 2 characters:

p {
  text-indent: 2em;
}

The em unit is based on the current font size, so 2em means an indentation of two character widths. If using fixed pixel values:

p {
  text-indent: 32px;
}

Percentage values are based on the parent element's width and may not be suitable for text indentation:

p {
  text-indent: 10%; /* Not recommended for text indentation */
}

Advanced Techniques for First-Line Indentation

First-line indentation can be combined with pseudo-elements to achieve special effects. For example, adding a guide symbol to the first line:

p::first-line {
  text-indent: 1em;
  color: #666;
}

Negative indentation for a hanging indent effect:

p {
  padding-left: 2em;
  text-indent: -2em;
}

In responsive design, indentation values may need to adjust with screen size:

@media (max-width: 768px) {
  p {
    text-indent: 1em;
  }
}

Detailed Control of Letter Spacing

Letter spacing is controlled using the letter-spacing property, with units typically being px or em. Basic usage:

h1 {
  letter-spacing: 2px;
}

Negative values make letters more compact:

h2 {
  letter-spacing: -0.5px;
}

The em unit is relative to the current font size:

p {
  letter-spacing: 0.1em;
}

Practical Applications of Letter Spacing

Large headings often use increased letter spacing for better readability:

.title {
  letter-spacing: 4px;
  font-size: 2.5rem;
}

Smaller text benefits from slightly increased spacing:

.small-text {
  letter-spacing: 0.8px;
  font-size: 12px;
}

All-caps text requires additional spacing:

.uppercase {
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

Combined Usage Examples

First-line indentation and letter spacing can be used together:

.article {
  text-indent: 2em;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

Special layout effects:

.poem {
  text-indent: -1.5em;
  padding-left: 1.5em;
  letter-spacing: 0.8px;
}

Browser Compatibility Considerations

Older versions of IE have inconsistent support for percentages in text-indent:

/* Hack for IE8 and below */
p {
  text-indent: 2em;
  *text-indent: 0;
}

Mobile browsers handle very small letter spacing differently:

/* Avoid overly tight spacing on mobile devices */
@media (hover: none) {
  body {
    letter-spacing: 0.3px !important;
  }
}

Performance Optimization Suggestions

Frequent changes to letter spacing may trigger reflows:

// Avoid continuously modifying letter-spacing in animations
element.style.letterSpacing = `${value}px`;

First-line indentation has a smaller performance impact, but excessive use may increase layout calculation time.