FONTS

TARGET ÷ CONTEXT = RESULT

by Leo Lanese

HTML

<div id="wrapper">
    <h1>target    ÷    context     =    result</h1>
</div>

CSS

#wrapper {
    margin: 0 auto;
    width: 92%;  /* 92% */
    background-color: #808080;
}

/* let's start thinking proportionally */
h1    {
    font-size:1.625em;  
    /* 26px / 16px = 1.625em - expressed in relative and scaleable terms instead px */
    font-style: bold;
    color: #000;
    font: Comic, Arial;
    text-transform: uppercase;
}

/* best practice: 26px / 16px = 1.625em */

/*  
     Target: 26px
    Context: 16px ( Conversions based on 16px browser default size )
        =     em
*/