I received a message earlier from a layout designer regarding the line heights in their designs no longer functioning the way they were originally intended. I looked into the issue and I found that it stems from the site recently switching from XHTML to HTML 5. I've discussed my findings with the layout designer and I'm going to re-post my response below for the rest of you that may also be having similar issues.

I figured out your line-height issue but you're not going to like the solution depending on how you do your layouts.

 

I'm not sure as to your level of HTML and CSS knowledge but I'll make some assumptions. I recently changed the HTML Doctype of the website from XHTML 1.0 to HTML 5 for the reason that HTML 5 has new features that the site can take advantage of. It shouldn't have broken any design aspects on the site as long as the design was coded properly.

 

Looking at your code, it seems that your line-height attribute is located in a span tag which is an inline element when it should be in a block element like a div or a p tag. In HTML 5 and strict HTML 4 Doctypes, the line-height will inherit the line-height attribute of the closest block level element. The way to resolve your line-height issues is to simply turn your span tags into div tags wherever a line-height attribute is defined. This is the correct way of defining HTML tags whereas HTML Doctypes prior to the new HTML 5 standard was much less strict.

 

You can also reference this thread for this issue: http://stackoverflow.com/questions/5014617/why-does-html5-ignore-line-height-smaller-than-font-size

 

As for the reason for sticking with HTML 5, it is so that we can use more powerful browser features especially in the area of mobile web design. There are certain things that are simply only available in HTML 5 like websockets which we can use for dynamic alerts without needing to refresh the page, for example, or sending an alert out to a mobile device whenever they receive a message.

 

Hope that helps a little.