search

erikjung / postcss-modular-scale-unit

PostCSS plugin to support a unit for modular scale numbers
MIT License
9 stars 1 forks source link

Is it possible to use more than one ratio? #14

Closed adrinux closed 8 years ago

adrinux commented 8 years ago

modularscale.js supports using multiple ratios. Does postcss-modular-scale-unit?

adrinux commented 8 years ago

Looking closer I suspect more than ratio might not be workable with the msu approach. Feel free to close this issue off.

erikjung commented 8 years ago

That is correct -- only single ratios, for now at least. Not sure if multiple ratios will be supported.

Out of curiosity, are you using both multiple ratios and multiple bases?

adrinux commented 8 years ago

For the moment no. This is my first attempt to use a modular scale. Reading around the subject and looking at modularscale.com I find 2 ratios is suggested. Plus having tried a single ratio on this site I feel that two is more workable.

In the end I gave up on the idea of generating a scale automatically via postcss. Instead I generated the scale on modularscale.com, switched to the table presentation, copied that into my stylesheet and edited it down to create a series of variables I can use via cssnext.

Are there any good articles I can read about using multiple bases? Haven't come across anything.

erikjung commented 8 years ago

To make your scale more flexible, have you tried using two bases instead of two ratios?

In my experience, using a single ratio with multiple bases is a bit easier to tune/predict. I usually use two bases: 1 and √ratio. Using the square root of your ratio will split the distance between each step, making the scale more granular:

http://www.modularscale.com/?1,1.225&em&1.5&web&text (second ratio rounded to three decimal places)

Are there any good articles I can read about using multiple bases? Haven't come across anything.

http://alistapart.com/article/more-meaningful-typography http://typecast.com/blog/a-more-modern-scale-for-web-typography https://24ways.org/2011/composing-the-new-canon http://blog.cloudfour.com/responsive-guide-to-type-sizing

adrinux commented 8 years ago

Thanks. Turns out I read that alistapart article and totally blanked the 'two numbers', only picked up on two ratios :) I will explore more.

adrinux commented 8 years ago

WIth some experimentation it seems possible to achieve a very similar result with the two bases as with two ratios. I had the double ratio http://www.modularscale.com/?1&em&1.067,1.618&web&text and this double base scale seems close enough http://www.modularscale.com/?1,1.225&em&1.125&web&text

Thanks for your help.