A simple typographic scale written in Sass.
If you need something more powerful or flexible, check out modularscale-sass.
Harmon is built on the principal that using a modular scale in web design will help you achieve visual harmony, particularly with typography. Not sure what a modular scale is or why you might use one? Read Tim Brown's A List Apart article on the subject.
I tried modularscale-sass but it felt a bit heavy duty for my needs. I wanted something simpler and lighter, so I built Harmon to scratch the itch.
- Install via Bower
bower install harmon --save
- Download ZIP and install manually
The first step is to configure your scale. The default values are:
$base: 16px; // This is your base font size
$ratio: $minor-third; // The ratio for your scale
If those don't work for you, you have two options:
- Edit
$base
and$ratio
variables found in_harmon.scss
to your liking. - Override them in your own settings.
Choose whichever method suits your needs. Note that $base
should always be a px
value; it gets converted to rem
or a unitless value later.
Next you need to set the base font size somewhere in your stylesheets using the $base
variable you configured earlier. We all have different approaches to this. Here's my personal approach:
:root {
font-size: $base;
}
Now you're ready to use the scale()
function in your stylesheets. It takes a $step
parameter for which step on the scale you want to move to. For example, to move 1 step up the scale:
body {
font-size: scale(1);
}
To move 1 step down the scale:
body {
font-size: scale(-1);
}
When you want to use the base size:
body {
font-size: scale(0);
}
Harmon uses rem
units by default. You can optionally output a unitless value (useful for line heights). Example:
body {
font-size: scale(1);
line-height: scale(2, unitless);
}
Harmon uses the same ratios and steps seen on modularscale.com. You can travel 6 steps down the scale or 16 up. Harmon will throw an error if you try to go below -6 or above 16. I find this range to provide good coverage across all of the ratios available. Going beyond -6 and 16 seems to lead to diminishing returns anyway.
If you find a bug or have a feature suggestion, feel free to submit an issue.
- First version
- Bower support
- Sache support