wiinci/rhythm-and-scale

CSS variables for various font-sizes based on a modular scale and with line-heights on follow a vertical rhythm.

Rhythm and scale

This is a sample extension that generates a typographic scale for font-sizes based on Tim Brown's popular article on the subject of typography and modular scale.

The extension also generates line-heights associated with each of the font-sizes that follow a vertical rhythm. This creates a consistent vertical spacing between elements on page with text that's aligned on a repeating baseline grid.

The output is a collection of CSS custom properties for all headings (h1–h6), and the default and small body copy.

Demo

VS Code API

• commands.registerCommand
• window.showInputBox
• window.showQuickPick
• window.showTextDocument
• workspace.openTextDocument

Running the sample

• git clone this directory
• cd rhythm-and-scale
• npm install to install dependencies
• Open entension.js and hit F5 ro run and debug extension
• In the debug window that opens, hit Cmd + Shift + P and type Rhythm and Scale to select the extension
• Follow prompts and enter the necessary values (integer vs decimals)
• Get a file with the font-size and line-height properties!