line-height : The Line Height Property
Summary
The line-height property sets the vertical spacing between lines of text in PDF documents. It controls the leading (space between baselines of consecutive lines) and significantly affects readability. Line-height can be specified as an absolute unit, a unitless multiplier, or a relative unit (em units).
Usage
/* Unitless (multiplier of font-size) */
line-height: 1.5;
line-height: 2;
/* Absolute units */
line-height: 20pt;
line-height: 24px;
line-height: 1.5em;
/* Relative to font-size */
line-height: 150%;
/* Within style attribute */
<p style="line-height: 1.5">Text with comfortable line spacing</p>
Values
Unitless Numbers
- Number - Multiplier of the element’s font-size:
1.5,2.0 - Calculated as:
line-height = font-size × number - Example:
font-size: 12pt; line-height: 1.5results in 18pt line height - Converted to em units internally for processing
Absolute Units
- pt (points) - Points:
20pt,24pt - px (pixels) - Pixels:
24px,30px - in (inches) - Inches:
0.25in - cm (centimeters) - Centimeters:
0.5cm - mm (millimeters) - Millimeters:
5mm
Relative Units
- em - Relative to element’s font-size:
1.5em,2em - rem - Relative to root font-size:
1.5rem - % (percentage) - Percentage of font-size:
150%,200%
Expression Support
- calc() - Calculate line height:
calc(12pt + 4pt) - var() - Use CSS variables:
var(--line-spacing)
Notes
- Default line-height varies but is typically around 1.2 times the font-size
- Unitless values (numbers) are the recommended approach as they scale proportionally
- Unitless numbers are converted to em units internally (e.g.,
1.5becomes1.5em) - Line-height affects the total vertical space occupied by text blocks
- Larger line-height values improve readability but increase document length
- Smaller line-height values create denser text but may reduce readability
- For body text, values between 1.4 and 1.8 are typically most readable
- Line-height is inherited by child elements
- In PDF generation, proper line-height is crucial for professional appearance
- The line-height property sets the
TextLeadingstyle internally
Data Binding
CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. This enables line-height to be determined dynamically based on model data, readability preferences, or document requirements.
Binding Syntax
Data binding expressions are enclosed in double curly braces `` and can reference:
- Model properties: ``
- Nested data: ``
- Conditional expressions: ``
Data Binding Examples
<!-- Dynamic line height from model -->
<p style="line-height: ">
Text with user-defined line spacing
</p>
<!-- Conditional spacing based on content type -->
<div style="line-height: ">
</div>
<!-- Adaptive spacing for readability -->
<body>
<!-- Line height based on font size -->
<p style="font-size: pt; line-height: ">
Content with proportional line spacing
</p>
<!-- Different spacing for different sections -->
<article style="line-height: ">
<h1 style="line-height: ">
</h1>
<p><h1 id="letter-spacing--letter-spacing-property">letter-spacing : Letter Spacing Property</h1>
<p>The <code class="language-plaintext highlighter-rouge">letter-spacing</code> property controls the horizontal spacing between characters (letters) in text. This property is useful for adjusting text appearance, creating emphasis, and improving readability in PDF documents.</p>
<h2 id="usage">Usage</h2>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Length values */</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="err">0</span><span class="o">;</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">pt</span><span class="o">;</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="err">1</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">05</span><span class="nt">em</span><span class="o">;</span>
<span class="c">/* Keyword value */</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="nt">normal</span><span class="o">;</span>
<span class="c">/* Negative values */</span>
<span class="nt">letter-spacing</span><span class="o">:</span> <span class="nt">-0</span><span class="o">.</span><span class="err">5</span><span class="nt">pt</span><span class="o">;</span>
</code></pre></div></div>
<hr />
<h2 id="values">Values</h2>
<h3 id="length-units">Length Units</h3>
<ul>
<li><strong>pt (points)</strong> - Points: <code class="language-plaintext highlighter-rouge">1pt</code>, <code class="language-plaintext highlighter-rouge">2pt</code>, <code class="language-plaintext highlighter-rouge">0.5pt</code></li>
<li><strong>px (pixels)</strong> - Pixels: <code class="language-plaintext highlighter-rouge">1px</code>, <code class="language-plaintext highlighter-rouge">2px</code>, <code class="language-plaintext highlighter-rouge">0.5px</code></li>
<li><strong>em</strong> - Relative to font size: <code class="language-plaintext highlighter-rouge">0.1em</code>, <code class="language-plaintext highlighter-rouge">0.05em</code></li>
<li><strong>rem</strong> - Relative to root font size: <code class="language-plaintext highlighter-rouge">0.1rem</code></li>
<li><strong>in, cm, mm</strong> - Absolute units: <code class="language-plaintext highlighter-rouge">0.01in</code>, <code class="language-plaintext highlighter-rouge">0.1mm</code></li>
</ul>
<h3 id="keyword-values">Keyword Values</h3>
<ul>
<li><strong>normal</strong> - Default spacing (equivalent to 0)</li>
</ul>
<h3 id="negative-values">Negative Values</h3>
<ul>
<li>Negative values are allowed and will decrease spacing between characters</li>
<li>Use cautiously as excessive negative spacing can make text unreadable</li>
</ul>
<h3 id="default-value">Default Value</h3>
<ul>
<li><strong>normal</strong> - No additional spacing (0)</li>
</ul>
<hr />
<h2 id="notes">Notes</h2>
<ul>
<li>Letter spacing adds or removes space between each character</li>
<li>Positive values increase spacing, negative values decrease spacing</li>
<li>The spacing is applied in addition to the default character spacing</li>
<li>Very large positive values can make text difficult to read</li>
<li>Small positive values (0.5pt-2pt) can improve readability of uppercase text</li>
<li>Commonly used for headings, logos, and emphasis</li>
<li>Relative units (em, rem) scale with font size</li>
<li>Affects all characters including spaces</li>
<li>Does not affect word boundaries (use word-spacing for that)</li>
</ul>
<hr />
<h2 id="data-binding">Data Binding</h2>
<p>The <code class="language-plaintext highlighter-rouge">letter-spacing</code> property can be dynamically controlled through data binding, allowing character spacing to be adjusted based on design preferences, accessibility requirements, or document types.</p>
<h3 id="example-1-user-accessibility-preferences">Example 1: User Accessibility Preferences</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: ; font-size: 12pt"</span><span class="nt">></span>
<span class="nt"></p></span>
<span class="c"><!-- Data model example:
{
"accessibility": {
"letterSpacing": "1pt" // User preference for improved readability
},
"content": "This text spacing improves readability for some users."
}
--></span>
</code></pre></div></div>
<h3 id="example-2-content-type-based-spacing">Example 2: Content Type-Based Spacing</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1</span> <span class="na">style=</span><span class="s">"letter-spacing: ; font-size: ; text-transform: uppercase"</span><span class="nt">></span>
<span class="nt"></h1></span>
<span class="c"><!-- Data model for logo/branding:
{
"heading": {
"text": "ANNUAL REPORT",
"spacing": "3pt",
"size": "24pt"
}
}
--></span>
<span class="c"><!-- Data model for regular heading:
{
"heading": {
"text": "Section Overview",
"spacing": "normal",
"size": "18pt"
}
}
--></span>
</code></pre></div></div>
<h3 id="example-3-dynamic-emphasis-levels">Example 3: Dynamic Emphasis Levels</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"letter-spacing: ; font-size: 14pt; text-transform: uppercase"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="c"><!-- Data model example:
{
"emphasis": {
"text": "IMPORTANT NOTICE",
"spacing": "5pt" // Higher spacing for maximum emphasis
}
}
--></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="example-1-spaced-out-heading">Example 1: Spaced Out Heading</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h1</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 24pt; text-transform: uppercase"</span><span class="nt">></span>
ANNUAL REPORT
<span class="nt"></h1></span>
</code></pre></div></div>
<h3 id="example-2-normal-letter-spacing">Example 2: Normal Letter Spacing</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: normal; font-size: 12pt"</span><span class="nt">></span>
This paragraph uses normal letter spacing for standard readability.
<span class="nt"></p></span>
</code></pre></div></div>
<h3 id="example-3-tight-letter-spacing">Example 3: Tight Letter Spacing</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: -0.5pt; font-size: 11pt"</span><span class="nt">></span>
This text has slightly tighter letter spacing to fit more content.
<span class="nt"></p></span>
</code></pre></div></div>
<h3 id="example-4-logo-style-text">Example 4: Logo Style Text</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"letter-spacing: 5pt; font-size: 28pt; font-weight: bold; text-align: center"</span><span class="nt">></span>
BRAND NAME
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-5-subtitle-with-moderate-spacing">Example 5: Subtitle with Moderate Spacing</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><h2</span> <span class="na">style=</span><span class="s">"letter-spacing: 1.5pt; font-size: 16pt; color: #666; text-transform: uppercase"</span><span class="nt">></span>
Chapter One: Introduction
<span class="nt"></h2></span>
</code></pre></div></div>
<h3 id="example-6-certificate-header">Example 6: Certificate Header</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 30pt"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"letter-spacing: 8pt; font-size: 32pt; font-weight: bold; color: #1e40af"</span><span class="nt">></span>
CERTIFICATE
<span class="nt"></h1></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 12pt; color: #666; text-transform: uppercase"</span><span class="nt">></span>
Of Achievement
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-7-table-header-with-spacing">Example 7: Table Header with Spacing</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><table</span> <span class="na">style=</span><span class="s">"width: 100%; border-collapse: collapse"</span><span class="nt">></span>
<span class="nt"><thead></span>
<span class="nt"><tr</span> <span class="na">style=</span><span class="s">"background-color: #1e293b"</span><span class="nt">></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; color: white; padding: 10pt; text-transform: uppercase; font-size: 10pt"</span><span class="nt">></span>
Product Name
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; color: white; padding: 10pt; text-transform: uppercase; font-size: 10pt"</span><span class="nt">></span>
Quantity
<span class="nt"></th></span>
<span class="nt"><th</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; color: white; padding: 10pt; text-transform: uppercase; font-size: 10pt"</span><span class="nt">></span>
Price
<span class="nt"></th></span>
<span class="nt"></tr></span>
<span class="nt"></thead></span>
<span class="nt"><tbody></span>
<span class="nt"><tr></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #e5e7eb"</span><span class="nt">></span>Widget A<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #e5e7eb; text-align: center"</span><span class="nt">></span>10<span class="nt"></td></span>
<span class="nt"><td</span> <span class="na">style=</span><span class="s">"padding: 8pt; border-bottom: 1pt solid #e5e7eb; text-align: right"</span><span class="nt">></span>$29.99<span class="nt"></td></span>
<span class="nt"></tr></span>
<span class="nt"></tbody></span>
<span class="nt"></table></span>
</code></pre></div></div>
<h3 id="example-8-magazine-style-headline">Example 8: Magazine Style Headline</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border-left: 4pt solid #dc2626; padding-left: 15pt; margin: 20pt 0"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"letter-spacing: 2pt; font-size: 22pt; text-transform: uppercase; color: #1e293b"</span><span class="nt">></span>
Breaking News
<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 0.5pt; font-size: 14pt; color: #666; margin-top: 5pt"</span><span class="nt">></span>
Major developments in the technology sector
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-9-business-card-layout">Example 9: Business Card Layout</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 2pt solid #1e293b; padding: 30pt; width: 350pt"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">style=</span><span class="s">"letter-spacing: 6pt; font-size: 20pt; text-transform: uppercase; color: #1e40af"</span><span class="nt">></span>
John Smith
<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 2pt; font-size: 11pt; text-transform: uppercase; color: #666"</span><span class="nt">></span>
Senior Developer
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: normal; font-size: 10pt; margin-top: 15pt"</span><span class="nt">></span>
Email: john.smith@example.com<span class="nt"><br/></span>
Phone: (555) 123-4567
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-10-quote-with-emphasis">Example 10: Quote with Emphasis</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 40pt; background-color: #f9fafb"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; font-size: 18pt; font-style: italic; line-height: 1.6; color: #374151"</span><span class="nt">></span>
"Design is not just what it looks like and feels like.<span class="nt"><br/></span>
Design is how it works."
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 2pt; font-size: 11pt; text-transform: uppercase; margin-top: 15pt; color: #6b7280"</span><span class="nt">></span>
— Steve Jobs
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-11-price-tag-with-spaced-numbers">Example 11: Price Tag with Spaced Numbers</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 20pt; background-color: #fef2f2; border: 3pt solid #dc2626"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 2pt; font-size: 12pt; text-transform: uppercase; color: #991b1b"</span><span class="nt">></span>
Limited Offer
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 48pt; font-weight: bold; color: #dc2626; margin: 15pt 0"</span><span class="nt">></span>
$99
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; font-size: 10pt; text-transform: uppercase"</span><span class="nt">></span>
Regular Price: $149
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-12-document-section-divider">Example 12: Document Section Divider</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 20pt 0; border-top: 2pt solid #e5e7eb; border-bottom: 2pt solid #e5e7eb; margin: 30pt 0"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 5pt; font-size: 14pt; text-transform: uppercase; color: #374151"</span><span class="nt">></span>
Section II
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-13-invoice-header">Example 13: Invoice Header</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 20pt"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"letter-spacing: 4pt; font-size: 28pt; text-transform: uppercase; color: #1e293b"</span><span class="nt">></span>
Invoice
<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; font-size: 11pt; color: #666; margin-top: 10pt"</span><span class="nt">></span>
<span class="nt"><p></span>NUMBER: INV-2024-001<span class="nt"></p></span>
<span class="nt"><p></span>DATE: October 14, 2025<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-14-menu-category-headers">Example 14: Menu Category Headers</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"padding: 20pt"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 16pt; text-transform: uppercase; color: #92400e; border-bottom: 2pt solid #92400e; padding-bottom: 5pt"</span><span class="nt">></span>
Appetizers
<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: normal; font-size: 11pt; margin-top: 10pt"</span><span class="nt">></span>
Spring Rolls - $6.99<span class="nt"><br/></span>
Bruschetta - $7.99
<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 16pt; text-transform: uppercase; color: #92400e; border-bottom: 2pt solid #92400e; padding-bottom: 5pt; margin-top: 25pt"</span><span class="nt">></span>
Main Courses
<span class="nt"></h3></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: normal; font-size: 11pt; margin-top: 10pt"</span><span class="nt">></span>
Grilled Salmon - $18.99<span class="nt"><br/></span>
Ribeye Steak - $24.99
<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="example-15-report-cover-page">Example 15: Report Cover Page</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center; padding: 100pt 50pt"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">style=</span><span class="s">"letter-spacing: 8pt; font-size: 36pt; font-weight: bold; text-transform: uppercase; color: #1e40af; line-height: 1.4"</span><span class="nt">></span>
Quarterly<span class="nt"><br/></span>Financial<span class="nt"><br/></span>Report
<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"margin-top: 50pt"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 3pt; font-size: 18pt; text-transform: uppercase; color: #64748b"</span><span class="nt">></span>
Q4 2024
<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"letter-spacing: 1pt; font-size: 12pt; color: #94a3b8; margin-top: 20pt"</span><span class="nt">></span>
PREPARED BY FINANCE DEPARTMENT
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/cssproperties/word-spacing">word-spacing</a> - Space between words</li>
<li><a href="/reference/cssproperties/text-align">text-align</a> - Text alignment</li>
<li><a href="/reference/cssproperties/font-size">font-size</a> - Text size</li>
<li><a href="/reference/cssproperties/text-transform">text-transform</a> - Text case transformation</li>
<li><a href="/reference/cssproperties/line-height">line-height</a> - Line spacing</li>
<li><a href="/reference/htmlattributes/style">style attribute</a> - Inline CSS styles</li>
</ul>
<hr />
</p>
</article>
<!-- Accessibility-aware line height -->
<div style="line-height: ">
</div>
<!-- Document type-specific spacing -->
<div style="line-height: ">
Spacing optimized for document type
</div>
</body>
Note: Bound line-height values can be unitless numbers (recommended), absolute units (e.g., ‘20pt’), or percentages (e.g., ‘150%’). Unitless values scale proportionally with font-size changes.
Examples
Example 1: Unitless Multiplier
<p style="font-size: 12pt; line-height: 1.5">
Text with 1.5x line height (18pt spacing between baselines)
</p>
Example 2: Double Spacing
<div style="font-size: 11pt; line-height: 2">
Double-spaced text for better readability and note-taking space
</div>
Example 3: Absolute Point Value
<p style="font-size: 12pt; line-height: 20pt">
Text with 20pt line height regardless of font size changes
</p>
Example 4: Tight Line Height
<div style="font-size: 14pt; line-height: 1.2">
Compact text with minimal line spacing
</div>
Example 5: Generous Line Height
<article style="font-size: 11pt; line-height: 1.8">
Article text with generous line spacing for improved readability
in longer documents and reports.
</article>
Example 6: Em-Based Line Height
<p style="font-size: 12pt; line-height: 1.5em">
Text with line height specified in em units (18pt)
</p>
Example 7: Percentage Line Height
<div style="font-size: 10pt; line-height: 150%">
Text with percentage-based line height (15pt)
</div>
Example 8: Invoice Line Items
<table style="font-size: 10pt; line-height: 1.4">
<tr>
<td>Product Description</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td>Premium Widget Set with extended warranty</td>
<td>5</td>
<td>$125.00</td>
</tr>
</table>
Example 9: Report Paragraph Spacing
<div style="font-size: 11pt; line-height: 1.6">
<p>
This report presents findings from our quarterly analysis.
Comfortable line spacing ensures the content is easy to read
and understand.
</p>
<p>
Key metrics show improvement across all departments with
particularly strong performance in sales and customer service.
</p>
</div>
Example 10: Heading with Custom Line Height
<h1 style="font-size: 24pt; line-height: 1.3">
Annual Report
2024
</h1>
Example 11: Compact Table Data
<table style="font-size: 9pt; line-height: 1.1">
<tr><td>Q1</td><td>$125,000</td><td>+15%</td></tr>
<tr><td>Q2</td><td>$142,000</td><td>+8%</td></tr>
<tr><td>Q3</td><td>$138,000</td><td>-2%</td></tr>
<tr><td>Q4</td><td>$155,000</td><td>+12%</td></tr>
</table>
Example 12: Certificate Text
<div style="text-align: center">
<div style="font-size: 28pt; line-height: 1.2">
Certificate of Completion
</div>
<div style="font-size: 14pt; line-height: 2">
This certifies that
</div>
<div style="font-size: 20pt; line-height: 1.5">
Jane Smith
</div>
</div>
Example 13: Footer with Tight Spacing
<footer style="font-size: 8pt; line-height: 1.3">
<div>Company Name Inc. | 123 Business Street | City, State 12345</div>
<div>Phone: (555) 123-4567 | Email: info@company.com</div>
<div>© 2024 All Rights Reserved</div>
</footer>
Example 14: Quote Block with Generous Spacing
<blockquote style="font-size: 12pt; line-height: 1.8; font-style: italic">
"Success is not final, failure is not fatal: it is the courage
to continue that counts."
</blockquote>
Example 15: Professional Document with Variable Line Heights
<article style="font-family: Georgia, serif">
<header>
<h1 style="font-size: 22pt; line-height: 1.2">
Executive Summary
</h1>
<div style="font-size: 10pt; line-height: 1.4; font-style: italic">
Quarterly Business Review - Q4 2024
</div>
</header>
<section style="font-size: 11pt; line-height: 1.6">
<h2 style="font-size: 16pt; line-height: 1.3">
Financial Performance
</h2>
<p>
This quarter has demonstrated exceptional growth across all
business units. Total revenue increased by 18% compared to
the previous quarter, exceeding our projected targets.
</p>
<p>
Key performance indicators show positive trends in customer
acquisition, retention rates, and average transaction values.
These metrics suggest sustainable growth patterns for the
coming fiscal year.
</p>
</section>
<section style="font-size: 10pt; line-height: 1.5">
<h3 style="font-size: 13pt; line-height: 1.3">
Detailed Metrics
</h3>
<table style="line-height: 1.4">
<tr style="font-weight: bold">
<td>Metric</td>
<td>Value</td>
<td>Change</td>
</tr>
<tr>
<td>Revenue</td>
<td>$2,450,000</td>
<td>+18%</td>
</tr>
<tr>
<td>New Customers</td>
<td>1,247</td>
<td>+23%</td>
</tr>
</table>
</section>
<footer style="font-size: 9pt; line-height: 1.3; border-top: 1pt solid #ccc; padding-top: 10pt">
<div>Confidential - For Internal Use Only</div>
<div>Prepared by Finance Department | January 2024</div>
</footer>
</article>
See Also
- font - Shorthand font property (includes line-height)
- font-size - Font size specification
- font-family - Font family specification
- text-leading - Alternative name for line height
- style attribute - Inline CSS styles