HTML & CSS: manipulating font/text height? - html

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?

Answer 2

Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>