feat: add line-height ratio (#18)

because:
- usually, big font-sizes do have a smaller line-height (in
relation to the font-size) than “normal” font-sizes do

this commit:
- introduces a new Sass variable to control the ratio with which
the line-height gets decreased, the bigger the font-size is

Author: csshugs

README.md

@@ -193,6 +193,16 @@ You can define an ideal line-height that is taken into account when calculating
 $FLUIDMS-GLOBAL-LINE-HEIGHT: 1.5 !default;
 ```
 
+### Changing the global line-height ratio
+
+The bigger font-sizes get, the lesser the line-height needs to be in relation to its font-size. Hence, we provide an option to decrease the line-height in proportion to the font-size, the bigger the font-size gets.
+
+```scss
+$FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
+```
+
+Don’t get crazy with this variable’s value! Only nudge the ratio slightly and always test all the possible font-sizes with multiline text.
+
 ### Configure the Fluid Typography values
 
 With Fluid Typography, you basically define a viewport range in which all the font-sizes are fluid, i.e. the font-sizes are sized according to the viewport size — if the viewport size is small, the font-size is too. If the viewport size is large, so is the font-size.

src/settings/_settings.config.scss

@@ -25,6 +25,13 @@ $FLUIDMS-GLOBAL-BASELINE: 0.25rem !default;
 ///   $FLUIDMS-GLOBAL-LINE-HEIGHT: 1.35 !default
 $FLUIDMS-GLOBAL-LINE-HEIGHT: 1.5 !default;
 
+/// Define the ratio with which the line-height is decreased relatively for
+/// larger font-sizes. That is, the calculated line-height value is getting
+/// smaller in ralation to the font-size, the bigger the font-size gets.
+///
+/// @type number
+$FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
+
 /// Hold all the relevant settings for Fluid Typography.
 ///
 /// @prop {length (in `px`)} min-font-size [16px] - Defines the font-size at

src/tools/_tools.line-height.scss

@@ -21,7 +21,7 @@
 ///   our `$FLUIDMS-GLOBAL-BASELINE`.
 @function fluidms-line-height($scale, $ratio) {
     // Calculate the default line-height (in `rem`).
-    $_default-line-height: (fluidms-pow($ratio, $scale)) * $FLUIDMS-GLOBAL-LINE-HEIGHT;
+    $_default-line-height: (fluidms-pow($ratio, $scale)) * ($FLUIDMS-GLOBAL-LINE-HEIGHT / fluidms-pow($FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO, $scale));
     // Get the “offset” of the vertical grid.
     $_remainder: $_default-line-height;
     @while $_remainder >= fluidms-strip-unit($FLUIDMS-GLOBAL-BASELINE) {