modularscale-sass/test-compass/css/style.css

A tool to help web designers size their type in a more meaningful way.

body {
  line-height: 1.3;
  margin: 0 auto;
  padding: 10% 5% 50%;
  max-width: 42em;
  font-size: 1em;
}

h1 {
  font-size: 1.3em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h1 {
    font-size: calc( 1.3em + 0.7 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h1 {
    font-size: 2em;
  }
}

h2 {
  font-size: 1.23354em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h2 {
    font-size: calc( 1.23354em + 0.50756 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h2 {
    font-size: 1.7411em;
  }
}

h3 {
  font-size: 1.17049em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h3 {
    font-size: calc( 1.17049em + 0.34523 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h3 {
    font-size: 1.51572em;
  }
}

h4 {
  font-size: 1.11065em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h4 {
    font-size: calc( 1.11065em + 0.20886 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h4 {
    font-size: 1.31951em;
  }
}

h5 {
  font-size: 1.05387em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h5 {
    font-size: calc( 1.05387em + 0.09482 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h5 {
    font-size: 1.1487em;
  }
}

h6 {
  font-size: 1em;
  line-height: 1;
}
@media (min-width: 20em) and (max-width: 60em) {
  h6 {
    font-size: calc( 1em + 0 * ( ( 100vw - 20em) / 40 ) );
  }
}
@media (min-width: 60em) {
  h6 {
    font-size: 1em;
  }
}