Почему буквы разного размера?

Question

[Skrolea]

Чего я туплю сейчас. Делаю так

<div class="header__brand">
        <h3>Site.<span>com</span></h3>
</div>

В стилях так

body {    
    font-size: 100%; 
    font-weight: 400;   
}
h3 {
    color: #ff4081;
}
.header__brand h3 span{
    color: #000;
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {    
    .header__brand h3 {
        font-size: 1.7em;
    }
    .header__brand h3 span {
        font-size: 1.7em;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .header__brand h3 {
        font-size: 1.7em;
    }
    .header__brand h3 span{
        font-size: 1.7em;
    }
}

и текст до span и после - разного размера. Чего я не то написал то? Извините за вопрос такой.
Пример на jsFiddle

Или span берет от родительского элемента как то размер шрифта?

Answer 1

[gleendo]

span - 1.7em от h3
h3 - 1.7em от .header__brand

Уберите размер для span, либо укажите 1em

Comments

[Skrolea]

Да, конечно. Спасибо. Извините

Answer 2

[IceJOKER]

Там же одинаковый размер О_О можете убрать span, все будет также
эффект может от красного цвета?

Comments

[Skrolea]

Не, ну я уберу, конечно, но просто почему? размер шрифта span взялся от родительского h3 и умножился что ли?

[IceJOKER]

Skrolea: ну да, вы же не переопределили для span свой размер, вот он и унаследовал. p.s. юзайте инструменты разработчика, там есть ответы на ваши вопросы