Question

I am using a custom font (Oswald) for the headings or titles within my page. I believe that its’ height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly…? If more text is placed in later on, the gap difference becomes substantial.

Please take a look at what I have here: http://jsfiddle.net/x6v7F/

I have a temporary background fade in and out to illustrate.

thank you.

Answer 1

It doesn’t seem to be a font-size issue, the issue seemed to be with you specifying the line-height

If you see this fiddle, you can see I’ve changed h1 and h2 to have these line-heights

h1 {
    font: 16px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#000000;
    margin:14px 0;
    line-height: 100%; <----
}

h2 {
    font: 12px 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color:#BBBBBB;
    margin-bottom: 14px;
    line-height: 100%; <----
    letter-spacing: .2px;    
}

If you check that Fiddle, it seems to have fixed your problem?