Tim Brown, Head of Typography at Adobe Typekit and co-developer of modularscale.com writes:
“By basing the dimensions of our compositions on values from modular scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers.”
More simply, Robert Bringhurst writes “don’t compose without a scale”. Is he talking about music or typgraphic design?
Tyfy follows Bringhurst’s advice and uses a modular scale for font size values.
Selecting a Modular Scale
The modular scale for your project depends on the value of two Tyfy variables: a base and a scalar (or ratio). The default value of these variables is defined in the core module.
$tyfont-size-base: 1rem !default;
$tyfont-size-scalar: 1.2 !default;The base of the scale is $tyfont-size-base (this is also the default font size for the <body> in Tyfy). Every step in the modular scale of font size values is calculated as a function of the base font size and the scalar: step font size = base × scalar(step), where step is the number of steps above or below the base value. The ratio between any two adjacent steps in the scale is the value of the scalar.
Using a modular scale for font sizes not only provides the visual harmony that Tim Brown described above, but also consistent and effective visual contrast between elements with different text sizes. The modular scale also takes the mystery out of how to select font sizes for elements like headings, subheadings, and pull quotes.
The tyscale Function
Tyfy provides a modular scale function that makes it easy to assign font size values based the modular scale. No math required! The function is named tyscale and is defined in the functions module.
@function tyscale($exponent:0) {
$i:0;
$scale:$tyfont-size-base;
@if $exponent < 0 {
@while $i > $exponent {
$scale:$scale/$tyfont-size-scalar;
$i:$i - 1;
}
}
@else if $exponent > 0 {
@while $i < $exponent {
$scale:$scale*$tyfont-size-scalar;
$i:$i + 1;
}
}
@return $scale;
}The tyscale function accepts an integer argument and returns a font size value. The integer argument specifies the number of steps up or down the modular scale from the base font size.
This function is used in Tyfy to set all font size values. For example:
small {
font-size: tyscale(-1) !default; // 0.833rem; one scale step down from the base size
}
h6 {
font-size: tyscale(0) !default; // 1rem; using 0 as the exponent is the same as setting the value to the base size
}
h5 {
font-size: tyscale(1) !default; // 1.2rem; one scale step up from the base size
}
h4 {
font-size: tyscale(2) !default; // 1.44rem; two scale steps up from the base size
}
[...]Since all font sizes in Tyfy are based on the modular scale, you can quickly change every element’s font size by modifying either the base size or the scalar value. In this way you can fine-tune the typographic design of your project.