Gridlover : Establish a Typographic System with Modular Scale


Gridlover is a tool to establish a typographic system with modular scale and vertical rhythm. Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css later. Drag the numbers in the top toolbar left and right to adjust their value. The same goes for numbers with a dotted underline in the code panel.

It has the following features.

  • Elements in Gridlover are always kept aligned to a pixel perfect baseline grid.
  • The font scale in Gridlover is calculated by stepping up the font size by the scale factor for each heading level. (base-font-size * scale ^ step)
  • Line heights are fitted to the font size.
  • Margins are multiples of line height.

[button color=”orange” size=”medium” link=”” target=”blank” rel=”nofollow” ]Gridlover[/button]

Leave a Reply