Почему текст не находится вертикально по центру?

Question

.menu{
    display: flex;
    align-items: center;
}

.square{
    width: 100px;
    height: 100px;
    background: tomato;
}

h4{
    font-family: 'Mohave', sans-serif;  
    font-size: 72px;
    font-style: italic;
    margin: 0;

    background-color: thistle;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mohave:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <title>Site</title>
</head>

<boby>
    <a class="menu">
        <div class="square"></div>
        <h4>КВАДРАТ</h4>
    </a>
</boby>

</html>

Почему текст немного выше центра? Если убрать подключенный текст, то текст станет по центру. На другом сайте все окей.

Answer 1

Это шрифт такой. Его line-height во всю высоту блока, попробуй сделать меньше единицы его. У всех шрифтов по умолчанию своё центрирование по line-height. Поэтому у тебя какие-то нормально отображаются, а какие-то вот так.

БЛОГ НА HUSL

Почему текст не находится вертикально по центру?

Ответы (1 шт):