While in the above steps I detailed and attached a quick, fast modular scale with Sass – I'm going to gift you with an easy Mixin for typography so it becomes real-time responsive, enlarging it, and becoming increasingly small while you manage the width of your browser.
The first thing is defining our breakpoint variables: I'm just using random values, feel free to change them as you like:
$breakpoints: ( 'large' : ( max-width: 600px ), 'medium' : ( max-width: 400px ), 'small' : ( max-width: 300px ) );
Then I'm declaring a font size value, a Golden Ratio scale and a line height-value (which I almost always forget to set, but I truly love the look and feel it gives to type):
@mixin type-size($sizeValue: 1.6, $lineHeight: $sizeValue) {
font-size: ($sizeValue * 10) + px;
font-size: ($sizeValue / 1.6) + rem;
line-height: ($lineHeight * 10) + px;
line-height: ($lineHeight / 1.6) + rem;
}Then I'm going to declare the mixin that will make the magic...