iuux / adrx-quicknotes

Quick Notes functionality for Indiana University AdRx (Advising Records) system.
MIT License
0 stars 0 forks source link

Determine typographical scale #10

Closed basham closed 9 years ago

basham commented 9 years ago

Minor Third (6/5 = 1.2)

screen shot 2015-02-19 at 10 10 31 pm

basham commented 9 years ago

Major Third (5/4 = 1.25)

screen shot 2015-02-19 at 10 12 01 pm

basham commented 9 years ago

Perfect Fourth ( 4/3 = 1.333)

screen shot 2015-02-19 at 10 12 43 pm

basham commented 9 years ago

Deciding upon Minor Third.

Results in roughly:

Scale Font Size
-1 13px
0 16px
1 19px
1.5 21px
basham commented 9 years ago
// http://modularscale.com
@ratio-MinorThird: 6/5;

@ratio-Scale: @ratio-MinorThird;
@ratio-Scale--05: percentage(pow(@ratio-Scale, 0.5));
@ratio-Scale--10: percentage(@ratio-Scale);
@ratio-Scale--15: percentage(pow(@ratio-Scale, 1.5));
@ratio-Scale--20: percentage(pow(@ratio-Scale, 2));

// Multiplicative inverse (reciprocal)
@ratio-Scale--05i: percentage(1/pow(@ratio-Scale, 0.5));
@ratio-Scale--10i: percentage(1/pow(@ratio-Scale, 1));
basham commented 9 years ago
// Typographical scales
@scale-MinorThird: 6/5;

@scale-FontSize: @scale-MinorThird;
// Shrinking scale (inverse)
@scale-FontSize--10i: percentage(1/@scale-FontSize);
@scale-FontSize--05i: percentage(1/pow(@scale-FontSize, 0.5));
// Identity
@scale-FontSize--00: 100%;
// Growing scale 
@scale-FontSize--05: percentage(pow(@scale-FontSize, 0.5));
@scale-FontSize--10: percentage(@scale-FontSize);
@scale-FontSize--15: percentage(pow(@scale-FontSize, 1.5));
@scale-FontSize--20: percentage(pow(@scale-FontSize, 2));