In this article we are going to take a look at how we can remove this space from the text elements using a simple SCSS mixin.

This mixin was originally created for our library of web components and can be easily included in your web project as it has no external dependencies.

🔥📢 Check our updated article on the line-height crop! We’ve also shipped a tool to set the lhCrop visually and export the SCSS code.

The mixin

Here’s the mixin you can use to remove the top space from your text element:

Include it in the text element you want to modify, making sure to pass the line-height as mixin argument:

In the framework we built for the CodyHouse library of components, the line-height values are expressed as CSS variable; this means we can use those CSS variables to call the lhCrop mixin:

One of the advantages of doing so is that the crop value will be automatically updated if you decide to change the value of your CSS variables (with no need to modify the mixin call) or if the line-height variable is modified at different media queries (with no need to re-use the mixin).

The mixin explained

When using the lhCrop mixin, a ::before pseudo-element is created with a negative margin which cuts the space above your text element.

The idea of using a pseudo element with a negative margin was first introduced by Kevin Powell. He also created the Text Crop Tool that allows you to create your custom mixin according to the font family you are using in your project.

For our mixin, here’s how we got the value for the margin-top:

1) The total height of the text element (capital letter height + top space + bottom space) is equal to the line-height multiplied by the font-size (if you are using a pure number for your line-height);

2) We assume the height of the capital letter is equal to the font-size (this is an approximation, more about that in the Disclaimer section);