Font Sizing Generator

font-sizing

/* 
 *  CONSTRUCT
 *  Font Sizing Generator
 *
 *  BY: EGSTAD
 */


    // You may use px, pt, em, and rem's. No percentages here.
$font-size: 1em;
    // Feel free to use any number above 1.0 that you like!
$font-scale: 1.618; // WOW FIBONACCI!


@mixin text-size($level: 0, $increments: 4) {

    /*
     *  2 ARGUMENTS
     * 
     *  1.  $level
     *      -
     *      Accepts numeric values. Negatives are fine.
     *      If increments are too few, you'll lower your range and dive into negative numbers.
     *
     *  2.  $increments
     *      -
     *      Increments set how exaggerated the scaling takes affect.
     */

    @if $level == 0 {
        // set 0 as default font size
        font-size: $font-size;
    }
    @else if $level < 1 {
        // if $level is less than 1, include more increments (by dividing current increments in half)
        // this is so that you get less exaggerated steps
        font-size: ((($font-size * $level) * $font-scale) / ($increments / 0.5)) + $font-size;
    }
    @else {
        // otherwise, run below equation to create steps
        font-size: ((($font-size * $level) * $font-scale) / $increments) + $font-size;
    }
}