Tillitsdone
down Scroll to discover

CSS line-height A Guide to Text Spacing

CSS line-height property controls the spacing between lines of text.

Learn how to use it effectively for better readability and design.

Explore options like normal, number, length, and percentage.
thumbnail

Introduction to CSS line-height

The CSS line-height property is essential in web design. It sets the height of a line box in horizontal writing modes and the width in vertical writing modes. This property helps adjust the space between lines of text, making your content more readable and visually appealing.

Understanding line-height in Horizontal Writing Modes

In horizontal writing modes, the CSS line-height property is crucial for determining the space between lines of text. This spacing impacts readability and the overall appearance of your web content.

For block-level elements, like paragraphs (<p>) and divs (<div>), the line-height property sets the preferred height of line boxes within the element. This ensures consistent and readable text across different sections of your web page.

For non-replaced inline elements, like spans (<span>) and emphasized text (<em>), the line-height property specifies the height used to calculate the line box height. This helps maintain a consistent vertical rhythm, making the text easier to read and the layout more visually appealing.

Vertical Writing Modes and line-height

In vertical writing modes, the CSS line-height property determines the width of the line box instead of the height. This is important for languages that use vertical text orientation, such as Japanese, Chinese, and Korean.

When working with vertical writing modes, the line-height property can be used to adjust the space between vertical lines of text. This ensures that the text remains readable and aesthetically pleasing, even when the writing direction changes.

To apply vertical writing modes, you can use the writing-mode property in CSS. For example, setting writing-mode: vertical-rl; changes the text orientation to vertical, reading from right to left. In this context, the line-height property will control the horizontal spacing between the lines of text.

Example

<div class="haiku">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>


<div class="haiku wide">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>
.haiku {
  border: 1px solid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: wheat;
  writing-mode: vertical-rl;
}


.wide {
  line-height: 2;
}

Syntax and Values of line-height

The CSS line-height property can be specified using various values, each serving different purposes and providing flexibility in web design.

Syntax

line-height: normal | <number> | <length> | <percentage> | initial | inherit;

Values

  1. normal
    • Description: Represents the default line height of the element, which is typically around 1.2 times the font size, depending on the element’s font-family.
    • Example: 
      line-height: normal;
  2. <number> (unitless)
    • Description: A unitless number multiplied by the element’s font size to determine the line height. This is often the preferred way to set line-height as it avoids unexpected results due to inheritance.
    • Example: 
      line-height: 1.5;
  3. <length>
    • Description: Specifies a fixed line height using a length unit, such as px, em, rem, etc. This can sometimes produce unexpected results, especially when the font size changes.
    • Example: 
      line-height: 20px;
  4. <percentage>
    • Description: Sets the line height as a percentage of the element’s font size. The computed value is the percentage multiplied by the element’s computed font size.
    • Example: 
      line-height: 150%;
  5. initial
    • Description: Sets the line-height property to its default value.
    • Example: 
      line-height: initial;
  6. inherit
    • Description: Inherits the line-height value from the parent element.
    • Example: 
      line-height: inherit;

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS line-height Property</title>
    <style>
        .normal {
            line-height: normal;
            background: lightblue;
            padding: 10px;
        }
        .unitless {
            line-height: 1.5;
            background: lightcoral;
            padding: 10px;
        }
        .length {
            line-height: 20px;
            background: lightgreen;
            padding: 10px;
        }
        .percentage {
            line-height: 150%;
            background: lightgoldenrodyellow;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>CSS line-height Property</h1>


    <div class="normal">
        This div has line-height: normal;
    </div>


    <div class="unitless">
        This div has line-height: 1.5;
    </div>


    <div class="length">
        This div has line-height: 20px;
    </div>


    <div class="percentage">
        This div has line-height: 150%;
    </div>
</body>
</html>

Using Unitless Numbers for line-height

Using unitless numbers for the CSS line-height property is often the preferred method among web developers and designers. This approach involves specifying a number without any units, which is then multiplied by the element’s font size to determine the line height. This method offers several benefits, making it a popular choice for setting line heights.

Advantages of Using Unitless Numbers

  1. Scalability:
    • Unitless numbers ensure that the line height scales proportionally with the font size. This means that if the font size changes, the line height will automatically adjust to maintain consistent spacing.
  2. Consistency:
    • This method avoids inheritance issues that can arise with length or percentage values. For example, if a parent element has a different font size, using a unitless number ensures that the line height remains consistent across child elements.
  3. Simplicity:
    • Specifying a unitless number is straightforward and easy to understand. It simplifies the CSS code and makes it more maintainable.

Syntax

line-height: <number>;

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS line-height Property</title>
    <style>
        .unitless {
            line-height: 1.5;
            background: lightcoral;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>CSS line-height Property</h1>


    <div class="unitless">
        This div has line-height: 1.5;<br>
        The line height is 1.5 times the font size.
    </div>
</body>
</html>

Best Practices

  • Minimum Value for Accessibility:
    • For main paragraph content, it is recommended to use a minimum value of 1.5 for the line-height property. This helps people experiencing low vision conditions, as well as those with cognitive concerns like dyslexia.
  • Avoiding Inheritance Issues:
    • Using unitless numbers helps avoid unexpected results due to inheritance. This ensures that the line height remains consistent even when the font size changes in different contexts.

Length Values for line-height

Using length values for the CSS line-height property is another method to control the spacing between lines of text. Length values specify a fixed line height using units such as pixels (px), ems (em), or rems (rem). This approach can be useful in certain scenarios, but it also comes with some considerations.

Syntax

line-height: <length>;

Common Units

  1. Pixels (px):
    • Specifies the line height in pixels.
    • Example: 
      line-height: 20px;
  2. Ems (em):
    • Specifies the line height relative to the font size of the element.
    • Example: 
      line-height: 1.5em;
  3. Rems (rem):
    • Specifies the line height relative to the font size of the root element (usually the html element).
    • Example: 
      line-height: 1.5rem;

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS line-height Property</title>
    <style>
        .pixels {
            line-height: 20px;
            background: lightblue;
            padding: 10px;
            font-size: 16px;
        }
        .ems {
            line-height: 1.5em;
            background: lightcoral;
            padding: 10px;
            font-size: 16px;
        }
        .rems {
            line-height: 1.5rem;
            background: lightgreen;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>CSS line-height Property</h1>


    <div class="pixels">
        This div has line-height: 20px;<br>
        The line height is fixed at 20 pixels.
    </div>


    <div class="ems">
        This div has line-height: 1.5em;<br>
        The line height is 1.5 times the font size of the element.
    </div>


    <div class="rems">
        This div has line-height: 1.5rem;<br>
        The line height is 1.5 times the font size of the root element.
    </div>
</body>
</html>

Considerations

  • Fixed Line Height:
    • Using pixels (px) sets a fixed line height, which can be useful for specific designs but may not scale well with different font sizes.
  • Relative to Font Size:
    • Using ems (em) or rems (rem) allows the line height to scale with the font size, providing more flexibility and ensuring better readability across different devices and screen sizes.

Examples of line-height Usage

Understanding how to use the CSS line-height property is crucial for creating readable and visually appealing web content. Here are some practical examples to help you get started.

Basic Example

This example shows how to set the line-height property using different values: a unitless number, a length, and a percentage. All three methods achieve the same resultant line height.

<!DOCTYPE html>
<html>
<head>
    <title>Basic line-height Example</title>
    <style>
        .unitless {
            line-height: 1.5;
            background: lightblue;
            padding: 10px;
            font-size: 16px;
        }
        .length {
            line-height: 24px;
            background: lightcoral;
            padding: 10px;
            font-size: 16px;
        }
        .percentage {
            line-height: 150%;
            background: lightgoldenrodyellow;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Basic line-height Example</h1>


    <div class="unitless">
        This div has line-height: 1.5;<br>
        The line height is 1.5 times the font size.
    </div>


    <div class="length">
        This div has line-height: 24px;<br>
        The line height is set to 24 pixels.
    </div>


    <div class="percentage">
        This div has line-height: 150%;<br>
        The line height is 150% of the font size.
    </div>
</body>
</html>

Example with Accessibility Considerations

For improved readability, especially for users with visual impairments or cognitive concerns, it’s recommended to use a minimum line-height of 1.5 for main paragraph content.

<!DOCTYPE html>
<html>
<head>
    <title>Accessible line-height Example</title>
    <style>
        .accessible {
            line-height: 1.5;
            background: lightblue;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Accessible line-height Example</h1>


    <div class="accessible">
        This div has line-height: 1.5;<br>
        The line height is 1.5 times the font size, ensuring enhanced readability.
    </div>
</body>
</html>

Example with Percentage Values

Percentage values for line-height can be useful for maintaining consistent spacing as the font size changes.

<!DOCTYPE html>
<html>
<head>
    <title>Percentage line-height Example</title>
    <style>
        .percentage {
            line-height: 150%;
            background: lightgoldenrodyellow;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Percentage line-height Example</h1>


    <div class="percentage">
        This div has line-height: 150%;<br>
        The line height is 150% of the font size.
    </div>
</body>
</html>

Example with Inheritance

The line-height property is inherited from the parent element. This example demonstrates how inheritance works.

<!DOCTYPE html>
<html>
<head>
    <title>Inheritance line-height Example</title>
    <style>
        .parent {
            line-height: 1.5;
            background: lightblue;
            padding: 10px;
            font-size: 16px;
        }
        .child {
            background: lightcoral;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Inheritance line-height Example</h1>


    <div class="parent">
        This is the parent div with line-height: 1.5;<br>
        <div class="child">
            This is the child div, inheriting the line-height from the parent.
        </div>
    </div>
</body>
</html>

Best Practices

  • Consistency:
    • Maintain consistent line-height values across your web pages for a uniform reading experience.
  • Accessibility:
    • Use a minimum line-height of 1.5 for main paragraph content to enhance readability.
  • Testing:
    • Always test your layout across different devices and screen sizes to ensure the line-height remains appropriate and readable.

Additional Resources and Related Properties

Learning more about the CSS line-height property and related properties can help you create well-structured, readable, and visually appealing web pages. Here are some helpful resources and related CSS properties to explore.

Additional Resources

  1. MDN Web Docs:

    • Mozilla Developer Network (MDN) offers detailed documentation on the line-height property, including examples and browser compatibility info.
    • MDN Web Docs: line-height

  2. W3C Understanding WCAG 2.1:

    • The Web Content Accessibility Guidelines (WCAG) provide recommendations for making web content accessible, including guidelines on visual presentation like line-height.
    • W3C Understanding WCAG 2.1

  3. CSS Tricks:

    • CSS Tricks has articles, tutorials, and tips on using CSS properties effectively, including the line-height property.
    • CSS Tricks: line-height

Related Properties

  1. font:

    • The font shorthand property lets you set multiple font-related properties in one declaration, including line-height.
    p {
        font: 16px/1.5 Arial, sans-serif;
    }

  2. font-size:

    • The font-size property sets the font size and is often used with line-height to control text spacing.
    h1 {
        font-size: 2em;
        line-height: 1.2;
    }

  3. letter-spacing:

    • The letter-spacing property adjusts the space between characters and can be used with line-height for better text appearance.
    p {
        line-height: 1.5;
        letter-spacing: 0.5px;
    }

  4. word-spacing:

    • The word-spacing property adjusts the space between words and can be combined with line-height for a balanced layout.
    p {
        line-height: 1.5;
        word-spacing: 2px;
    }

Example of Related Properties

<!DOCTYPE html>
<html>
<head>
    <title>CSS line-height Property</title>
    <style>
        .example {
            font: 16px/1.5 Arial, sans-serif;
            letter-spacing: 0.5px;
            word-spacing: 2px;
            background: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>CSS line-height Property</h1>


    <div class="example">
        This div uses the font shorthand with line-height: 1.5, letter-spacing: 0.5px, and word-spacing: 2px;
    </div>
</body>
</html>

In this example, the example class uses the font shorthand to set the font size and line height, along with letter-spacing and word-spacing to adjust character and word spacing. This creates a well-structured and visually appealing layout.

By exploring these resources and related properties, you can better understand how to effectively use the line-height property along with other CSS properties to create readable and visually appealing web pages.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
CSS property CSS animation
css_property_cover/css-property-color.png CSS Color Enhancing Web Design with Colorful Text Learn about CSS color property, its use cases, and available options such as named colors, hexadecimal, RGB, and HSL values. Simplify and enhance your web design. css_property_cover/css-property-font-weight.png CSS Font-Weight Enhancing Text Emphasis Discover how the CSS font-weight property enhances text emphasis. Learn about available options like 'normal', 'bold', and numeric values for precise control. Optimize your web typography with this essential property. css_property_cover/css-property-text-decoration-color.png CSS text-decoration-color Customizing Text Decorations Learn how to use CSS text-decoration-color to customize the color of text decorations like underlines, overlines, and strikethroughs. Explore available options and enhance your web design. css_property_cover/css-property-background-color.png CSS Background-Color Enhance Your Web Design Learn how to use CSS background-color to enhance your web design. Discover available options like named colors, hexadecimal values, RGB, RGBA, HSL, HSLA, and more. css_property_cover/css-property-font.png CSS Font Comprehensive Guide & Examples Learn how to use the CSS font property to style text effectively. Explore available options, syntax, and browser compatibility. Enhance your web design skills with practical examples. css_property_cover/css-property-font-kerning.png CSS Font-Kerning Enhancing Text Readability CSS font-kerning improves text readability and visual appeal by adjusting character spacing. Available options include auto, normal, and none for better typography.
View all 337 CSS blogs
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
down Explore our best articles, cover a wide variety of technologies
Our knowledge base
209 Articles
Explore right
icons/logo-react.svg ReactJs
Popular JavaScript library for building user interfaces with a component-based architecture.
169 Articles
Explore right
icons/flutter.svg Flutter
UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
150 Articles
Explore right
icons/logo-nodejs.svg Nodejs
JavaScript runtime for building scalable, high-performance server-side applications.
60 Articles
Explore right
icons/next-js.svg Nextjs
React framework enabling server-side rendering and static site generation for optimized performance.
40 Articles
Explore right
icons/code-outline.svg Typescript
Superset of JavaScript adding static types for improved code quality and maintainability.
39 Articles
Explore right
icons/tailwind.svg TailwindCSS
Utility-first CSS framework for rapid UI development.
130 Articles
Explore right
icons/code-outline.svg Golang
Programming language known for its simplicity, concurrency model, and performance.
70 Articles
Explore right
icons/code-outline.svg AstroJs
Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.
40 Articles
Explore right
icons/code-outline.svg Jest
Versatile testing framework for JavaScript applications supporting various test types.
337 Articles
Explore right
icons/css-4.svg CSS
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
DesignRush web design companies DesignRush
web design companies Goodfirms Goodfirms
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.