Font scale sass

You want to customize your Sass typographic scale but get tired of finding out how to have a great design scale? Then this module's gonna help you a lot ~

It provides a preset font size for your footnote, endnote, caption, body, blockquote, and headings (from h6 to h1).

Acknowledgement

The module refers to the following great articles and projects. For a better understanding of how the typography works (typically what's behind this module), you can try spending time reading them as a small research:

• layoutgridcalculator.com by Ti'kuto Design Studio, for the typographic scale calculating system.
• Typographic Scale by Simonsen Spencer, for the typographic scale formula.

The result given by the module has a deviation with the layoutgridcalculator ones in around 0.01 - 0.02 (em)

Quick start

Install

You can install the module by one of the following way:

• NPM

npm install fontscale-sass --save-dev

• Yarn

yarn add fontscale-sass --dev

• PNPM

pnpm add -D fontscale-sass

• Manually
  • Download the latest release here

Deal with the folder

After installing successfully, go to the directory where the module located:

• For npm/yarn/pnpm, you can find the folder named fontscale-sass in node_modules folder.
• For manually download, you can find the unzipped Font-scale-sass-{tag} folder.

Go to that folder and pick up the font-scale folder which have the below file structure:

font-scale
  |
  |-- utils
  |     |-- _common.scss
  |     |-- _constant.scss
  |     |-- _index.scss
  |
  |-- _index.scss

You can choose how to deal with the folders by one of the following ways:

• Place the folder at your project's root stylesheet directory
• Use --load-path for dart sass compiling command

  sass --load-path=path/to/font-scale style.scss style.css

Import the module

@use 'font-scale';

or

@use 'font-scale' as *;

Usage

The font-scale module provides only one API to you:

@mixin createTypoScale($unit: 'em', $ratio: 'classical', $steps: 'pentatonic', $composition: 'fibonacci')

Parameters

• $unit: Represent the css font-size unit that will be rendered. Default: 'em'

  | Unit | Value | |---------|-------| | 'pica' | 1em | | 'em' | 1em | | 'rem' | 1rem | | 'px' | 16px | | 'pixel' | 16px |

• $ratio: The ratio in a typographic scale. Default: 'classical'

  | Ratio | Value | |-------------|-------| | 'classical' | 2 | | 'golden' | 1.618 |

• $steps: The number of steps for each interval. An interval in the classical typography is defined as 6->12, 12->24, etc... Default: 'pentatonic'

  | Step | Value | |---------------|-------| | 'monotonic' | 1 | | 'ditonic' | 2 | | 'tritonic' | 3 | | 'tetratonic' | 4 | | 'pentatonic' | 5 | | 'hexatonic' | 6 | | 'heptatonic' | 7 | | 'octatonic' | 8 | | 'chromatic' | 12 |

• $composition: Type of the composition number series. Default: 'fibonacci'

  | Composition | |---------------------| | 'fibonacci' | | 'lucas' | | 'pentagonal' | | 'triangular number' |

Return

By default, the following css elements will be rendered

.footnote {
  font-size: 0.66em;
}

.endnote {
  font-size: 0.758em;
}

.caption {
  font-size: 0.758em;
}

body {
  font-size: 1em;
}

blockquote {
  font-size: 1em;
}

h6 {
  font-size: 1em;
}

h5 {
  font-size: 1.149em;
}

h4 {
  font-size: 1.32em;
}

h3 {
  font-size: 1.741em;
}

h2 {
  font-size: 2.639em;
}

h1 {
  font-size: 5.278em;
}

Example

Generate the typographic scale in golden ratio, pentatonic steps and fibonacci composition

@use 'fontscale-sass' as *;

// Pentatonic steps and fibonacci composition is default
@include createTypoScale($ratio: 'golden');