gistfile1.html

<article class="blogpost">
    <header>
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </header>
    <p> ... body paras ... </p>
    <section class="comment">
        <article>
            <header>
                <h1>Commenter Name</h1>
            </header>
            <p> ... comment body ... </p>
            <footer>
                <h1>metadata</h1>
            </footer>
        </article>
        <article> ... another comment ... </article>
    </section>
</article>

gistfile2.css

@size1: 72px;
@size2: 64px;
@size3: 48px;
@size4: 36px;
@size5: 28px;
@size6: 22px;
@size7: 18px;
@size8: 16px;

article.blogpost > header > h1 {
    font-size: @size1;
    /* Starting at size1 for clarity, obviously in a real blog you'd be
     * using size1 for things further up the chain, like your blog's title, or
     * maybe to indicate section-of-site (blog vs portfolio), etc. */
}

article.blogpost > header > h2 {
    font-size: @size2;
}


.comment > header > h1 {
    font-size: @size3
}

.comment > footer > h1 {
    font-size: @size6 /* or whatever. */
}