Почему эти два стиля отличаются друг от друга, если у них одинаковые свойства css?

Question

Живая демонстрация here.

Проблема заключается в следующем, то h3 и title-azul mas-grande:

h3{ 
    color:#109de9; 
    font-size:28px; 
    margin-bottom:15px; 
    margin-top:15px; 
} 

и

.title-azul{ 
    color:#109de9; 
    font-size:20px; 
    margin-bottom:6px; 
} 

.mas-grande{ 
    font-size:28px; 
    margin-bottom:15px; 
    margin-top:15px; 
} 

Насколько я знаю, она должна быть оказаны то же самое, но title-azul mas-grande визуализируется меньше:

Когда я проверить элементы в хроме, вычисленный стиль точно так же, за исключением того, что font-weight: normal; не появляется в классе title-azul mas-grande:

-webkit-border-image: none; 
border-bottom-color: rgb(16, 157, 233); 
border-bottom-style: none; 
border-bottom-width: 0px; 
border-left-color: rgb(16, 157, 233); 
border-left-style: none; 
border-left-width: 0px; 
border-right-color: rgb(16, 157, 233); 
border-right-style: none; 
border-right-width: 0px; 
border-top-color: rgb(16, 157, 233); 
border-top-style: none; 
border-top-width: 0px; 
color: rgb(16, 157, 233); 
display: block; 
font-family: omnes; 
font-size: 28px; 
font-weight: normal; #This does not appear when I inspect the div with the class title-azul mas-grande 
height: 28px; 
line-height: 28px; 
margin-bottom: 15px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 15px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
vertical-align: baseline; 
width: 750px; 

Это странно, так как желаемый вес шрифта на самом деле normal, но это единственное заметное различие, которое я мог найти.

Можете ли вы определить, где проблема?

Answer 1

Я думаю, что это просто оптический эффект. Я изменил текст заголовков, и они отображаются одинаково. (efecto óptico;)