jan tschihold typography proportions

by gryzzly

HTML

<div id="layout">
    <div id="page">
        <div id="content">
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum.</p>
        </div>
        <span id="paginator">1</span>
    </div>
    <div id="aside"></div>
</div>

CSS

*,body {
    margin:0;
    padding:0;
}
#layout {
    overflow:hidden;
    min-width:50em;
    line-height:1.4;
}
    #page {
        background:#fff;
        background:rgba(230, 230, 250, 0.6);
        width:62%;
        float:left;
        height:1500px;
        position:relative;
        box-shadow:0 0 15px #555;
        -o-box-shadow:0 0 15px #555;
        -moz-box-shadow:0 0 15px #555;
        -webkit-box-shadow:0 0 15px #555;
    }
        #content {
            width:66.7%;
            margin:22.2% 11.1% 44.4% 22.2%;
        }
            #content p {
                text-indent:2em;
            }
            #content p:first-line {
                text-transform:uppercase;
            }
            #content p:first-child {
                text-indent:0;
            }
            #content p:first-child:first-letter {
                float:left;
                font-size:2.4em;
                margin:.15em .25em .15em 0;
                font-family:impact;
            }
        #paginator {
            margin:-33.3% 0 0 22.2%;
        } 
    #aside {
        background:#ccc;
        width:38%;
        float:left;
        height:1500px;
    }