Simple typography styles

style.css

/**
 * Simple typography base css 
 * Author: Gayan Virajith
 * URL: gayanvirajith@github.io
 */

/**
 * Quick and dirty way to get rid of unnecessary padding 
 * and margins from the various elements.
 */
* {
    padding: 0;
    margin: 0;
 
}

/**
 * Define a default font-size and line-height of 
 * the body text.
 */
body {
    font-size: 12px;
    line-height: 1.5;
}


p {
    font-size: 1em; /* equiv 12px */
    line-height: 1.5em;
    margin: 1.5em 0;
}


/**
 * Define the h1 to be something easy like 2em which doubles the paragraph’s size. 
 * In order to keep the line height consistent with our paragraphs, 
 * we need to set the h1’s line height to be 1.5em. 
 */
h1 {
    font-size:  2em; /* equiv 24px */
    line-height: 1.5em;
    margin:  1.5em 0;
}


h2 {
    font-size:  1.8333em; /* equiv 22px */
    line-height: 1.6364em;
    margin:  1.6364em 0;
}


h3 {
    font-size:  1.6667em; /* equiv 20px */
    line-height: 1.8em;
    margin:  1.8em 0;
}


h4 {
    font-size:  1.5em; /* equiv 18px */
    line-height:  1em;
    margin:  2em 0;
}


h5 {
    font-size:  1.3333em; /* equiv 16px */
    line-height:  1.125em;
    margin:  2.25em 0;
}


h6 {
    font-size:  1.1667em; /* equiv 14px */
    line-height:  1.2857em;
    margin:  2.5714em 0;
}