Scale & Rhythm for Your Web Type

Gridlover keeps sizing type tidy and logical. Font sizes are calculated by stepping up the font size by the scale factor. For a detailed explanation, see More Meaningful Typography at A List Apart. Elements in Gridlover are always kept aligned to a baseline grid. Here's another article to read, Setting Type on the Web to a Baseline Grid.

Usage

Drag any number that looks like a blue pill left or right to adjust its value. With proper fresh browsers, you get native range sliders too to try large value variations quickly. For finer adjustments, just drag the numbers. You can also move focus through the editable values by keyboard with the tab key, business as usual. You can affect the focused value with the cursor keys: ↑ to increase, ↓ to decrease, with ⌥ (alt) pressed down, the adjustment will be tenfold. Press c to toggle the css-panel, g to toggle the grid.

To get your own content into Gridlover, write some Markdown in your favorite text editor and drag it here. If you're not familiar with it, read Markdown basics at Daring Fireball. Here's pretty much everything you'll need to make a decent preview:

A First Level Heading
====================

A Second Level Heading
----------------------

### Heading 3

This is a regular paragraph.

(Chrome seems to be really picky about what it will allow to be dragged in, so far it only seems to accept stuff originating from chrome and firefox windows. Safari and Firefox are fine.)

For advanced stuff, markdown allows inline html. So for now, you can include your own styles just by dragging in some html with a style block along with your content. Just remember that a line beginning with four spaces means a code block in markdown and everything on it will be escaped with entities. Any advanced html will need to be inline with the text, or unindented. Here's an example.

I'm an h1, with some css
===

Here's an inline style block.
<style type="text/css">h1 { font-family: Georgia; font-weight: normal; }</style>
								
							

Features, features...

The todo list is large, but any feedback is much appreciated. Next up on the feature list would be rudimentary Typekit or Font Deck integration. Also adding custom css is in the works, so you can adjust colors and anything you want really. Cross browser compatibility isn't yet very good, decent at best. Please get in touch, we're @gridlover on twitter. Keep in mind that Gridlover doesn't automatically make your site beautiful, it only offers a foundation to build upon.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.

Jan Tschichold, Homage to the Book, 1968