modular scale

[BarryThePenguin]

This is quite a major change, so I'm not expecting this to get merged. It's a response to #89.

I can see you've put a lot of thought into how typography.js generates a modular scale. This is my proposal to align it more closely with what I understand to be more commonly used scale ratios, being those listed in modularscale

The bulk of the change lives in src/utils/createStyles.js

const h1 = vr.scale(3)
const h2 = vr.scale(1.8) // 9/5
const h3 = vr.scale(1.2) // 6/5
const h4 = vr.scale(0)
const h5 = vr.scale(-0.6) // -3/5
const h6 = vr.scale(-0.9) // -9/10

[KyleAMathews]

Could you explain a bit more the rational for this? Perhaps I don't understand what is more commonly used?

[BarryThePenguin]

In the modularscale package there are the following ratios

ratios =
  "minor second": 16/15
  "major second": 9/8
  "minor third": 6/5
  "major third": 4/3
  "diminished fourth": Math.sqrt(2)
  "perfect fifth": 3/2
  "minor sixth": 8/5
  "golden": 1.61803398875
  "phi": 1.61803398875
  "major sixth": 5/3
  "minor seventh": 16/9
  "major seventh": 15/8
  "octave": 2
  "major tenth": 5/2
  "major eleventh": 8/3
  "major twelfth": 3
  "double octave": 4

It would be great if we could use those values (string name or decimal value) as the scaleRatio for the Configuration object provided to the typography constructor

for example

new Typography({
  scaleRatio: 'golden',
})

[KyleAMathews]

You can use those names if you want actually. The scaleRatio just gets passed directly into modularscale. Originally that's what Typography.js exposed to users actually. I took them out as after doing user testing with ~15-20 people, the vast majority of people had no idea what the music scales were or even if they did, they didn't see the connection to Typography. Also I've never been able to see anything special about the named scaleRatios tbh. There's too much differences between typefaces. Like a lot of design, it comes down to fiddling with things which Typography.js excels at :-D