The HEIGHT property in CSS controls how much space is left between two lines of text, and is usually set to a unitless value (such as line-height:1.4), indicating its ratio to the font size property. Line-height is a very important property in typography. Too low and the lines of text will awkwardly overlap, too high and they will awkwardly separate, both of which are bad for reading. But you probably already knew that.

In this article we’ll highlight some techniques you can use to make things more interesting if you know (or can figure out) the exact value of line-height.

Specify a different color for each line of text

Unfortunately, we don’t have a :: nTH-line selector. We can’t count on it either, and there are countless reasons why the text might be broken somewhere.

One way, though not standard, is to use the background of the element as the background of the text.

.text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}Copy the code

As another trick, you can use Linear-gradient () with a color point to control the colors not to gradient with each other, causing one color to end and then suddenly start another color. Assuming that the value of line-height is 22px, we can break the gradient every 22px.

.text { background-image: linear-gradient( to bottom, #9588DD, #9588DD 22px, #DD88C8 22px, #DD88C8 44px, #D3DD88 44px, #D3DD88 66px, #88B0DD 66px, #88B0DD) }

Review images

When the two techniques are combined:

Review images

If your browser doesn’t support background-clip text, like Firefox, you’ll see bars of color behind the text. You might think it looks cool and even like it, but you might prefer to go back to the old way of setting text colors. If the latter, you can use @support to say: CSS only works if the browser supports it.

Also, since you’re using line-height over and over again, it might be a good idea to make it a variable. I’m using SCSS here, but it would be nice to use real CSS variables one day, so that you can continue to modify the page after rendering and watch it take effect.

Lh: 1.4 em. body { font-size: 1em; line-height: $lh; } @supports (-webkit-background-clip: text) { p { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( to bottom, #9588DD, #9588DD $lh, #DD88C8 $lh, #DD88C8 $lh*2, #D3DD88 $lh*2, #D3DD88 $lh*3, #88B0DD $lh*3, #88B0DD); }}Copy the code

The easiest way to do this is to apply these attributes to the uppermost element. Here is an example, the first few lines of which are the focus.

.text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: Linear-gradient (to bottom, rgba(white, 0.8), rgba(white, 0.8) $LH, rgba(white, 0.6) $LH, rgba(white, 0.6) $LH *2, Rgba (white, 0.4) $LH *2, rgba(white, 0.4) $LH *3, rgba(white, 0.2) $LH *3, rgba(white, 0.2) $LH *3, rgba(white, 0.2); }Copy the code
Review images

If we were to manipulate to the last row, this would be harder. In this case, we need the ribbon to start from the beginning all the way down to the last few lines, and fortunately we can use calc() to do that.

.text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: Linear-gradient (to bottom, Rgba (White, 0.8), Rgba (white, 0.8) calc(100%-66px), Rgba (white, 0.6) calc(100%-66px), Rgba (white, 0.6) calc(100%-44px), Rgba (white, 0.4) calc(100%-44px), Rgba (white, 0.4) calc(100%-22px), Rgba (white, 0.4) calc(100%-22px), 0.2) CALC (100%-22px), RGBA (White, 0.2)); background-position: bottom center; }Copy the code
Review images

There are other ways to do this, such as stacking a layer of pseudo-element gradients and setting pointer-events: None to avoid interference.

Lines between words

We showed you how to control the gradient color point above. Using a similar method, we can create a gradient in 1px units and repeat it until we reach line-height. The easiest way is to use

Repeating-linear-gradient is used, while keeping other elements in place (e.g. padding is also based on line-height).

.parent { padding: $lh*2; background: #082838; background-image: Repeating-linear-gradient (to bottom, rgba(White, 0) 0, rgba(white, 0) $lh/1em*16px-1, rgba(White, 0.1) $LH /1em*16px-1, repeat-Linear-gradient (to bottom, Rgba (white, 0) $LH /1em*16px-1, Rgba (white, 0.1) $lh / 1 em * 16 px); }Copy the code

To create a 1px line, we need to know the value of line-height in pixels, and then subtract 1. Subtract 1 so that the gradient repeats exactly with known line-height, leaving the last 1px as a line. Since we made the body font size 1em (16px), the unit of line-height is set to em. You can remove the unit by removing 1em, multiplying by 16px and subtracted by 1 to get the value we need.

Review images

Position images one-per-line

The other thing you can do with line-height is to match bakcground-size, at least vertically. You can then repeat the background vertically, resulting in one image in a row.

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}Copy the code

See the Pen <a href=”http://codepen.io/chriscoyier/pen/YPZLGj/”>One line of Text Dif Color</a> by Chris Coyier (<a href=”http://codepen.io/chriscoyier”>@chriscoyier</a>) on <a href=”http://codepen.io”>CodePen</a>.