Type Scale

dabblet.css

/**
 * Type Scale
 */

html {
font-family:sans-serif;
font-size:12px;
}

body {
font-size:1.1rem;
line-height:1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
hr,
pre {
margin-bottom:0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
word-spacing:-0.1em;
}

h1 {
font-size:2.35rem;
line-height:2.5rem;
margin-top:2.5rem;
}

h2 {
font-size:1.85rem;
line-height:2rem;
margin-top:2rem;
}

h3,
h4,
h5,
h6 {
margin-top:1.5rem;
}

h3,
h4 {
font-size:1.3em;
}

h5,
h6 {
font-size:1.2rem;
}

h4,
h6 {
font-weight:normal;
}

b {
font-weight:normal;
}

i {
font-style:normal;
}

u {
text-decoration:none;
}

abbr, time {
font-size:.85em;
letter-spacing:.07em;
text-transform:uppercase;
}

address {
display:block;
font-style:normal;
}

small {
font-size:.85em;
}

p,
pre,
address,
ol,
ul,
dl {
margin-top:1.5rem;
}

li,
dt {
margin-top:.5rem;
}

dt {
font-weight:bold;
}

li ul,
li ol,
li dl {
margin-top:0;
}

dabblet.html

<h1>This Be A Heading 1<br>AaBbCcDdEe</h1>
<h2>This Be A Heading 2<br>AaBbCcDdEe</h2>
<h3>This Be A Heading 3<br>AaBbCcDdEe</h3>
<h4>This Be A Heading 4<br>AaBbCcDdEe</h4>
<h5>This Be A Heading 5<br>AaBbCcDdEe</h5>
<h6>This Be A Heading 6<br>AaBbCcDdEe</h6>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>

<address>Address: somewhere, world</address>

<p>
The <a href="#">a element</a> example<br>
The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
The <b>b element</b> example<br>
The <cite>cite element</cite> example<br>
The <code>code element</code> example<br>
The <del>del element</del> example<br>
The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
The <em>em element</em> example<br>
The <i>i element</i> example<br>
The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
The <ins>ins element</ins> example<br>
The <kbd>kbd element</kbd> example<br>
The <mark>mark element</mark> example<br>
The <q>q element <q>inside</q> a q element</q> example<br>
The <s>s element</s> example<br>
The <samp>samp element</samp> example<br>
The <small>small element</small> example<br>
The <span>span element</span> example<br>
The <strong>strong element</strong> example<br>
The <sub>sub element</sub> example<br>
The <sup>sup element</sup> example<br>
The <var>var element</var> example<br>
The <u>u element</u> example
</p>


<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et me.</pre>

<ol>
    <li>list item 1</li>
    <li>list item 1
        <ol>
            <li>list item 2</li>
            <li>list item 2
                <ol>
                    <li>list item 3</li>
                    <li>list item 3</li>
                </ol>
            </li>
            <li>list item 2</li>
            <li>list item 2</li>
        </ol>
    </li>
    <li>list item 1</li>
    <li>list item 1</li>
</ol>

<ul>
    <li>list item 1</li>
    <li>list item 1
        <ul>
            <li>list item 2</li>
            <li>list item 2
                <ul>
                    <li>list item 3</li>
                    <li>list item 3</li>
                </ul>
            </li>
            <li>list item 2</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>list item 1</li>
    <li>list item 1</li>
</ul>

<dl>
    <dt>Description name</dt>
    <dd>Description value</dd>
    <dt>Description name</dt>
    <dd>Description value</dd>
    <dd>Description value</dd>
    <dt>Description name</dt>
    <dt>Description name</dt>
    <dd>Description value</dd>
</dl>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}