//// /// Typography ////
// Our variables //————————————- $base-font-name: -apple-system !default; $title-font-name: -apple-system !default; $base-font-family: $base-font-name, system, sans-serif !default; $title-font-family: $title-font-name, system, sans-serif !default;
$ratio: 1.20; $base: 1; $base-em: $base * 1em; $base-px: $base * 16px;
$ms0: 1; $ms1: $ratio; /* 1.2 */ $ms2: $ratio * $ms1; /* 1.44 */ $ms3: $ratio * $ms2; /* 1.728 */ $ms4: $ratio * $ms3; /* 2.074 */ $ms5: $ratio * $ms4; /* 2.488 */ $ms6: $ratio * $ms5; /* 2.986 */ $ms7: $ratio * $ms6; /* 3.583 */
$smaller: $base-em / $ms1; $normal: $base-em * $ms0; $bigger: $base-em * $ms1; $title3: $base-em * $ms2; $title2: $base-em * $ms3; $title1: $base-em * $ms4;
$line-height-base: $base * $ms2; $base-line: floor(($base-em * $line-height-base));
body {
font-family: $base-font-family; font-size: $base-em * $ms0; line-height: $base * $ms3; //font-size: calc(4vw + 4vh + 2vmin)
}
h3, h2 { line-height: $base * $ms1; } h1 { line-height: $base * $ms0; }
h6, .h6 { font-size: $smaller; } h5, .h5 { font-size: $normal; } h4, .h4 { font-size: $bigger; } h3, .h3 { font-size: $title3; } h2, .h2 { font-size: $title2; } h1, .h1 { font-size: $title1; }
- // Calculate progressive fontsize between 2 breapoint
-
insert the value of your breakpoint and of your 2 fontsize value for each breakpoint
// from fvsch.com/code/css-locks/ // css-tricks.com/between-the-lines/ @mixin csslock-fontsize($breakpoint-down:$breakpoint-down, $breakpoint-up:$breakpoint-up, $size-down:$size-down, $size-up:$size-up) {
font-size: calc( #{$size-down}em + ( (#{$size-up} - #{$size-down}) / #{$size-down} ) * (100vw - #{$breakpoint-down}rem) / (#{$breakpoint-up} - #{$breakpoint-down}) );
}
@media #{$medium-up} {
body { font-size: $base-em * $ms0; @include csslock-fontsize($medium,$large,$ms0,$ms1); }
}
@media #{$large-up} {
body { font-size: $base-em * $ms2; @include csslock-fontsize($large,$xlarge,$ms1,$ms2); }
}
@media #{$xlarge-up} {
body { font-size: $base-em * $ms3; @include csslock-fontsize($xlarge,$xxlarge,$ms2,$ms4); }
}
@media #{$xxlarge-up} {
body { font-size: $base-em * $ms4; @include csslock-fontsize($xxlarge,200,$ms4,$ms5); }
}
h1, .h1, h2, .h2, h3, .h3, label, legend {
@if $title-font-name { font-family: $title-font-family; }
}
h1, .h1, h2, .h2, h3, .h3 {
word-wrap: break-word; margin-top: $base-line; margin-bottom: ($base-line / 2); small, .small { font-size: 65%; }
}
h4, .h4, h5, .h5, h6, .h6 {
margin-top: ($base-line / 2); margin-bottom: ($base-line / 2); small, .small { font-size: 75%; }
}
h1,h2,h3,h4,h5,h6 {
color: currentColor; &,a,a:visited { color: currentColor; text-decoration: none; } a:hover { text-decoration: underline; }
}
p {
margin: 0 0 ($base-line / 2);
}