Line Height Calculator

Line Height Calculator — A smart VS Code extension that calculates optimal line-height values based on your font-size, following typography best practices and WCAG accessibility standards.

✨ Features

Hover information: Hover over any font-size value to see recommended line-height options instantly with detailed explanations.
Intelligent autocomplete: Get contextual suggestions when typing line-height: with calculated values in both multiplier and pixel formats
Smart multipliers: Automatically suggests different multipliers based on font size:
-- <14px → 1.6 (optimal for small text)
-- 14-18px → 1.5 (optimal for body text)
-- 19-24px → 1.4 (optimal for lead text, subheadings)
-- 25-32px → 1.3 (optimal for medium headings (H3-H4))
-- 33-48px → 1.2 (optimal for large headings (H1-H2))
-- >48px → 1.1 (optimal for hero headlines)
Multiple unit support: Works seamlessly with px, rem, em, and pt units (automatically converts to pixels for calculation).
Quick commands: Insert optimal values with a single keyboard shortcut.
Accessibility compliant: All recommendations meet WCAG 2.1 contrast and readability standards.
Design-system ready: Perfect for consistent typography across projects.

📊 Why These Values?

This extension is built on real design research and standards:

WCAG 2.1
Material Design
Apple HIG
Readability Research
Professional Practice

🛠 Installation

Open VS Code → Extensions (Ctrl+Shift+X / Cmd+Shift+X).
Search for Line Height Calculator and click Install.
Restart VS Code to activate the extension.

🚀 Usage

Method 1: Hover

Examle CSS:

// Hover over any font-size value
font-size: 24px; 👈 hover here to see recommendations

A popup will show recommended values.

Method 2: Autocomplete

Examle CSS:

.element {
font-size: 24px;<br>
line-height: 👈 suggestions will appear
}

Method 3: Commands

Press Ctrl+Shift+P and use:

Line Height: Calculate for current font-size
Line Height: Insert optimal for heading
Line Height: Insert optimal for text

Method 4: Keyboard Shortcut

Press Ctrl+Alt+L (Windows/Linux) or Cmd+Alt+L (Mac) for quick calculation.

🚀 Settings

Customize the extension in VS Code settings (Ctrl+, or Cmd+,):

JSON:

{
"lineHeightCalculator.defaultHeading": 1.2,
"lineHeightCalculator.defaultText": 1.5
}

👤 Author

Andrii Ovcharov
📧 ovcharovcoder@gmail.com

☕ Support

If you enjoy DevFoundry Umber, consider supporting the author:
Donate via PayPal

🪪 License

Happy coding with perfect typography!