tachyons-css / tachyons

Functional css for humans
https://tachyons.io
MIT License
11.63k stars 677 forks source link

What type scale does Tachyons use? #381

Open indiesquidge opened 7 years ago

indiesquidge commented 7 years ago

Hey, Adam.

I just wanted to preface this "issue" with how awesome I think Tachyons is. Thank you so much for making this project, and writing posts that have fundamentally shifted many of my philosophical views on how to write software, most notably to assess my reality in order to unearth what my problems are (and how I to derive solutions from there).

--

Tl;dr - What is the type scale of Tachyons? How do the numbers relate to each other? Is the Tachyon's scale 8 "notes" long?


tachyons type scale

Tachyon's type scale

I've seen comments of yours referring to scales based on powers of 2, but don't exactly follow how the Tachyons scale is created. In the video on the scale page, you link to a site called http://type-scale.com/, which shows off a bunch of different scales (albeit it's lacking a "powers of 2" scale).

I've also begun reading Bringhurst's The Elements of Typographic Style, and noticed his type scale referenced in the book

screen shot 2017-05-17 at 3 51 31 pm

Typographic equivalent of the diatonic scale, p. 45

And finally, I read a post by Spencer Mortensen, http://spencermortensen.com/articles/typographic-scale/, which criticizes the scale provided in Bringhurst's book for various reasons (lost notes in the scale, flat notes, extra notes, etc.), and provides an equation to calculate frequency of the ith note in a scale

screen shot 2017-05-17 at 4 03 56 pm

where f0 is the fundamental frequency of the scale (generally 12) where i is the ith note in the scale where n is the number of notes in the scale (usually 5) where r is the ratio of the scale

For example, if f0 were 6 points, then we could derive a scale by applying the equation over 5 notes, using a ratio of 2, and get the following

screen shot 2017-05-17 at 4 11 05 pm

example type scale, where f0 = 6; n = 5; r = 2

Of course, I have no idea how this equation was derived (perhaps its origin is within the musical scene?), and thus its validity is somewhat lost on me.

It seems like there are a lot of opinions on how type scales are created, and I recognize that this could largely be a subjective matter—there are obviously many visually pleasing ratios.

I am trying to understand how something like a type scale is created. More precisely, how Tachyon's type scale was created. Could you offer some help to dissipate my ignorance? I would ver much appreciate it.

inspiredlabs commented 5 years ago

This scale is based on: px to rem conversion (http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/). Jason Pamental presents a more sophisticated approach: http://typecast.com/blog/a-more-modern-scale-for-web-typography