CSS: Practical Font Sizing

gistfile1.css

/* Housekeeping */
*{ margin:0; padding:0; }

/* Define your base font-size here; most elements will inherit this. */
html{
    font-size:1em;      /* 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 */
}​