Modular Scale calculations

[BarryThePenguin]

Just wondering what calculations are used for the scales?

I've compared typography.js to a couple of sites I've referenced in the past and I've noticed that the output of typography.js isn't consistent with the other sites.

The sites I'm comparing are:

• http://kyleamathews.github.io/typography.js/
• http://www.gridlover.net/try
• http://www.modularscale.com/?1.25&em&1.333&web&text

and the values I'm using are

font size: 18px / 1.25em
line height: 1.5
scale ratio: ~1.333

[KyleAMathews]

Be curious to hear more what you mean? This is the script for generating
the styles
https://github.com/KyleAMathews/typography.js/blob/master/packages/typography/src/utils/createStyles.js
On Fri, Oct 7, 2016 at 10:42 PM Jonathan Haines notifications@github.com
wrote:

Just wondering what calculations are used for the scales?

I've compared typography.js to a couple of sites I've referenced in the
past and I've noticed that the output of typography.js isn't consistent
with the other sites.

The sites I'm comparing are:

• http://kyleamathews.github.io/typography.js/
• http://www.gridlover.net/try
• http://www.modularscale.com/?1.25&em&1.333&web&text

and the values I'm using are

font size: 18px / 1.25em
line height: 1.5
scale ratio: ~1.333

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#89, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AAEVh95ksOm8i8eFTKnZU4JnITbdv0uAks5qxy04gaJpZM4KRoWJ
.

[BarryThePenguin]

The calculations I've used previously to generate a modular scale are

p: base font size
h1: h2 * scale
h2: h3 * scale
h3: h4 * scale
h4: base font size
h5: h4 / scale
h6: h5 / scale

Using these inputs

font size: 18px / 1.25em
line height: 1.5
scale ratio: 4/3

The type scale generated looks something like this:

p: 18px / 1em
h1: 42px / 2.333em
h2: 32px / 1.77em
h3: 24px / 1.33em
h4: 18px / 1em
h5: 14px / 0.75em
h6: 10px / 0.666em

The two sites I mentioned above also give a similar result.
When using typography.js with the inputs I use above, the result looks like this:

p: 18px / 1rem
h1: 24px / 1.33rem
h2: 21.3592px / 1.18662rem
h3: 20.1749px / 1.33rem
h4: 18px / 1rem
h5: 17.0021px / 0.94456rem
h6: 16.524px / 0.918rem

I was wanting to know the method/reasoning typography.js uses to generate it's type scales.

[KyleAMathews]

How I've setup Typography.js is that h1 equals the scaleRatio * baseFontSize.

So the default scaleRatio is 2 as the most common ratio between the body text size and header size is 2.

There's an internal scale function which does this calculation

typography.js/packages/typography/src/index.js

Line 48 in 23726fc

vr.scale = (value: number) => {

It calculates the new font size with Math.pow(scaleRatio, scaleValue) and then uses another internal function, adjustFontSizeTo to return the font size + line height to maintain vertical rhythm.

A scale value of 0 equals the body size. A scale value of 1 equals the h1 size (by convention, it's pretty arbitrary where on the scale you pick off sizes — you could have different scales that end up returning the same font sizes — but 0 — 1 is pretty easy to remember and has worked well for me). You can see where header sizes are defined here:

typography.js/packages/typography/src/utils/createStyles.js

Line 197 in 23726fc

// Set header sizes.

I used to have each header size equidistant but in the real world, most sites want more differentiation between h1/h2 and so h2 is now 0.6 on the scale instead of 0.8.

So to recreate your example scale, just divide the h1 font size by the base to get the scale ratio for Typography.js or 42/18 == 2.333

[KyleAMathews]

Also this release notes might help as it was when a lot of these ideas crystalized https://github.com/KyleAMathews/typography.js/releases/tag/v0.8.3