Line Height Recommender

Enter font size and line length to get recommended CSS line-height values for body text, headings, and captions.

Use the Line Height Recommender

Typography Inputs

px
ch

Line Length Assessment

—
Too narrow Ideal (45–75 ch) Too wide
Body Text
1.50
line-height
Headings
1.15
line-height
Captions
1.35
line-height

Why these values?

—

Live Preview

Reflects your inputs

Heading One Example

Good line-height keeps text comfortable to read. It scales with font size and adapts to how wide your text column is — a wider measure needs more vertical breathing room so the reader's eye can track back to the start of the next line without losing its place.

Caption: supplementary note in smaller type.

CSS Variables


        


    






    Copied!




            

                

          

                        

                
Summary

                
Enter font size and line length to get recommended CSS line-height values for body text, headings, and captions.

            

                        

                
How it works

                
    
                                        
  1. Enter your body font size in pixels (typically 14–20px).
    2. 
                                        
  2. Set the line length (measure) — the width of your text column in characters or pixels.
    3. 
                                        
  3. Choose a text style context: editorial, UI, or dense data.
    4. 
                                        
  4. Review the recommended line-height values for body text, headings, and captions.
    5. 
                                        
  5. Copy the CSS snippet to paste directly into your stylesheet.
    6. 
                                    

            

                        

                
Use cases

                
    
                                        
  • Set readable line spacing for a blog or long-form article layout.
    • 
                                        
  • Fine-tune heading line-height for tight, professional display type.
    • 
                                        
  • Adjust caption and label spacing in compact UI components.
    • 
                                        
  • Validate existing line-height values against typographic best practices.
    • 
                                        
  • Generate CSS variables for a design system with consistent vertical rhythm.
    • 
                                        
  • Compare how line-height interacts with measure (line length) before committing to a layout.
    • 
                                    

            

                        

                
Frequently Asked Questions

                

                                        

                        
                        
                    

                                        

                        
                        
                    

                                        

                        
                        
                    

                                        

                        
                        
                    

                                        

                        
                        
                    

                                    

            

                      


          
        


                

            Last updated: 2026-09-22 ·
            Reviewed by Nham Vu