Baseline is taller when font-family defined on body

Today I found a strange behavior when I used IonIcons.

When the body has font-family property the baseline (Am I right? Is it the baseline?!) is bigger.

JSFiddle: http://ift.tt/1G498Ig

If you remove the font-family property from the body the size is perfect. Do you know guys the reason of this behavior?

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://ift.tt/1G498Ii" rel="stylesheet"/>
<ul>
    <li><a href=""><i class="ion-close"></i></a></li>
    <li><a href=""><span class="box"></span></a></li>
</ul>

UPDATE: http://ift.tt/1FTY6FA - I would like to align the blue box center, vertically. I used vertical-align:center;, but it doesn't work because of the font on the body. When I remove font the align is perfect.