Typographilic

Typographilic is a simple tool for creating typographic scales and systems.

Installation

To use in Node.js:

npm install typographilic

Then in your project:

var typographilic = require('typographilic');

For use in a browser environment, check out Browserify.

Usage

Typographilic offers a single method which returns an object containing useful values for creating a typography system.

To create a simple modular scale, simply pass in your scale factor, base line height, and base font size (in pixels):

// Pass in scale factor, base line height, and base font size.
var typography = typographilic(1.618, 1.4, 16);

// Returns
{
  scaleFactor: 1.618,
  baseLineHeight: 1.4,
  baseFontSizes: [ 16 ],
  baseFontSize: 16,
  lineHeight: { px: 22, em: 1.375, rem: 1.375 },
  fontSizes: {
     px: [ 10, 16, 26, 42, 68, 110, 178 ],
     em: [ 0.625, 1, 1.625, 2.625, 4.25, 6.875, 11.125 ],
     rem: [ 0.625, 1, 1.625, 2.625, 4.25, 6.875, 11.125 ]
  }
}

To create a multi stranded modular scale, simply pass in an array of base sizes as the last argument:

// Pass in scale factor, base line height, and font sizes.
// The first value in the array will become the base font size.
var typography = typographilic(1.618, 1.4, [12, 16]);

// Returns
{
  scaleFactor: 1.618,
  baseLineHeight: 1.4,
  baseFontSizes: [ 12, 16 ],
  baseFontSize: 12,
  lineHeight: { px: 17, em: 1.417, rem: 1.063 },
  fontSizes: {
     px: [ 10, 12, 16, 19, 26, 31, 42, 50, 68, 81, 110, 131, 178 ],
     em: [ 0.833, 1, 1.333, 1.583, 2.167, 2.583, 3.5, 4.167, 5.667, 6.75, 9.167, 10.917, 14.833 ],
     rem: [ 0.625, 0.75, 1, 1.188, 1.625, 1.938, 2.625, 3.125, 4.25, 5.063, 6.875, 8.188, 11.125 ]
  }
}

Note that the first value in the array of font sizes will be assigned as the base font size for the calculations. You should always place your base font size first in the array.

--

For the first argument, scale factor, you can also pass in a ratio as a string and in some cases a name representing a ratio.

Example of passing in a ratio:

var typography = typographilic('1:1.618', 1.4, 16)

Example of passing in a named ratio

var typography = typographilic('goldenRatio', 1.4, 16)

Here is a complete list of the named ratios you can pass in:

'minorSecond' = 1.067
'majorSecond' = 1.125
'minorThird' = 1.2
'majorThird' = 1.25
'perfectFourth' = 1.333
'augmentedFourth' = 1.414
'diminishedFifth' = 1.414
'perfectFifth' = 1.5
'minorSixth' = 1.6
'goldenRatio' = 1.618
'1:phi' = 1.618
'majorSixth' = 1.667
'minorSeventh' = 1.778
'majorSeventh' = 1.875
'octave' = 2
'majorTenth' = 2.5
'majorEleventh' = 2.667
'majorTwelfth' = 3
'doubleOctave' = 4

For more background on these names and ratios, I recommend you read The Elements of Typographic Style by Robert Bringhurst.

--

Some things you could do with this library include:

• Generate useful CSS boilerplate from the command line.
• Create a Gridlover clone.
• Analyze type systems on existing websites.
• Explore other applications of modular scales, like making music.
• And more ... Let me know on Twitter!

Typographilic was inspired by the fantastic Gridlover app.

Support

Please file any issues in Github.

Contributing

Please include a test for new features following the existing testing patterns. Note that this project is written in Coffeescript and is tested with Chai and Mocha.

License

The MIT License (MIT)

Copyright (c) 2015 Adam Waselnuk

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.