<h1>Much better</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
html {
// Minimum 16x, and grows more slowly
// (half the rate of screen growth)
font-size: calc(1em + 0.5vw);
// Line-height based on font-size,
// with addition viewport-relative growth
line-height: calc(1.1em + 0.5vw);
margin: 0.5em;
}
h1 {
// Grows more quickly,
// allowing for wider variation on larger screens
font-size: calc(1.5rem + 1.5vw);
}
h2 {
// Based on the root text-size,
// and therefor growing at the same rate
font-size: 1.25rem;
}
h1, h2 {
font-weight: bold;
}
h1, h2, p {
margin: .5em 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.