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));
--note09: calc(var(--note08) * var(--fontRatio));
--note10: calc(var(--note09) * var(--fontRatio));
--note11: calc(var(--note10) * var(--fontRatio));
--note12: calc(var(--note11) * 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):