Last active
January 15, 2018 12:32
-
-
Save doubleedesign/45850d90c80deef79880361f984a3136 to your computer and use it in GitHub Desktop.
SCSS mixins to easily utilise the proportional type settings chosen using type-scale.com. Note: I have since created a more streamlined version of this: https://gist.github.com/doubleedesign/5a9321bceb4c7f5668c12bc668b9b796
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
| /*============================================== | |
| TYPE SCALES - www.type-scale.com | |
| Note: the base font size and line height is set under "set the body font" in _typography.scss, | |
| Paragraph margins don't change according to type scale used so they are set once in _typography.scss | |
| The base font size can be changed at different breakpoints and the type will scale accordingly since it's set in ems. | |
| ==============================================*/ | |
| @mixin use-type-scales { | |
| p, | |
| main ul, | |
| main ol, | |
| article ul, | |
| article ol { | |
| margin-bottom: 1.3em; | |
| } | |
| } | |
| @mixin minor-second { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 1.296em; | |
| } | |
| h2 {font-size: 1.215em;} | |
| h3 {font-size: 1.138em;} | |
| h4 {font-size: 1.067em;} | |
| small {font-size: 0.937em;} | |
| } | |
| @mixin major-second { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 1.602em; | |
| } | |
| h2 {font-size: 1.424em;} | |
| h3 {font-size: 1.266em;} | |
| h4 {font-size: 1.125em;} | |
| small {font-size: 0.889em;} | |
| } | |
| @mixin minor-third { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 2.074em; | |
| } | |
| h2 {font-size: 1.728em;} | |
| h3 {font-size: 1.44em;} | |
| h4 {font-size: 1.2em;} | |
| small {font-size: 0.833em;} | |
| } | |
| @mixin major-third { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 2.441em; | |
| } | |
| h2 {font-size: 1.953em;} | |
| h3 {font-size: 1.563em;} | |
| h4 {font-size: 1.25em;} | |
| small {font-size: 0.8em;} | |
| } | |
| @mixin perfect-fourth { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 3.157em; | |
| } | |
| h2 {font-size: 2.369em;} | |
| h3 {font-size: 1.777em;} | |
| h4 {font-size: 1.333em;} | |
| small {font-size: 0.75em;} | |
| } | |
| @mixin augmented-fourth { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 3.998em; | |
| } | |
| h2 {font-size: 2.827em;} | |
| h3 {font-size: 1.999em;} | |
| h4 {font-size: 1.414em;} | |
| } | |
| @mixin perfect-fifth { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 5.063em; | |
| } | |
| h2 {font-size: 3.375em;} | |
| h3 {font-size: 2.25em;} | |
| h4 {font-size: 1.5em;} | |
| small {font-size: 0.667em;} | |
| } | |
| @mixin golden-ratio { | |
| h1, h2, h3, h4 { | |
| margin: 1.414em 0 0.5em; | |
| line-height: 1.2; | |
| } | |
| h1 { | |
| margin-top: 0; | |
| font-size: 6.854em; | |
| } | |
| h2 {font-size: 4.236em;} | |
| h3 {font-size: 2.618em;} | |
| h4 {font-size: 1.618em;} | |
| small {font-size: 0.618em;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment