(mixin, font) line-heightを指定したときのフォントの上下の余白を無くしたい。

やりたいこと

line-heightを指定したテキストの行の高さから上下の余白を無くしてフォントサイズぴったりにさせたい。

ハマったところ
http://text-crop.eightshapes.com/ というサイトでmixinを使って上下の余白を0にするやり方をやってみたのですが、うまくできません。何かいい方法がありましたら教えてください。

<div>
<p class="u-text jp">日本語の文章が入ります。サイズは20px, 行送りは40pxです。line-heightは2です</p>

<p class="u-text en">英語の文章が入ります。サイズは22px, 行送りは40pxですline-heightは1.8です。</p>
</div>

.u-text{
            margin-top: 96px;
            text-align: center;
            white-space: pre-line;

            @include mq(md){
                width: 100%;
            }

        }

        .jp{
            line-height: 2;
            font-size: 20px;
            @include text-cropJ;

        }
        .en{
            line-height: 1.8;
            font-size: 22px;
            @include text-cropE;
        }

mixinは以下のようになりました。

@mixin text-cropE($line-height: 2, $top-adjustment: 0px, $bottom-adjustment: 0px) {
    // Configured in Step 1
    $top-crop: 11;
    $bottom-crop: 12;
    $crop-font-size: 22;
    $crop-line-height: 1.8;

    // 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 text-cropJ($line-height: 1.8, $top-adjustment: 0px, $bottom-adjustment: 0px) {
    // Configured in Step 1
    $top-crop: 10;
    $bottom-crop: 12;
    $crop-font-size: 20;
    $crop-line-height: 2;

    // 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 / 1)), 0) / $crop-font-size;
    $dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 1)), 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});
    }
}

ご回答宜しくお願い致します。