Viewport typography

HTML

<h1>Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units</h1>

<p>The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist. Note that the initial containing block's size is affected by the presence of scrollbars on the viewport.</p>

<p>For paged media, the exact definition of the viewport-percentage lengths is deferred to [CSS3PAGE].</p>

<dl>
    <dt>vw unit</dt>
    <dd>Equal to 1% of the width of the initial containing block.</dd>
    <dt>vh unit</dt>
    <dd>Equal to 1% of the height of the initial containing block.</dd>
    <dt>vmin unit</dt>
    <dd>Equal to the smaller of ‘vw’ or ‘vh’.</dd>
    <dt>vmax unit</dt>
    <dd>Equal to the larger of ‘vw’ or ‘vh’.</dd>
</dl>

CSS

h1 {
    font-size: 2rem;
    font-family: serif;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
}
p {
    font-size: 1rem;
    margin: 1rem 0;
}