Tailwind CSS Line Height

Line height, also known as "leading" in typography, represents the vertical spacing between lines of text in a block or element. It plays a fundamental role in controlling text's readability and aesthetics, ensuring content is visually balanced.

Tailwind CSS includes various pre-configured line-height classes while allowing you to define custom line-height values that align with your design's requirements. Let’s explore how to efficiently work with line-height in Tailwind CSS.

Overview of Line Height

Adding Relative Line Height

Relative line heights use unitless values that depend on the font size of the element. These are useful when you aim to maintain a harmonious relationship between text size and spacing.

Tailwind's leading-relaxed class here creates proportional spacing that usually fits better with long-form text.

export default function App() {
  return <h1>Hello world</h1>
}

Adding Fixed Line Height

Fixed line heights are predefined values (like 4, 5, 6) that offer consistent spacing irrespective of the preceding font size. Use them when text requires fixed positioning.

For this case, leading-9 sets the line height to a fixed 36px, irrespective of viewport or surrounding contexts.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Responsive and state-specific utilities enhance Tailwind's flexibility. You can control line-heights based on interaction states and breakpoints.

Hover and Focus States

Hover-specific changes, such as modifying line height when a user hovers over an element, enhance user feedback via interactive styling.

The class hover:leading-loose here activates an expanded line height when hovered.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Breakpoints help you adjust line heights based on screen size while enhancing readability for different devices.

The lg:leading-10 here ensures spacing is significantly increased for larger display areas, enhancing readability.

export default function App() {
  return <h1>Hello world</h1>
}

Custom Line Height

When working with responsive typography, it's crucial to manage how line heights are applied across different breakpoints. Tailwind's font-size utilities come with their own default line heights, which can override any explicitly set line heights at smaller breakpoints when larger font sizes are applied at higher breakpoints.

For example, consider a paragraph that has a specific line height set for a base font size. When a larger font size is applied at a medium breakpoint, the default line height associated with that larger font size will take precedence, potentially disrupting the intended spacing.

To maintain control over line heights when changing font sizes responsively, always set the line height for each breakpoint where the font size changes. This practice ensures that the spacing between lines remains harmonious with the new font size, preserving the overall typographic balance.

export default function App() {
  return <h1>Hello world</h1>
}

Using the same line height across varying font sizes can lead to poor typographic results. Typically, as font sizes increase, the line height should decrease to maintain visual appeal and readability. Tailwind's default behavior generally handles this scaling effectively, reducing the need for manual adjustments. However, if customization is necessary, consider adjusting the font-size scale to exclude default line heights that conflict with your design requirements.

Custom Line Height

Extending the Theme

Alter the Tailwind configuration file (tailwind.config.js) for scalable usage:

export default function App() {
  return <h1>Hello world</h1>
}

Using Arbitrary Values

Applying arbitrary line-height values directly caters to one-off experimental needs. To use an arbitrary line-height, define the value inside square brackets along with the leading utility. Here's an example:

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Blog Post Grid with Variable Line Heights

This component showcases different line heights for blog post cards with titles, excerpts, and metadata.

export default function App() {
  return <h1>Hello world</h1>
}

Testimonial Carousel with Dynamic Line Heights

A testimonial component that adjusts line height based on content length and screen size.

export default function App() {
  return <h1>Hello world</h1>
}

Feature List with Hierarchical Line Heights

A component displaying product features with different line heights for hierarchy.

export default function App() {
  return <h1>Hello world</h1>
}

Pricing Table with Varied Line Heights

A pricing component using different line heights for better readability.

export default function App() {
  return <h1>Hello world</h1>
}

Team Directory with Responsive Line Heights

A team directory component with responsive line heights for different screen sizes.

export default function App() {
  return <h1>Hello world</h1>
}

Customization Examples

Article Card with Custom Line Heights for Different Text Elements

This example demonstrates how to create an article card with customized line heights for the title, subtitle, and body text to improve readability.

export default function App() {
  return <h1>Hello world</h1>
}

Pricing Table with Variable Line Heights

This example shows how to implement a pricing table with different line heights for various content sections.

export default function App() {
  return <h1>Hello world</h1>
}

Hero Section with Dynamic Line Heights for Responsive Text

This example demonstrates how to create a hero section with responsive line heights that adjust based on screen size.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

Always prioritize maintaining a matching line-height values to your typographic scale. For example, pairing leading-relaxed for body text with leading-tight for titles establishes a clean reading experience.

You can also define consistent custom line-height themes in your Tailwind configuration file. If all your headings follow only two specific line-height values, leverage custom tokens in tailwind.config.js to name these explicitly. Apply these reusable styles across your components. This practice avoids arbitrary spacing, strengthens composability, and ensures design adherence when scaling your app.

Balance with Other Layout Properties

Properly combining line-height utilities with padding and margin classes enhances both usability and aesthetics. If you define a large title in leading-none, spacing utilities like mt-4 or mb-2 can help visually distinguish that title from surrounding sections, maintaining a clean appearance.

Accessibility Considerations

Enhance Readability and Navigability

Using Tailwind CSS line-height classes such as leading-relaxed or leading-loose ensures body text is adequately spaced, reducing eye strain for readers. For long-form content, avoid shorter line heights like leading-tight, as these can hinder readability, particularly for neurodivergent users or those with cognitive disabilities.

Also, test multiple line-height values on your brand fonts as the same line height may not suit all fonts.

Focus on High Contrast

Line height influences visual spacing, which indirectly helps ensure adequate contrast ratios between text and background. Try pairing leading-* utilities with background color utilities that have enough contrast for readable content.

For accessibility, avoid using dense styles like leading-tight over backgrounds directly underlaid with complex imagery or gradients. Instead, combine leading-relaxed with Tailwind's opacity classes (bg-opacity-75) to mask disruptive patterns and create cleaner, high-contrast sections.