Text alignment and line height control

Text Alignment and Line Height Control

Text alignment and line height are two core properties in CSS for controlling text layout. Proper alignment and line height settings can significantly improve page readability and visual comfort. The text-align property controls horizontal text alignment, while line-height determines the vertical spacing between lines.

Text Alignment Methods

The text-align property supports four main alignment methods:

.left-align {
  text-align: left; /* Left alignment (default) */
}

.center-align {
  text-align: center; /* Center alignment */
}

.right-align {
  text-align: right; /* Right alignment */
}

.justify-align {
  text-align: justify; /* Justified alignment */
}

Justified alignment (justify) produces a special effect by automatically adjusting word spacing to align text edges on both sides. This is particularly useful in multi-column layouts:

<div class="newspaper-column">
  <p>This is justified text content, which automatically adjusts word spacing...</p>
</div>

<style>
.newspaper-column {
  column-count: 2;
  column-gap: 2em;
}
.newspaper-column p {
  text-align: justify;
  hyphens: auto; /* Allow automatic hyphenation */
}
</style>

Line Height Calculation Methods

The line-height property can be assigned in several ways:

.single-line {
  line-height: 1; /* Unitless value, relative to current font size */
}

.fixed-line {
  line-height: 24px; /* Fixed pixel value */
}

.relative-line {
  line-height: 1.5em; /* Relative unit */
}

.global-line {
  line-height: 150%; /* Percentage value */
}

The best practice is to use unitless values because they offer inheritance advantages. When set on the root element, all child elements will calculate line height based on their respective font sizes:

:root {
  line-height: 1.5; /* Base line height */
}

h1 {
  font-size: 2rem; /* Actual line height = 2rem × 1.5 = 3rem */
}

p {
  font-size: 1rem; /* Actual line height = 1rem × 1.5 = 1.5rem */
}

Vertical Centering Techniques

Combining line-height and height can achieve vertical centering for single-line text:

.button {
  height: 40px;
  line-height: 40px; /* Same as height */
}

For multi-line text, use padding or flexbox:

.multi-line {
  padding: 10px 0;
  /* Or */
  display: flex;
  align-items: center;
}

Responsive Line Height Control

Adjusting line height for different screen sizes can optimize reading experience:

article {
  line-height: 1.5;
}

@media (min-width: 768px) {
  article {
    line-height: 1.6; /* Increase line spacing on larger screens */
  }
}

Text Alignment and Directionality

In RTL (right-to-left) language environments, alignment behavior changes:

.rtl-text {
  direction: rtl;
  text-align: start; /* Automatically adapts to right alignment */
}

Line Height Inheritance Issues

Line height inheritance can sometimes produce unexpected effects:

.parent {
  font-size: 16px;
  line-height: 1.2em; /* Calculates to 19.2px */
}

.child {
  font-size: 24px; /* Inherited line height remains 19.2px */
}

The solution is to use unitless values:

.parent {
  line-height: 1.2; /* Child elements will calculate based on their own font size */
}

Alignment in Table Cells

Text alignment in table cells requires special handling:

td {
  vertical-align: middle; /* Vertical centering */
  text-align: center; /* Horizontal centering */
}

Relationship Between Line Height and Spacing

Line height affects the visual appearance of paragraph spacing:

p {
  margin-bottom: 1em;
  line-height: 1.6;
}

Advanced Alignment Techniques

CSS Grid and Flexbox provide more precise alignment control:

.grid-container {
  display: grid;
  place-items: center; /* Both horizontal and vertical centering */
}

.flex-container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

Browser Differences in Text Alignment

Some alignment properties behave differently across browsers:

.justify-fallback {
  text-align-last: right; /* Last line alignment */
  -moz-text-align-last: right; /* Firefox prefix */
}

Performance Considerations for Line Height

Extreme line height values can impact rendering performance:

/* Avoid this approach */
.performance-issue {
  line-height: 0.1;
}

Dynamic Line Height Adjustment

Use CSS variables for dynamic line height:

:root {
  --base-line-height: 1.4;
}

.adaptive-text {
  line-height: calc(var(--base-line-height) * 1.2);
}