Using Modular Text

A mixin allows you to declare modular font sizes on text elements very easily. All you do is declare which level you want.

Basic Usage

@include type-modular(zeta);

Would yeild font-sizes in REMs with a Pixel fallback at 16px, complete with margins and line-heights calculated based on other settings in the _config-typography.scss file. These can however be over ridden on demand. The following is a complete example:

@include type-modular(delta, 0px, 24px, 1.25, false);

This will use the Delta step, set the top margin of the element to 0px, the bottom margin to 24px, overrides the $global-linehight to a value 1.25 and finally sets wether or not to use a unit less line-height. If you just want to use a step and change the default margins, declaring this is enough:

@include type-modular(delta, 0px, 24px);

Steps

When using the modular text mixin, these steps effect the scaling of the text up and down the scale. The mid point (aka the value of $base-font-size) is $modular-step-zeta. This should be left at 0. Negative values step down from the $base-font-size. This is useful for stuff like small tags and sup and sub.

You can alter the stepping by changing the following variables:

$modular-step-alpha: 5;
$modular-step-beta: 4;
$modular-step-gamma: 3;
$modular-step-delta: 2;
$modular-step-epsilon: 1;
$modular-step-zeta: 0;
$modular-step-eta: -1;
$modular-step-theta: -2;
$modular-step-iota: -3;