├── LICENSE ├── css └── scale.css ├── index.html ├── readme.md └── scss ├── _mixins.scss ├── _setup.scss └── scale.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Alejandro Urrutia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/scale.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 375px) { 2 | p { 3 | font-size: 12px; 4 | font-size: 0.75rem; 5 | line-height: 1.5; 6 | } 7 | h6 { 8 | font-size: 12px; 9 | font-size: 0.75rem; 10 | line-height: 1.5; 11 | } 12 | h5 { 13 | font-size: 14px; 14 | font-size: 0.875rem; 15 | line-height: 1.5; 16 | } 17 | h4 { 18 | font-size: 17px; 19 | font-size: 1.0625rem; 20 | line-height: 1.5; 21 | } 22 | h3 { 23 | font-size: 20px; 24 | font-size: 1.25rem; 25 | line-height: 1.5; 26 | } 27 | h2 { 28 | font-size: 24px; 29 | font-size: 1.5rem; 30 | line-height: 1.5; 31 | } 32 | h1 { 33 | font-size: 29px; 34 | font-size: 1.8125rem; 35 | line-height: 1.5; 36 | } 37 | } 38 | 39 | @media screen and (min-width: 376px) { 40 | p { 41 | font-size: 16px; 42 | font-size: 1rem; 43 | line-height: 1.25; 44 | } 45 | h6 { 46 | font-size: 16px; 47 | font-size: 1rem; 48 | line-height: 1.25; 49 | } 50 | h5 { 51 | font-size: 21px; 52 | font-size: 1.3125rem; 53 | line-height: 1.25; 54 | } 55 | h4 { 56 | font-size: 28px; 57 | font-size: 1.75rem; 58 | line-height: 1.25; 59 | } 60 | h3 { 61 | font-size: 37px; 62 | font-size: 2.3125rem; 63 | line-height: 1.25; 64 | } 65 | h2 { 66 | font-size: 49px; 67 | font-size: 3.0625rem; 68 | line-height: 1.25; 69 | } 70 | h1 { 71 | font-size: 65px; 72 | font-size: 4.0625rem; 73 | line-height: 1.25; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SCSScale demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Headline 1

15 |

Headline 2

16 |

Headline 3

17 |

Headline 4

18 |

Headline 5

19 |

Headline 6

20 |

Potui habeo visus ens mea. An vi re continetur me familiarem negationem. Rei inveniri jam viderunt subducam tam imponere jam. Sub cui more ipsi meum. Ei im patiatur ha an utcunque vestibus. Duo dum enim cui vera tunc. Sed permiscent suo supponatur via diversitas perfectius asseverent satyriscos. Ullam debet vetus cur verae cerae meo. Ad an tactio pendeo certus accepi missae quarum.

21 | 22 |

Qua effecerit praestare praefatio rea attentius scientiis. Rea perfectior advertebam sub perfectius. Cau multi scopo atqui his fingi. Eo quae vidi ha ii ea alia. Terminari cau tantaeque opportune adjuvetis tot usurpabam formantur. Faciendam quaeretur praeclare sex tam praeterea conceptum subjectum.

23 | 24 |

Putarem quodque tamquam ii ob an deumque. Fuerint judicia me assequi sapores ab verarum. Veniebant sex videbatur assignare eas una corporeis alligatus. Oculis nondum fusius sub ens urgeat fuerit rea sum. Eo ex deumque reddere publice ea similes attinet. Sensuum ac gi fallant incipit. Nullis carnem tam fal existi haereo mei sacras ipsius. Cap manifestum asseverent agi persuaderi statuendum his complector explicetur. Passim vestes maxime pulses animus id ii. Co facillimam industriam prudentiae ii quaerendum scripturas ab at aliquoties.

25 | 26 |

Ex illos et re fingi solis omnem. Tantundem fit potestate deo cum confidere distincta summopere. Dura mali tam rom nemo deum fiat. Quasi modos mea totos tanto eae. Nos sed indefinite cogitantem aliquandiu excogitent fit hic. Veritatis fidelibus cau potestate vel praeclare purgantur est. Vel sic hae hic potentiali quaestione praecipuas cohaereant.

27 | 28 |

Im naturales de eundemque ad inspectio ii. Persuadeor hic credidisse una sex intellectu pro. Saepe de quare opere et libet se ii utens. Credibile acquirere et co archimede. Via adjuvetis eam res videbatur generalia colligere. Ab huic fere at addo an soli.

29 | 30 | 31 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # SCSScale 2 | Typographic modular scale starter based on body's font-size built on SCSS. 3 | Font-size calculated in rem with a fallback integer number in pixels and line-height in number (unitless). 4 | 5 | ## How to 6 | 1. Open **scss/setup.scss**. 7 | 2. Edit the values for $body, $ratio, $lineHeight for both Desktop and Mobile. 8 | 3. Save and compile. 9 | 10 | **Credit**: 11 | [oocss](https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_fontSize.scss) by [@stubbornella](https://github.com/stubbornella) 12 | 13 | **Source**: 14 | [A modern scale for web typography](http://typecast.com/blog/a-more-modern-scale-for-web-typography) 15 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Function for converting a px based font-size to rem. 2 | @function calculateRem($size) { 3 | $remSize: $size / 16px; 4 | //Default font size on html element is 100%, equivalent to 16px; 5 | @return #{$remSize}rem; 6 | } 7 | @function calculateNum($lheight) { 8 | $numSize: $lheight; 9 | //Default font size on html element is 100%, equivalent to 16px; 10 | @return #{$numSize}; 11 | } 12 | 13 | // Mixin that will include the fall back px declaration as well as the calculated rem value. 14 | @mixin fontSize($size) { 15 | font-size: $size; 16 | font-size: calculateRem($size); 17 | } 18 | @mixin lineHeight($lheight) { 19 | line-height: calculateNum($lheight); 20 | } 21 | -------------------------------------------------------------------------------- /scss/_setup.scss: -------------------------------------------------------------------------------- 1 | //// Modular scale ratios 2 | $MinorSecond: 1.067; 3 | $MajorSecond: 1.125; 4 | $MinorThird: 1.2; 5 | $MajorThird: 1.25; 6 | $PerfectFourth: 1.3334; 7 | $AugmentedFourth: 1.414; 8 | $PerfectFifth: 1.5; 9 | $GoldenRatio: 1.618; 10 | $MajorSixth: 1.667; 11 | $MinorSeventh: 1.778; 12 | $MajorSeventh: 1.875; 13 | $Octave: 2; 14 | $MajorTenth: 2.5; 15 | $MajorEleventh: 2.667; 16 | $MajorTwelfth: 3; 17 | $Pi: 3.1416; 18 | 19 | // body font-size in pixels for Desktops 20 | $body: 16px; 21 | $ratio: $PerfectFourth; 22 | $lineHeight: $MajorThird; 23 | 24 | // body font-size in pixels for Mobiles 25 | $mbody: 12px; 26 | $mratio: $MinorThird; 27 | $mlineHeight: $PerfectFifth; 28 | 29 | 30 | //// Breakpoints 31 | 32 | $break-mobile: 375px; 33 | $break-desktop: 376px; 34 | -------------------------------------------------------------------------------- /scss/scale.scss: -------------------------------------------------------------------------------- 1 | @import 'setup'; 2 | @import 'mixins'; 3 | 4 | //// Desktop 5 | // Calculation 6 | 7 | $p: round($body); 8 | $h6: round($body); 9 | $h5: round($h6*$ratio); 10 | $h4: round($h5*$ratio); 11 | $h3: round($h4*$ratio); 12 | $h2: round($h3*$ratio); 13 | $h1: round($h2*$ratio); 14 | 15 | 16 | // Line Height 17 | $lh-p: $lineHeight; 18 | $lh-h1: $lineHeight; 19 | $lh-h2: $lineHeight; 20 | $lh-h3: $lineHeight; 21 | $lh-h4: $lineHeight; 22 | $lh-h5: $lineHeight; 23 | $lh-h6: $lineHeight; 24 | 25 | //// Mobile 26 | // Calculation 27 | 28 | $mp: round($mbody); 29 | $mh6: round($mbody); 30 | $mh5: round($mh6*$mratio); 31 | $mh4: round($mh5*$mratio); 32 | $mh3: round($mh4*$mratio); 33 | $mh2: round($mh3*$mratio); 34 | $mh1: round($mh2*$mratio); 35 | 36 | // Line Height 37 | $mlh-p: $mlineHeight; 38 | $mlh-h1: $mlineHeight; 39 | $mlh-h2: $mlineHeight; 40 | $mlh-h3: $mlineHeight; 41 | $mlh-h4: $mlineHeight; 42 | $mlh-h5: $mlineHeight; 43 | $mlh-h6: $mlineHeight; 44 | 45 | // Calculation 46 | 47 | @media screen and (max-width: $break-mobile) { 48 | 49 | p { @include fontSize($mbody); 50 | @include lineHeight($mlh-p); } 51 | h6 { @include fontSize($mh6); 52 | @include lineHeight($mlh-h6); } 53 | h5 { @include fontSize($mh5); 54 | @include lineHeight($mlh-h5); } 55 | h4 { @include fontSize($mh4); 56 | @include lineHeight($mlh-h4); } 57 | h3 { @include fontSize($mh3); 58 | @include lineHeight($mlh-h3); } 59 | h2 { @include fontSize($mh2); 60 | @include lineHeight($mlh-h2); } 61 | h1 { @include fontSize($mh1); 62 | @include lineHeight($mlh-h1); } 63 | } 64 | @media screen and (min-width: $break-desktop) { 65 | 66 | p { @include fontSize($body); 67 | @include lineHeight($lh-p); } 68 | h6 { @include fontSize($h6); 69 | @include lineHeight($lh-h6); } 70 | h5 { @include fontSize($h5); 71 | @include lineHeight($lh-h5); } 72 | h4 { @include fontSize($h4); 73 | @include lineHeight($lh-h4); } 74 | h3 { @include fontSize($h3); 75 | @include lineHeight($lh-h3); } 76 | h2 { @include fontSize($h2); 77 | @include lineHeight($lh-h2); } 78 | h1 { @include fontSize($h1); 79 | @include lineHeight($lh-h1); } 80 | } 81 | --------------------------------------------------------------------------------