<css-gridpaper>

View on Github

Warning: This page is used by the automated test suite. Edit/delete with caution.

This is the visual demo page of <css-gridpaper>, a native WebComponent which draws an adaptive typographic grid as the page background, meant to be used a helper for constructing vertical rhythms, layouts etc..

If all went well, you should see blue gridlines between the text lines you're currently reading.

Using this demo

Use the bottom controls to alter the font-size and the line-height.  

What to expect

This paragraph text and the grid should scale proportionally.

As a result, this paragraph text should always end up vertically aligned between the grid lines, without intersecting them.