oneblackcrayon/Golden-Rule-Typography-with-EMs-Demo.html

## Golden-Rule-Typography-with-EMs-Demo.html
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
    /* @ HTML Style */
    html {
        background: #F7F7F7;
        color: #373737;
        display: block;
        font-size: 100%;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.8125em;
        height:100%;
        margin:0 auto;
        overflow:visible;
        padding:0;
        position:relative;
        top:0;
        bottom:0;
        width:100%;
    }
    /* @ Body Style */
    body {
        border: 0;
        display:block;
        margin:0 auto;
        overflow:auto;
        padding:0;
        position:relative;
        text-align:left;
    }

    .box {
        display: block;
        margin: 2em auto;
        padding: 5em;
    }

    p, h1, h2, h3, h4, h5, h6, blockquote, ul, dl, ol{
        //margin-bottom: 1.8125em;
    }
    li, dd, dt {
    }

    </style>
    <title>Golden Rule Typography with EMs Demo</title>
    </head>
        <body>
            <div class="box">
                <h1>Optimized Typography for 16px Font in 1140px-wide Setting</h1>
                <p>Font Size: 16 Line Height: 29 Content Width: 1140</p>

<!-- base type -->

                <h1>H1 Title Highest level title I can use, often, will be used for the title or headline of a page/article.</h1>
                <h2>H2 Title Second highest level title, this is almost a standard for any article or page that uses the H1 for logo.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed nulla lacus. <a href="google">Nulla tincidunt odio eget turpis posuere sed gravida sem dapibus.</a> Curabitur felis tortor, pellentesque sit amet iaculis nec, aliquam ut libero. Duis magna lorem, euismod vitae fringilla vitae, gravida at erat. Suspendisse pulvinar imperdiet dapibus. Vestibulum mi nisi, semper quis feugiat vel, mollis at leo. Donec sit amet quam nunc, nec dapibus magna. <a href="google">Class aptent taciti sociosqu ad litora torquent per conubia nostra</a>, per inceptos himenaeos. Vivamus ut magna vel nisl aliquet venenatis vel eu tortor. Nam placerat ultricies rhoncus. Mauris vel enim vulputate lorem cursus porttitor sed at dolor. Sed risus arcu, blandit ullamcorper dictum a, mollis vel justo. Phasellus sed gravida nibh. Morbi ut ligula massa.</p>
                <p>Cras sit amet odio nibh. Integer ipsum nisi, <em>fringilla nec euismod nec</em>, vestibulum quis tellus. Quisque in nibh et est lobortis feugiat. Morbi tristique nunc aliquam ligula sollicitudin a elementum felis lobortis. Mauris cursus, leo sed iaculis eleifend, sapien risus rutrum leo, sit amet porttitor enim mauris vel sapien. Donec ac enim eget diam consequat consequat at sit amet nibh. Nam venenatis urna in sem dictum a tincidunt urna venenatis.</p>
                <h3>H3 Title Sub-titles for articles that need extra headings.</h3>
                <p>Proin libero tellus, vehicula at mattis vitae, egestas sit amet enim. <a href="google">Pellentesque eu augue</a> sit amet erat molestie iaculis <em>sed sit amet ipsum</em>. Vivamus vulputate mollis nisl condimentum adipiscing. Etiam dolor nibh, <a href="google">tristique eu fringilla nec</a>, rutrum non erat. Integer fringilla, purus sit amet feugiat sagittis, ipsum metus feugiat orci, a pellentesque justo dolor eu justo. Vivamus dapibus viverra dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dapibus quam id ligula posuere congue ac condimentum nibh. Pellentesque vulputate rutrum pharetra.</p>
                <p>In in orci urna, ut condimentum justo. Nulla vitae dictum quam. Sed interdum eros ipsum, ac auctor erat. <strong>Phasellus vel lectus nec nulla</strong> fringilla auctor ut venenatis orci. Pellentesque bibendum, nunc ac sagittis malesuada, sapien tellus suscipit sapien, quis congue dolor purus ac ante. Donec in laoreet nibh. Integer pulvinar tincidunt lacus ac scelerisque. Praesent non felis quis magna mattis eleifend.</p>
                <h4>H4 Title Often the middle child of headers, usually will be a sub-sub header for any list or larger title for asides or sidebars.</h4>
                <ol>
                    <li>Por scientie</li>
                    <li>musica</li>
                    <li>sport etc</li>
                    <li>litot Europa</li>
                    <li>usa li sam</li>
                    <li>vocabular</li>
                </ol>
                <h4>H4 Title Often the middle child of headers, usually will be a sub-sub header for any list or larger title for asides or sidebars.</h4>
                <ul>
                    <li>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. </li>
                    <li>It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. </li>
                    <li>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </li>
                    <li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Epsum factorial non deposit quid pro quo hic escorol. </li>
                    <li>Souvlaki ignitus carborundum e pluribus unum.</li>
                </ul>
                <h5>H5 Title I use this for any aside or sidebar title for related content in an area of a page.</h5>
                <p>Ut vitae ligula a erat feugiat porta non vel urna. Sed elit sapien, <strong>sodales ut rutrum quis</strong>, pellentesque ac leo. Sed a augue nec tortor venenatis convallis. Nullam arcu nunc, condimentum a sollicitudin a, ultrices ac velit. Nam ante libero, suscipit eget fringilla et, auctor id nisl. Morbi sagittis dolor vitae dui vulputate semper. Pellentesque pulvinar, libero vel venenatis mollis, orci neque iaculis felis, et tempor eros nulla ac mauris. Vivamus dignissim placerat velit aliquet ultricies. Ut molestie ligula et urna luctus eget molestie neque hendrerit. Vestibulum eu orci nunc, ut auctor lorem. Fusce eros est, commodo eget posuere nec, blandit et magna. Sed adipiscing gravida erat, eget faucibus diam gravida quis. In pretium sem in dui dapibus sagittis. Morbi lacinia libero vitae dui feugiat sit amet fringilla arcu adipiscing. Duis erat lectus, suscipit vel pellentesque ut, bibendum nec massa.</p>
                <p><code>Li Europan lingues es membres del sam familie.
                    Lor separat existentie es un myth.</code></p>
                <h6>H6 Title: I use this for the very last line of any web/email project I do.</h6>
            </div>
        </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style type="text/css">
	/* @ HTML Style */
	html {
	background: #F7F7F7;
	color: #373737;
	display: block;
	font-size: 100%;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.8125em;
	height:100%;
	margin:0 auto;
	overflow:visible;
	padding:0;
	position:relative;
	top:0;
	bottom:0;
	width:100%;
	}
	/* @ Body Style */
	body {
	border: 0;
	display:block;
	margin:0 auto;
	overflow:auto;
	padding:0;
	position:relative;
	text-align:left;
	}

	.box {
	display: block;
	margin: 2em auto;
	padding: 5em;
	}

	p, h1, h2, h3, h4, h5, h6, blockquote, ul, dl, ol{
	//margin-bottom: 1.8125em;
	}
	li, dd, dt {
	}

	</style>
	<title>Golden Rule Typography with EMs Demo</title>
	</head>
	<body>
	<div class="box">
	<h1>Optimized Typography for 16px Font in 1140px-wide Setting</h1>
	<p>Font Size: 16 Line Height: 29 Content Width: 1140</p>

	<!-- base type -->

	<h1>H1 Title Highest level title I can use, often, will be used for the title or headline of a page/article.</h1>
	<h2>H2 Title Second highest level title, this is almost a standard for any article or page that uses the H1 for logo.</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed nulla lacus. <a href="google">Nulla tincidunt odio eget turpis posuere sed gravida sem dapibus.</a> Curabitur felis tortor, pellentesque sit amet iaculis nec, aliquam ut libero. Duis magna lorem, euismod vitae fringilla vitae, gravida at erat. Suspendisse pulvinar imperdiet dapibus. Vestibulum mi nisi, semper quis feugiat vel, mollis at leo. Donec sit amet quam nunc, nec dapibus magna. <a href="google">Class aptent taciti sociosqu ad litora torquent per conubia nostra</a>, per inceptos himenaeos. Vivamus ut magna vel nisl aliquet venenatis vel eu tortor. Nam placerat ultricies rhoncus. Mauris vel enim vulputate lorem cursus porttitor sed at dolor. Sed risus arcu, blandit ullamcorper dictum a, mollis vel justo. Phasellus sed gravida nibh. Morbi ut ligula massa.</p>
	<p>Cras sit amet odio nibh. Integer ipsum nisi, <em>fringilla nec euismod nec</em>, vestibulum quis tellus. Quisque in nibh et est lobortis feugiat. Morbi tristique nunc aliquam ligula sollicitudin a elementum felis lobortis. Mauris cursus, leo sed iaculis eleifend, sapien risus rutrum leo, sit amet porttitor enim mauris vel sapien. Donec ac enim eget diam consequat consequat at sit amet nibh. Nam venenatis urna in sem dictum a tincidunt urna venenatis.</p>
	<h3>H3 Title Sub-titles for articles that need extra headings.</h3>
	<p>Proin libero tellus, vehicula at mattis vitae, egestas sit amet enim. <a href="google">Pellentesque eu augue</a> sit amet erat molestie iaculis <em>sed sit amet ipsum</em>. Vivamus vulputate mollis nisl condimentum adipiscing. Etiam dolor nibh, <a href="google">tristique eu fringilla nec</a>, rutrum non erat. Integer fringilla, purus sit amet feugiat sagittis, ipsum metus feugiat orci, a pellentesque justo dolor eu justo. Vivamus dapibus viverra dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dapibus quam id ligula posuere congue ac condimentum nibh. Pellentesque vulputate rutrum pharetra.</p>
	<p>In in orci urna, ut condimentum justo. Nulla vitae dictum quam. Sed interdum eros ipsum, ac auctor erat. <strong>Phasellus vel lectus nec nulla</strong> fringilla auctor ut venenatis orci. Pellentesque bibendum, nunc ac sagittis malesuada, sapien tellus suscipit sapien, quis congue dolor purus ac ante. Donec in laoreet nibh. Integer pulvinar tincidunt lacus ac scelerisque. Praesent non felis quis magna mattis eleifend.</p>
	<h4>H4 Title Often the middle child of headers, usually will be a sub-sub header for any list or larger title for asides or sidebars.</h4>
	<ol>
	<li>Por scientie</li>
	<li>musica</li>
	<li>sport etc</li>
	<li>litot Europa</li>
	<li>usa li sam</li>
	<li>vocabular</li>
	</ol>
	<h4>H4 Title Often the middle child of headers, usually will be a sub-sub header for any list or larger title for asides or sidebars.</h4>
	<ul>
	<li>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. </li>
	<li>It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. </li>
	<li>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </li>
	<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Epsum factorial non deposit quid pro quo hic escorol. </li>
	<li>Souvlaki ignitus carborundum e pluribus unum.</li>
	</ul>
	<h5>H5 Title I use this for any aside or sidebar title for related content in an area of a page.</h5>
	<p>Ut vitae ligula a erat feugiat porta non vel urna. Sed elit sapien, <strong>sodales ut rutrum quis</strong>, pellentesque ac leo. Sed a augue nec tortor venenatis convallis. Nullam arcu nunc, condimentum a sollicitudin a, ultrices ac velit. Nam ante libero, suscipit eget fringilla et, auctor id nisl. Morbi sagittis dolor vitae dui vulputate semper. Pellentesque pulvinar, libero vel venenatis mollis, orci neque iaculis felis, et tempor eros nulla ac mauris. Vivamus dignissim placerat velit aliquet ultricies. Ut molestie ligula et urna luctus eget molestie neque hendrerit. Vestibulum eu orci nunc, ut auctor lorem. Fusce eros est, commodo eget posuere nec, blandit et magna. Sed adipiscing gravida erat, eget faucibus diam gravida quis. In pretium sem in dui dapibus sagittis. Morbi lacinia libero vitae dui feugiat sit amet fringilla arcu adipiscing. Duis erat lectus, suscipit vel pellentesque ut, bibendum nec massa.</p>
	<p><code>Li Europan lingues es membres del sam familie.
	Lor separat existentie es un myth.</code></p>
	<h6>H6 Title: I use this for the very last line of any web/email project I do.</h6>
	</div>
	</body>
	</html>