Line height (leading) is the vertical space between lines of text. Proper line height improves readability, especially for large blocks of text.
| Element Type | Class | Value | CSS Equivalent | Purpose |
|---|---|---|---|---|
| Display Headings | Default | 1.2 | line-height: 1.2 | Tight spacing for large text |
| Regular Headings | Default | 1.2 | line-height: 1.2 | Standard for headings |
| Body Text | Default | 1.5 | line-height: 1.5 | Optimal for reading |
| Small Text | Default | 1.5 | line-height: 1.5 | Maintains readability |
This text has tight line height (1). Developing modern responsive user interfaces with accessible design patterns and performance optimization. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This text has small line height (1.25). Developing modern responsive user interfaces with accessible design patterns and performance optimization. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This text has base line height (1.5). Developing modern responsive user interfaces with accessible design patterns and performance optimization. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This text has large line height (2). Developing modern responsive user interfaces with accessible design patterns and performance optimization. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- Line Height Utility Classes --> <p class="lh-1">Tight line height (1)</p> <p class="lh-sm">Small line height (1.25)</p> <p class="lh-base">Base line height (1.5) - Default</p> <p class="lh-lg">Large line height (2)</p> <!-- Using with other text utilities --> <h2 class="lh-1 text-primary">Tight Heading</h2> <p class="lh-lg text-muted">Large line height paragraph</p>
This line height is too tight for long text. It makes reading difficult and can cause eye strain. Avoid this for paragraphs of text.
This is the optimal line height for body text. It provides good readability and comfortable reading experience for users.
This line height might be too loose for some contexts. It can make text appear disconnected and take up unnecessary space.
| Class | Value | Percentage | Best For |
|---|---|---|---|
.lh-1 | 1 | 100% | Headings, buttons |
.lh-sm | 1.25 | 125% | Short paragraphs |
.lh-base | 1.5 | 150% | Body text (default) |
.lh-lg | 2 | 200% | Accessibility, poetry |
Small text requires careful line height adjustment for readability.
.fs-6 .lh-smStandard body text works best with base line height for comfortable reading.
.fs-5 .lh-baseLarge text benefits from increased line height for better visual separation.
.fs-3 .lh-lgRule of thumb: Line height should be 1.5x font size for optimal readability. For example, 16px font size × 1.5 = 24px line height.
Published on January 15, 2024
This is the introduction paragraph with standard line height for optimal readability. Developing modern responsive user interfaces with accessible design patterns and performance optimization.
Subsequent paragraphs maintain consistent line height throughout the article for comfortable reading experience. Sed do eiusmod tempor incididunt.
<article> <h3 class="lh-1">Article Title</h3> <p class="lh-base text-muted">Published date</p> <p class="lh-base">First paragraph...</p> <p class="lh-base">Second paragraph...</p> </article>
function calculateLineHeight(fontSize) {
// Golden ratio for readability
const goldenRatio = 1.618;
return fontSize * goldenRatio;
}
// Usage
const baseFontSize = 16;
const optimalLineHeight = calculateLineHeight(baseFontSize);
console.log(`Optimal line height: ${optimalLineHeight}px`);Note: Code blocks often use tighter line height (.lh-sm) to display more lines in limited space while maintaining readability.
On mobile: Large line height for touch-friendly spacing.
On tablet: Base line height.
On desktop: Base line height.
.lh-lg .lh-md-base .lh-sm-base/* Custom responsive line heights */
@media (max-width: 768px) {
.responsive-text {
line-height: 2; /* Larger on mobile */
}
}
@media (min-width: 769px) {
.responsive-text {
line-height: 1.5; /* Standard on larger screens */
}
}// Customize line height variables
$line-height-base: 1.6; // Changed from 1.5
$line-height-sm: 1.35; // Changed from 1.25
$line-height-lg: 2.1; // Changed from 2
// Add custom line heights
$line-heights: (
"xs": 1,
"sm": 1.35,
"base": 1.6,
"lg": 2.1,
"xl": 2.5
);
// Create custom utility
.lh-xl {
line-height: 2.5 !important;
}
// Import Bootstrap
@import "bootstrap/scss/bootstrap";Hand-picked utilities and calculators related to this tool.