You are not logged in.
Currently there is a lot to do about 'Modular Scales' (basically 'size ratios') to create appealing font sizes for a website.
The principle is rather easy: with a base font size, create a sequence of font sizes give a chosen ratio:
scale
ratio factor description
----- ------ -----------
16:15 1.067 minor second => growing a font size nice and slow
9:8 1.125 major second
6:5 1.2 minor third
5:4 1.25 major third
4:3 1.333 perfect fourth => still appealing, but already growing too fast for comfort
√2:1 1.414 aug. fourth / dim. fifth
3:2 1.5 perfect fifth
8:5 1.6 minor sixth
1.618:1 1.618 golden ratio (ϕ)/Fibonacci
5:3 1.667 major sixth
16:9 1.778 minor seventh
15:8 1.875 major seventh
2:1 2 octave
5:2 2.5 major tenth
8:3 2.667 major eleventh
e 2.718 Euler's number (2.718281828..)
3:1 3 major twelfth
4:1 4 double octave => massive effect as each next font size is 4 times largerCurrent math used:
My question is: what mathematical way can I use to slow down the growth of a font size given some ratio.
Something like: the higher the 'scale factor', the larger the 'slow down factor'.
As this is for CSS, the only usable math operators are: + - / *
This is the current (pseudo) code (working as expected, btw):
size0 = basesize * a11y-scale
size1 = size0 * scalefactor
size2 = size1 * scalefactor
size3 = size2 * scalefactor
etc...
size-1 = size0 / scalefactor
size-2 = size1 / scalefactor
size-3 = size2 / scalefactor
etc...Combined with a generic document scale factor I will be using this to create a tutorial on how to make a website more accessible (The a11y Project) to the Vision Impaired.
So, much obliged in advance!
Last edited by renevanderlende (2022-01-20 14:23:34)
Offline