modularscale-sass/libsass/public/css/main.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: ms-round-px(1em); }

h1 {
  font-size: ms-round-px(3.71293em);
  line-height: 1; }
  @media (min-width: 20em) and (max-width: 60em) {
    h1 {
      font-size: calc( ms-round-px(3.71293em) + ms-round-px(10.48576em)/ms-round-px(10.48576em)-ms-round-px(10.48576em)1-ms-round-px(3.71293em)/ms-round-px(3.71293em)-ms-round-px(3.71293em)1 * ( ( 100vw - 20em) / 40 )); } }
  @media (min-width: 60em) {
    h1 {
      font-size: ms-round-px(10.48576em); } }

h2 {
  font-size: ms-round-px(2.8561em);
  line-height: 1; }
  @media (min-width: 20em) and (max-width: 60em) {
    h2 {
      font-size: calc( ms-round-px(2.8561em) + ms-round-px(6.5536em)/ms-round-px(6.5536em)-ms-round-px(6.5536em)1-ms-round-px(2.8561em)/ms-round-px(2.8561em)-ms-round-px(2.8561em)1 * ( ( 100vw - 20em) / 40 )); } }
  @media (min-width: 60em) {
    h2 {
      font-size: ms-round-px(6.5536em); } }

h3 {
  font-size: ms-round-px(2.197em);
  line-height: 1; }
  @media (min-width: 20em) and (max-width: 60em) {
    h3 {
      font-size: calc( ms-round-px(2.197em) + ms-round-px(4.096em)/ms-round-px(4.096em)-ms-round-px(4.096em)1-ms-round-px(2.197em)/ms-round-px(2.197em)-ms-round-px(2.197em)1 * ( ( 100vw - 20em) / 40 )); } }
  @media (min-width: 60em) {
    h3 {
      font-size: ms-round-px(4.096em); } }

h4 {
  font-size: ms-round-px(1.69em);
  line-height: 1; }
  @media (min-width: 20em) and (max-width: 60em) {
    h4 {
      font-size: calc( ms-round-px(1.69em) + ms-round-px(2.56em)/ms-round-px(2.56em)-ms-round-px(2.56em)1-ms-round-px(1.69em)/ms-round-px(1.69em)-ms-round-px(1.69em)1 * ( ( 100vw - 20em) / 40 )); } }
  @media (min-width: 60em) {
    h4 {
      font-size: ms-round-px(2.56em); } }

h5 {
  font-size: ms-round-px(1.3em);
  line-height: 1; }
  @media (min-width: 20em) and (max-width: 60em) {
    h5 {
      font-size: calc( ms-round-px(1.3em) + ms-round-px(1.6em)/ms-round-px(1.6em)-ms-round-px(1.6em)1-ms-round-px(1.3em)/ms-round-px(1.3em)-ms-round-px(1.3em)1 * ( ( 100vw - 20em) / 40 )); } }
  @media (min-width: 60em) {
    h5 {
      font-size: ms-round-px(1.6em); } }

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