About the Author

Born in Queens, Ray’s musical studies began at age 4 with classical piano. During high school he attended the Aaron Copeland School of Music college preparatory program, and went on to study Electronic Production and Design at Berklee College of Music in Boston.

While in Boston, he spent two years studying at Massachusetts Institute of Technology — this is where some of his most precious relationships were formed, and where the complex beauty of the world was illuminated to him through math, philosophy, and conversation. This is also where he became an unofficial member of the Gaussian academic lineage (Gauss > Bessel > Scherk > Kummer > Konigsberger > Husserl > Klein > Perlman > Reich).

Ignorance more frequently begets confidence than does knowledge.

Charles Darwin, The Descent of Man

“Rabbit's clever,” said Pooh thoughtfully.


“Yes,” said Piglet, “Rabbit's clever.”


“And he has Brain.”


“Yes,” said Piglet, “Rabbit has Brain.”


There was a long silence.


“I suppose,” said Pooh, “that that's why he never understands anything.”


A. A. Milne, Winnie-the-Pooh

One of the painful things about our time is that those who feel certainty are stupid, and those with any imagination and understanding are filled with doubt and indecision.

Bertrand Russell, New Hopes for a Changing World

The fool doth think he is wise, but the wise man knows himself to be a fool.

William Shakespeare, As You Like It

A philosopher is a man who has to cure many intellectual diseases in himself before he can arrive at the notions of common sense.

Ludwig Wittgenstein, Culture and Value

…To be self-contented is to be vile and ignorant, and to aspire is better than to be blindly and impotently happy.

Edwin A. Abbott, Sphere, in Flatland

The man I meet with is not often so instructive as the silence he breaks.

Henry David Thoreau, A Week on the Concord and Merrimack Rivers

About Site & Development

This site is designed to be experienced like a book. There are no cookies, or visitor tracking of any kind. No statistics are logged, no data is collected. There is a gdpr-compliant privacy-oriented captcha service running behind the contact form to mitigate spam and bots, which does not collect any user data, as all proof-of-work is done locally.

Hand-authored and made almost entirely of text, aesthetic, typography, balance, and rhythm are heavily prioritized, making the material as beautiful as possible, as well as easy and enjoyable to read. Inspiration was taken from Renaissance-era works, utilizing typefaces crafted for printed books, historical recreations, and medieval illuminated manuscripts.

Summary

As a musician exploring various design philosophies, this system was born out of a simple question: “Can the notes of a musical scale, rather than numerical values, be used to set font sizes?” Although just a few lines of code, it was a complicated and time consuming process to get there. Into the end result went many hours of experimentation, trial and error, mental problem solving, and consulting with my good friend and talented professional designer / developer Ian Venskus, without whom I could not have done this project.

The underlying design system is essentially one of math and variables, using only html and css. It takes inputs for a ratio (ideally a musical interval), a minimum font size (set to 16px for accessibility), and a “scaling factor” which determines how everything grows in accordance with the viewport width. To best accommodate text-only content, the body width is set to 50% — notice how the padding fluidly expands to fill the screen in the margins as the viewport width is adjusted, while keeping all sizing and spacing related and within bounds. An interesting aspect of this fluid responsiveness is that there are practically no media queries involved. (In truth, there are precisely two in use; one changes the text from justified to left-aligned on small screen sizes for improved aesthetics and legibility, the other sets the viewport width at which point the side margins start to shrink, maintaining a correct and balanced look on all device sizes).

The system is not limited to determining font sizes — but rather, musical intervals are employed wherever possible, so that margins, padding, line heights, header and paragraph spacing (vertical rhythm), and anything else to do with size and space are all based on the one fundamental musical interval. All this comes together to create, what I hope is, one of the most beautiful text-based sites on the web.

Code

          
--fontRatio: calc(32 / 27);

Sets the “Font Ratio” variable — the basis for the entire system (preferably a musical interval, though any numerical value in any form will do). 

          
--minFontSize: calc(16 / var(--fontRatio)) * 1px;

Defines the “Minimum Font Size” variable, to be used in conjunction with “Note 00” (starts at 16px for accessibility). 

          
--note00: clamp(var(--minFontSize), var(--fontSizeGrow), 1000000000px);

Defines the “Note 00” variable (the starting point for all other Notes) scaling all the way up to infinity (1 billion pixels to be precise). 

          
--note01: calc(var(--note00) * var(--fontRatio));
--note02: calc(var(--note01) * var(--fontRatio));
--note03: calc(var(--note02) * var(--fontRatio));
--note04: calc(var(--note03) * var(--fontRatio));

Each subsequent Note is defined by multiplying the immediately previous Note by the “Font Ratio” — it's these Notes that are used to size everything, of which more can be added as needed.

As is, the Note system's unit is tied to pixels. In order to adjust how the body and page margins grow and shrink according to viewport width, a similar (but separate) system with vw units is required: 

          
--minFontSizeVW: calc(16 / var(--fontRatio)) * 1vw;

Defines “Minimum Font Size” with vw units (similarly based off of 16px for accessibility). 

          
--note00VW: clamp(var(--minFontSizeVW), 1vw, 1000000000px);

Sets up “Note 00” with vw units. 

          
--note01VW: calc(var(--note00VW) * var(--fontRatio));

Defines “Note 01” in the new vw system. 

          
--bodyMinWidth: calc(100 / var(--fontRatio) * var(--note01) / 2);

Defines “Body Min Width” in pixels using “Note 01”. 

          
--bodyMinWidthVW: calc(100 / var(--fontRatio) * var(--note01VW) / 2);

Defines “Body Min Width” in vw units using “Note 01”. 

          
--fontSizeGrow: 1vw;

Effectively determines at what viewport width all sizes start to ‘scale’ up. 

          
body {
  min-width: var(--bodyMinWidth);
  width: 50vw;
}
            
@media only screen and (max-width: 767px) {
  body {
    min-width: inherit;
    width: calc(var(--bodyMinWidthVW) / 767 * 100);
  }
}

The only media query to do with sizing and responsiveness — at 767px as the mobile standard, the body sizes down using vw-based variables. 

  
/*
  The following musical interval system and its associated code, 
  created by Raymond Reich for bachtogauss.com, 
  is licensed under the CC BY-NC 4.0 Deed License.
  For more details, please visit:
  https://creativecommons.org/licenses/by-nc/4.0/deed.en
*/  

:root {
  --fontRatio: calc(32 / 27);
  --minFontSize: calc((16 / var(--fontRatio)) * 1px);
  --fontSizeGrow: 1vw;
  --note00: clamp(var(--minFontSize), var(--fontSizeGrow), 1000000000px);
  --note01: calc(var(--note00) * var(--fontRatio));
  --note02: calc(var(--note01) * var(--fontRatio));
  --note03: calc(var(--note02) * var(--fontRatio));
  --note04: calc(var(--note03) * var(--fontRatio));
  --note05: calc(var(--note04) * var(--fontRatio));
  --note06: calc(var(--note05) * var(--fontRatio));
  --note07: calc(var(--note06) * var(--fontRatio));
  --note08: calc(var(--note07) * var(--fontRatio));
  --minFontSizeVW: calc((16 / var(--fontRatio)) * 1vw);
  --note00VW: clamp(var(--minFontSizeVW), 1vw, 1000000000px);
  --note01VW: calc(var(--note00VW) * var(--fontRatio));
  --bodyMinWidth: calc(100 / var(--fontRatio) * var(--note01) / 2);
  --bodyMinWidthVW: calc(100 / var(--fontRatio) * var(--note01VW) / 2);
}

body {
  width: 50vw;
  min-width: var(--bodyMinWidth);
  margin: auto;
}

@media only screen and (max-width: 767px) {
  body {
    min-width: inherit;
    width: calc(var(--bodyMinWidthVW) / 767 * 100);
  }
}

The entire code block — feel free to use it in your own project, with credit. 

          
font-size: var(--note03);
line-height: var(--note06);
margin-top: var(--note08);

An example of the how the system's implementation looks for a few properties of this page.

Sources & Inspiration

I learned quite a significant amount, and took much inspiration, from the following written works and their authors' respective ideas, upon which I built my own (sorted alphabetically by last name):

Thank you for reading.
All questions and feedback are welcome, click here to send mail.