The first and last examples demonstrate fixed modular scales. The first examples is a modular scale of 1.067 and is more appropiate for small screens. The bottom example is a modular scale of 1.333 and better suited to wide screen displays.
The middle example is unique and implements a fluid modular scale. Perfect on any screen size.
| <h1>Fluid modular scale headings</h1> | |
| <p>These heading scale between a modular scale of 1.067 and 1.333. Resize the window to see the effect.</p> | |
| <hr> | |
| <div class="mod_scale_fluid"> | |
| <h1>Fluid modular scale</h1> | |
| <h2>Fluid modular scale</h2> | |
| <h3>Fluid modular scale</h3> | |
| <h4>Fluid modular scale</h4> | |
| <h5>Fluid modular scale</h5> | |
| </div> |
| $mod_1: 1.067; | |
| $mod_2: 1.333; | |
| @function strip-unit($value) { | |
| @return $value / ($value * 0 + 1); | |
| } | |
| @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) { | |
| $u1: unit($min-vw); | |
| $u2: unit($max-vw); | |
| $u3: unit($min-font-size); | |
| $u4: unit($max-font-size); | |
| @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { | |
| & { | |
| font-size: $min-font-size; | |
| @media screen and (min-width: $min-vw) { | |
| font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); | |
| } | |
| @media screen and (min-width: $max-vw) { | |
| font-size: $max-font-size; | |
| } | |
| } | |
| } @else { | |
| @error "Detected mixed units. Please use the same units for all parameters."; | |
| } | |
| } | |
| h1,h2,h3,h4,h5,h6 { padding: 0; margin: 0.5rem 0; line-height: 1.5;} | |
| .mod_scale_fluid{ | |
| h1{ font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem} | |
| h2{ font-size: $mod_1*$mod_1*$mod_1 *1rem} | |
| h3{ font-size: $mod_1*$mod_1 *1rem} | |
| h4{ font-size: $mod_1 *1rem} | |
| h5{ font-size: 1rem} | |
| h6{ font-size: 1/$mod_1 *1rem} | |
| h1{ | |
| @include fluid-type(37.5rem, 80rem, $mod_1*$mod_1*$mod_1*$mod_1 *1rem, $mod_2*$mod_2*$mod_2*$mod_2 *1rem); | |
| } | |
| h2{ | |
| @include fluid-type(37.5rem, 80rem, $mod_1*$mod_1*$mod_1 *1rem, $mod_2*$mod_2*$mod_2 *1rem); | |
| } | |
| h3{ | |
| @include fluid-type(37.5rem, 80rem, $mod_1*$mod_1 *1rem, $mod_2*$mod_2 *1rem); | |
| } | |
| h4{ | |
| @include fluid-type(37.5rem, 80rem, $mod_1 *1rem, $mod_2 *1rem); | |
| } | |
| h5{ | |
| @include fluid-type(37.5rem, 80rem, 1rem, 1rem); | |
| } | |
| h6{ | |
| @include fluid-type(37.5rem, 80rem, 1/$mod_1 *1rem, 1/$mod_2 *1rem); | |
| } | |
| } | |
| body{ | |
| width: 80%; | |
| margin: 0 auto; | |
| } |