//// /// 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);

}