css - 本文に font-family が定義されている場合、ベースラインは高くなります

Question

今日、IonIcons を使用したときに奇妙な動作を発見しました。

本文に font-family プロパティがある場合、ベースライン (私は正しいですか? ベースラインですか?!) は大きくなります。

JSFiddle: http://jsfiddle.net/5awcxhnv/

本文から font-family プロパティを削除すると、サイズは完璧です。この行動の理由を知っていますか？

body {
    font-family: Arial;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
    line-height:80px;
    background:yellow;
    overflow:hidden;
    font-size:2em;
}

li {
    display:inline-block;
    float:left;
    padding:0 20px;
}

a {
    display:inline-block;
}

.box {
    width:1em;
    height:1em;
    background:red;
    display:inline-block;
    vertical-align:middle;
}

i {
    background:red;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<ul>
    <li><a href=""><i class="ion-close"></i></a></li>
    <li><a href=""><span class="box"></span></a></li>
</ul>

更新: http://psd-labs.com/demo/ - 青いボックスの中心を垂直に揃えたいと思います。を使っvertical-align:center;ていたのですが、本文のフォントのせいで動きません。フォントを削除すると、整列は完璧です。