It's a good start, but the solution is based on the default behavior of HTML/CSS, that is to position text in the middle of the leading. Text should <i>sit</i> on the baseline. There's a sass library that solves this problem nicely: <a href="https://github.com/designbyjake/sassline" rel="nofollow">https://github.com/designbyjake/sassline</a><p>Works even better with Tim Brown's modular scale library: <a href="http://www.modularscale.com/" rel="nofollow">http://www.modularscale.com/</a>
What is the purpose of the specimen sheet? Is that the same thing as a demo? It looks like a huge typographical mess to me <a href="http://devinhunt.github.io/typebase.css/demo/specimen.html" rel="nofollow">http://devinhunt.github.io/typebase.css/demo/specimen.html</a>, but maybe it has another technical purpose?
I realize H5 and H6 aren't used that much, but the sizes for these elements are absurdly small for me. I cannot even read them. Perhaps consider a minimum font size as the size of paragraph text and stop going with smaller text and consider some other way of styling (e.g. replace bold with italics or regular weight).
That demo is a really bad representation of whatever this is:<p><a href="http://i.imgur.com/6tUIx5U.png" rel="nofollow">http://i.imgur.com/6tUIx5U.png</a> (Chrome, Windows)<p>Those gridlines make a mess of the page and those headings at h5 and h6 look horrible.<p>It's even worse in a test env (PhantomJS, Linux):<p><a href="http://i.imgur.com/7n3nOKz.png" rel="nofollow">http://i.imgur.com/7n3nOKz.png</a>
If you want to truly customize the way you use preprocessors for typography in your web projects, here's another approach: <a href="https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm" rel="nofollow">https://scotch.io/tutorials/aesthetic-sass-3-typography-and-...</a>
Interesting that the demo page is using one of those super thin fonts my eyes have trouble focusing on and reading.<p><a href="http://devinhunt.github.io/typebase.css/" rel="nofollow">http://devinhunt.github.io/typebase.css/</a><p>PS: I'm on a retina MBP in 1680 mode so your results (and eyes) will vary
Cool, typography on the web can always be improved. Another cool one to check out is <a href="https://github.com/corysimmons/typographic" rel="nofollow">https://github.com/corysimmons/typographic</a>.
Here's another typography generation tool I wrote. Highly configurable. <a href="http://kyleamathews.github.io/typography.js/#/" rel="nofollow">http://kyleamathews.github.io/typography.js/#/</a><p>You can see a number of pre-built configurations in this issue <a href="https://github.com/KyleAMathews/typography.js/issues/10" rel="nofollow">https://github.com/KyleAMathews/typography.js/issues/10</a>
I've been using this as the basis for my typographic styles for maybe a year now. My only problem with it has been the spacing between paragraphs and headings. I find myself using the .hug class a lot.