Cropping Away Negative Impacts of Line Height

Getting rid of pesky space above and below HTML text

Kevin Powell
Mar 22, 2018 · 5 min read

How it works

Preserve internal line height but crop top and bottom white space

Finding the formula

// Top crop:$top-crop + ($desired-line-height - $line-height-with-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop;// Bottom crop:$bottom-crop + ($desired-line-height - $line-height-with-crop) * ($font-size-with-crop / 2)), 0) / $font-size-with-crop;

Making it work for any font

Cropping Caveats

Vertically centering icons and text in a button and providing consistent internal padding.
Vertically aligning media and accompanying text in a Media Object component.

Three tips for text cropping

* {
@include text-crop;
}

Better solutions?

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Kevin Powell

Written by

Husband & Father, Builder of Design Systems @eightshapes.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes