I'm trying to create a baseline for a font that I'm using. The typeface is Sabio.The specific style below is Sabio Perpendicular.I've tried to create a baseline with this font and as you can see below I've been somewhat successful.The image below shows the font I'm using with 'baselines' shown every 12 pixels.My question is, why is it that the the second set of heading, the ones that say ( in article ), start going off the baseline? I tried taking them OUT of the article tag and still got the same thing.I can't really figure out what's going on but I thought that this would work.I'm using less for some mixins that help me with converting from pixels to rems.Here is the less code I'm using\[code\]html{ font-size : 10px;}h1{ .font-size( 3.2 ); /* 3.2rem or 32px */ .line-height( 4.8 ); /* 4.8rem or 48px */ .margin-top( 1.2 ); /* etc etc etc */}h2{ .font-size( 2.4 ); .line-height( 3.6 ); .margin-top( 0.9 );}h3{ .font-size( 1.9 ); .line-height( 2.4 ); .margin-top( 1.9 );}h4{ .font-size( 1.6 ); .line-height( 2.4 ); .margin-top( 1.3 );}h5{ .font-size( 1.4 ); .line-height( 2.4 ); .margin-top( 1.3 );}h6{ .font-size( 1.1 ); .line-height( 2.4 ); .margin-top( 1.3 );}\[/code\]
