line-height-step
Definition
The line-height-step CSS property specifies the size of the step between each consecutive line in a block of text. It allows authors to control the vertical rhythm of their typography by defining a consistent vertical distance between lines.
Examples
Sets the line height step to 1.5:
line-height-step: 1.5;
Sets the line height step to 2:
line-height-step: 2;
Sets the line height step to 1.25:
line-height-step: 1.25;
Values
| Value | Description |
|---|---|
normal | The default value, which uses the default line-height of the font. |
<number> | Specifies the size of the step between each line, as a multiple of the font size. A value of 1 means that each line is exactly the same height as the font size, while a value of 2 means that each line is twice the height of the font size. |
<length> | Specifies the size of the step between each line, as an absolute length value. This can be useful for achieving precise control over vertical rhythm, but is less flexible than using a multiple of the font size. |
Best Practices
- Use the line-height-step property to ensure consistent vertical spacing between lines in a block of text.
- Consider using a value that is a multiple of the font size to maintain a consistent vertical rhythm throughout your typography.
- Be aware that overly tight or loose line spacing can make text difficult to read, so use the line-height-step property with care.
- Test your typography on different devices and screen sizes to ensure that the vertical spacing remains consistent and legible.
- Consider using other typographic techniques, such as font size, font weight, and letter-spacing, to achieve the desired visual effect in your typography.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |