How to Find Line Height on Any Website
Line height is one of the most important — and often overlooked — typographic properties. It directly affects readability and the overall feel of a design. Here's how to find and understand the line height of any text on a website.
Use Font Finder to Read Line Height Instantly
Font Finder displays the computed line height of any text element when you hover over it. The value is shown in pixels, so you always know the exact spacing between lines regardless of how it was defined in CSS. This is particularly helpful because line height can be set in many different ways — as a pixel value, an em value, a percentage, or a unitless number — but Font Finder always resolves it to the final rendered pixel measurement. Just install the extension, activate it, and hover over any text to see the line height alongside the font family, size, and weight.
Inspect Line Height with DevTools
Right-click on the text element and select 'Inspect'. In the Computed tab, search for 'line-height' to see the resolved value. In the Styles panel, you can see the original CSS declaration, which might be in any unit. The box model diagram at the top of the Computed tab also helps you visualize how line height affects the element's total height. Keep in mind that if no line-height is explicitly set, the browser uses a default value (usually around 1.2), which varies slightly across browsers and font families.
Understand Line-Height Units: px, em, and Unitless
Line height can be specified in several formats, and the differences matter. A pixel value like line-height: 24px is absolute and doesn't change with font size. An em value like line-height: 1.5em multiplies the current element's font size (16px x 1.5 = 24px), but can cause compounding issues in nested elements because em values inherit the computed pixel value rather than recalculating. A unitless value like line-height: 1.5 is generally preferred because it recalculates based on each element's own font size, avoiding inheritance problems. When you see a line-height value in DevTools, check whether it's unitless, em, or px to fully understand how the design behaves responsively.
Calculate the Line-Height Ratio for Readability
The line-height ratio is the line height divided by the font size. For example, if the font size is 16px and the line height is 24px, the ratio is 1.5. This ratio is more meaningful than the raw pixel value because it tells you about readability independent of font size. For body text, a ratio between 1.4 and 1.6 is generally considered comfortable for reading. Headings can use tighter ratios (1.1 to 1.3) because large text needs less relative spacing. If you're analyzing a well-designed site, calculating this ratio gives you a portable number you can apply to your own projects at any font size.
Common Line-Height Best Practices
Most typography experts recommend a unitless line-height between 1.4 and 1.6 for body text to ensure comfortable reading. For headings, a tighter value of 1.1 to 1.3 works well because larger text naturally has more visual space between lines. The WCAG accessibility guidelines (Success Criterion 1.4.12) recommend that line height should be at least 1.5 times the font size for body text. Very long lines of text benefit from more generous line height, while shorter line lengths (like in a sidebar) can get away with tighter spacing. When studying a website's typography, compare the line-height ratios across different text sizes to see how the designer handled vertical rhythm.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.