eightshapes-mark eightshapes Design Systems

Text Crop

Want to rid your components of that pesky space above and below a block of text due to line height? Use our tool to create a mixin for your typography.

Step 1

Configure the Crop

Font Family: |

Align Top Crop with Cap Height of top row and Bottom Crop to Baseline of bottom row.

bars
ABCDEFGHIJKLMNOPQRSTUVWXYZ “ ” $ & 1234567890 abcdefghijklmnopqrstuvwxyz. Type your own sample text
bars

Step 2

Confirm the Result

Example Without Text Crop With Text Crop
Button
Button with Icon
Flexbox Top aligned Text with Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt incidunt veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt incidunt veniam.

Small Padded Box
16px size in 20px inset
16px size in 20px inset
Large Padded Box
64px size in 20px inset
64px size in 20px inset

Step 3

Copy the Code

Copied to clipboard
@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) {
    // Configured in Step 1
    $top-crop: TOPCROP;
    $bottom-crop: BOTTOMCROP;
    $crop-font-size: FONTSIZE;
    $crop-line-height: LINEHEIGHT;

    // Apply values to calculate em-based margins that work with any font size
    $dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
    $dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;

    // Mixin output
    line-height: $line-height;

    &::before,
    &::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
    }

    &::before {
        margin-bottom: calc(-#{$dynamic-top-crop}em + #{$top-adjustment});
    }

    &::after {
        margin-top: calc(-#{$dynamic-bottom-crop}em + #{$bottom-adjustment});
    }
}
// Mixin generated at: http://text-crop.eightshapes.com/?SERIALIZEDFORM

/* Usage Examples
    .my-level-1-heading-class {
        @include text-crop; // Will use default line height of 1.3
        font-size: 48px;
        margin: 0 0 0 16px;
    }

    .my-level-2-heading-class {
        @include text-crop; // Will use default line height of 1.3
        font-size: 32px; // Don't need to change any settings, will work with any font size automatically
        margin: 0 0 0 16px;
    }

    .my-body-copy-class {
        @include text-crop($line-height: 2); // Larger line height desired, set the line height via the mixin
        font-size: 16px;
    }

    // Sometimes depending on the font-size, the rendering, the browser, etc. you may need to tweak the output. 
    // You can adjust the top and bottom cropping when invoking the component using the $top-adjustment and $bottom-adjustment settings 
    
    .slight-adjustment-needed {
        @include text-crop($top-adjustment: -0.5px, $bottom-adjustment: 2px);
        font-size: 17px;
    }

    .dont-do-this {
        @include text-crop;
        font-size: 16px;
        line-height: 3; // DO NOT set line height outside of the mixin, the mixin needs the line height value to calculate the crop correctly
    }
*/
Copied to clipboard
.text-crop(@line-height: 1.3, @top-adjustment: 0px, @bottom-adjustment: 0px) {
    // Configured in Step 1
    @top-crop: TOPCROP;
    @bottom-crop: BOTTOMCROP;
    @crop-font-size: FONTSIZE;
    @crop-line-height: LINEHEIGHT;

    // Apply values to calculate em-based margins that work with any font size
    @dynamic-top-crop: max((@top-crop + (@line-height - @crop-line-height) * (@crop-font-size / 2)), 0) / @crop-font-size;
    @dynamic-bottom-crop: max((@bottom-crop + (@line-height - @crop-line-height) * (@crop-font-size / 2)), 0) / @crop-font-size;

    // Mixin output
    line-height: @line-height;

    &::before,
    &::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
    }

    &::before {
        margin-bottom: calc(unit(-@dynamic-top-crop, em) ~"+" @top-adjustment);
    }

    &::after {
        margin-top: calc(unit(-@dynamic-bottom-crop, em) ~"+" @bottom-adjustment);
    }
}
// Mixin generated at: http://text-crop.eightshapes.com/?SERIALIZEDFORM

/* Usage Examples
    .my-level-1-heading-class {
        .text-crop; // Will use default line height of 1.3
        font-size: 48px;
        margin: 0 0 0 16px;
    }

    .my-level-2-heading-class {
        .text-crop; // Will use default line height of 1.3
        font-size: 32px; // Don't need to change any settings, will work with any font size automatically
        margin: 0 0 0 16px;
    }

    .my-body-copy-class {
        .text-crop(@line-height: 2); // Larger line height desired, set the line height via the mixin
        font-size: 16px;
    }

    // Sometimes depending on the font-size, the rendering, the browser, etc. you may need to tweak the output. 
    // You can adjust the top and bottom cropping when invoking the component using the $top-adjustment and $bottom-adjustment settings 
    
    .slight-adjustment-needed {
        .text-crop(@top-adjustment: -0.5px, @bottom-adjustment: 2px);
        font-size: 17px;
    }

    .dont-do-this {
        .text-crop;
        font-size: 16px;
        line-height: 3; // DO NOT set line height outside of the mixin, the mixin needs the line height value to calculate the crop correctly
    }
*/
Copied to clipboard
text-crop($line-height = 1.3, $top-adjustment = 0px, $bottom-adjustment = 0px) {
    // Configured in Step 1
    $top-crop = TOPCROP;
    $bottom-crop = BOTTOMCROP;
    $crop-font-size = FONTSIZE;
    $crop-line-height = LINEHEIGHT;

    // Apply values to calculate em-based margins that work with any font size
    $dynamic-top-crop = max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
    $dynamic-bottom-crop = max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;

    // Mixin output
    line-height: $line-height;

    &::before,
    &::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
    }

    &::before {
        margin-bottom: "calc(-%sem + %s)" % ($dynamic-top-crop $top-adjustment)
    }

    &::after {
        margin-top: "calc(-%sem + %s)" % ($dynamic-bottom-crop $bottom-adjustment)
    }
}
// Mixin generated at: http://text-crop.eightshapes.com/?SERIALIZEDFORM

/* Usage Examples
    .my-level-1-heading-class {
        text-crop(); // Will use default line height of 1.3
        font-size: 48px;
        margin: 0 0 0 16px;
    }

    .my-level-2-heading-class {
        text-crop(); // Will use default line height of 1.3
        font-size: 32px; // Don't need to change any settings, will work with any font size automatically
        margin: 0 0 0 16px;
    }

    .my-body-copy-class {
        text-crop(2); // Larger line height desired, set the line height via the mixin
        font-size: 16px;
    }

    // Sometimes depending on the font-size, the rendering, the browser, etc. you may need to tweak the output. 
    // You can adjust the top and bottom cropping when invoking the component using the $top-adjustment and $bottom-adjustment settings 
    
    .slight-adjustment-needed {
        text-crop(1.2, -0.5px, 2px);
        font-size: 17px;
    }

    .dont-do-this {
        text-crop();
        font-size: 16px;
        line-height: 3; // DO NOT set line height outside of the mixin, the mixin needs the line height value to calculate the crop correctly
    }
*/