A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers.
Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.
To get started, you need to select a ratio and a base value. The base value is usually your text font size or 1em. Optionally you can add another value to create a double stranded modular scale which might be useful to create more options for in-between values. This base size paired with a ratio such as the golden ratio or any musical proportion will create your scale of values which all share this proportion.
- Terminal:
npm install modularscale-sass --save-dev - SCSS:
@import 'modularscale'
- Terminal:
npm install modularscale-sass --save-dev - Webpack config: install and use sass-loader
- SCSS:
@import '~modularscale-sass/stylesheets/modularscale';
- Terminal:
bower install modular-scale --save-dev - SCSS:
@import '../link_to_component_dir/modularscale';
- Download the latest zip
- Extract into your project
- SCSS:
@import 'modularscale';
- Terminal:
gem install modular-scale --pre - Compass config:
require 'modular-scale' - SCSS:
@import 'modularscale';
The first thing you’ll want to do when you start using modular scale is configure it to meet your needs. This is done in the $modularscale map.
$modularscale: (
base: 1em,
ratio: 1.5
);You can use any unit you wish as your base and any ratio. Multiple bases can be defined for creating multi stranded scales. There is no limit here to the number of strands you use.
$modularscale: (
base: 1em 1.2em 1.6em,
ratio: 1.5
);Now that we have defined your scale, we can start using it anywhere. Simply call the ms(n) function where n is the point on the scale.
h4 {
font-size: ms(3);
}Occasionally you may wind up with conflicts. All critical components are name-spaced to avoid conflicts with other libraries. If you do run into a conflict, ms-function() is the no-conflict function.
Modular scale now supports different settings threads, so you can set up various threads to configure different ratios or breakpoints.
$modularscale: (
base: 1em,
ratio: 1.5,
a: (
ratio: 1.3
)
);To call the thread named a, call it in your function like so:
h5 {
font-size: ms(2, $thread: a);
}Your settings will cascade into the threads so no need to redefine a base or ratio if you want to re-use it from the main config.
If you wish to put breakpoints into your settings for use with responsive typography then there are helpers in place for this. Simply organize your config with breakpoint values from smallest to largest:
$modularscale: (
base: 12px,
ratio: 1.5,
400px: (
ratio: 1.2,
),
900px: (
base: 16px,
ratio: 1.3,
),
1200px: (
base: 16px,
ratio: 1.6,
),
);Note that you must use the same units for both your type and your breakpoints for this to work
This technique is based on Mike Riethmuller’s Precise control over responsive typography. A fantastic technique for fluidly scaling typography.
Then, call the mixin @include ms-respond(); and a fully fluid and responsive scale will be generated.
h2 {
@include ms-respond(font-size,5);
}If you do happen to have any values that are just named without numbers they will be ignored by the responsive mixin, it’s smart enough to just pull values that look like breakpoints.
Unfortunately Sass doesn’t natively support exponents. This isn’t all bad news, you can either use Compass, mathsass, or another library that has a pow() function that supports non-integer values and this plugin will pick up on that function and use it. You will then be able to write values like ms(2.5). This is also a prerequisite for target sizes below.
NOTE: Please see above section on non-integer values before using this feature
One of the more difficult parts of setting up your scales is finding a ratio that works for you. In many cases you know what size you want your text to be and what size you want larger headings to be. The at helper allows you to plug in a target size into the ratio value and it will generate your ratio.
$modularscale: (
base: 16px,
ratio: 42at5
);Now your base is 16px and when you call ms(5) it will be 42px. Everything in-between falls neatly on a scale created with these two values.
Modular scale includes functions for a number of classic design and musical scale ratios. You can add your own ratios as well.
By default ratio is set to $fifth.
| Function | Ratio | Decimal value |
|---|---|---|
| $phi | 1:1.618 | 1.618 |
| $golden | 1:1.618 | 1.618 |
| $double-octave | 1:4 | 4 |
| $major-twelfth | 1:3 | 3 |
| $major-eleventh | 3:8 | 2.667 |
| $major-tenth | 2:5 | 2.5 |
| $octave | 1:2 | 2 |
| $major-seventh | 8:15 | 1.875 |
| $minor-seventh | 9:16 | 1.778 |
| $major-sixth | 3:5 | 1.667 |
| $minor-sixth | 5:8 | 1.6 |
| $fifth | 2:3 | 1.5 |
| $augmented-fourth | 1:√2 | 1.414 |
| $fourth | 3:4 | 1.333 |
| $major-third | 4:5 | 1.25 |
| $minor-third | 5:6 | 1.2 |
| $major-second | 8:9 | 1.125 |
| $minor-second | 15:16 | 1.067 |
The MIT License (MIT)
Copyright © 2015 Scott Kellum (@scottkellum), Adam Stacoviak (@adamstac) and Mason Wendell (@codingdesigner)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.