Portable font sizing framework by Harry Roberts http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

typography.scss

/* Define your base font-size here; most elements will inherit this. */
html {
    font-size: 16px;      /* Assuming 16px... */
    line-height: 1.5;    /* 24px (This is now our magic number; all subsequent margin-bottoms and line-heights want to be a multiple of this number in order to maintain vertical rhythm.) */
}

/* Common margin-bottom for vertical rhythm. */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,
fieldset,
p,
table,
pre,
hr {
    margin-bottom:24px;
    margin-bottom:1.5rem;
}

/* These handle massive type, for less frequently occuring bits of text (e.g. in mastheads and banners). */
.giga {
    font-size:80px;
    font-size:5rem;     /* 80px */
    line-height:1.2;    /* 96px */
}
.mega {
    font-size:64px;
    font-size:4rem;     /* 64px */
    line-height:1.125;  /* 72px */
}
.kilo {
    font-size:48px;
    font-size:3rem;     /* 48px */
    line-height:1;      /* 48px */
}

/* Define headings and their associated classes here. */
h1,.alpha {
    font-size:32px;
    font-size:2rem;     /* 32px */
    line-height:1.5;    /* 48px */
}
h2,.beta {
    font-size:1.5em;    /* 24px */
    line-height:1;      /* 24px */
}
h3,.gamma {
    font-size:20px;
    font-size:1.25rem;  /* 20px */
    line-height:1.2;    /* 24px */
}
h4,.delta {
    font-size:18px;
    font-size:1.125rem; /* 18px */
    line-height:1.333;  /* 24px */
}
h5,.epsilon {
    font-size:16px;
    font-size:1rem;     /* 16px */
    line-height:1.5;    /* 24px */
}
h6,.zeta {
    font-size:16px;
    font-size:1rem;     /* 16px */
    line-height:1.5;    /* 24px */
}

/* Smaller-than-body-copy sizes here. */
small, .milli {
    font-size:12px;
    font-size:0.75rem;  /* 12px */
    line-height:2;      /* 24px */
}