Last active
August 14, 2019 17:52
-
-
Save fardarter/a6b1a20bf77d83f4690a4924d0212c6a to your computer and use it in GitHub Desktop.
Font-Scaling Algorithm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // --------------------------- Font-scaling Algorithm ---------------------------- | |
| // For the general strategy: https://www.codementor.io/ricardozea/100-responsive-typography-system-using-a-modular-scale-s5rhft58g | |
| // Explanation contained herein: https://www.madebymike.com.au/writing/precise-control-responsive-typography/ | |
| // ------------- | |
| // Min and max viewport sizes to apply the font scaling | |
| $min_width: 320; | |
| $max_width: 1400; | |
| // -------------- | |
| // -------------- | |
| // Range of font size to apply | |
| $min_font: 13; | |
| $max_font: 18; | |
| // -------------- | |
| html { | |
| font-size: #{$min_font}px; | |
| } | |
| // -------------- | |
| // Media queries | |
| // ------------- | |
| @media (min-width: #{$min_width}px) and (max-width: #{$max_width}px) { | |
| html { | |
| font-size: calc( | |
| #{$min_font}px + (#{$max_font} - #{$min_font}) * | |
| ((100vw - #{$min_width}px) / (#{$max_width} - #{$min_width})) | |
| ); | |
| } | |
| } | |
| @media (min-width: #{$max_width}px) { | |
| html { | |
| font-size: #{$max_font}px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment