A simple typographic scale written in Sass.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
harmon
.gitignore
LICENSE
README.md
_harmon.scss
bower.json
sache.json

README.md

Harmon

A simple typographic scale written in Sass.

If you need something more powerful or flexible, check out modularscale-sass.

A simple what?

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

  • Install via Bower bower install harmon --save
  • Download ZIP and install manually

Use

Configure the variables

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:

  1. Edit $base and $ratio variables found in _harmon.scss to your liking.
  2. 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.

Set the base font size

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;
}

Call the scale() function

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.

Issues

If you find a bug or have a feature suggestion, feel free to submit an issue.

Changelog

version 1.0.0 (April 13, 2015)
  • First version
  • Bower support
  • Sache support