Mixin for responsive (relative) font-sizes depending on the screen size using media queries.

typography.sass

/*
Mixin for responsive (relative) font-sizes depending on the screen size using media queries. 

This is width based, but you can easily adjust it for more complex, or simple, checking. 

Set the base as you max size, then I divided everything into tenths of the base.

To use, simply include the mixin, passing it the font-size that you'd want to see at 100%. 
This should then scale nicely along in tenths. If you need more detail, just add more elements to the level list.

Oh, and this requires SASS 3.2 (and higher?)

See the compiled (debugged) code below.
*/
@mixin flexy-font($fontsize){
  $base: 1200px;
  @media (min-width: $base){
    font-size: $fontsize;
  }

  @each $factor in 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1 {
    @media (max-width: $base * $factor){
      font-size: $fontsize * $factor;
    }
  }
}

/* Usage */
body{
   @include flexy-font(20px);
}

h1{
   @include flexy-font(40px);
}

ze_compiled.css

/* Usage */
/* line 26, ../../app/assets/stylesheets/typography.css.scss */
@media (min-width: 1200px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 20px;
  }
}
@media (max-width: 1080px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 18px;
  }
}
@media (max-width: 960px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 16px;
  }
}
@media (max-width: 840px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 14px;
  }
}
@media (max-width: 720px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 8px;
  }
}
@media (max-width: 360px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 6px;
  }
}
@media (max-width: 240px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 4px;
  }
}
@media (max-width: 120px) {
  /* line 26, ../../app/assets/stylesheets/typography.css.scss */
  body {
    font-size: 2px;
  }
}

/* line 30, ../../app/assets/stylesheets/typography.css.scss */

@media (min-width: 1200px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 40px;
  }
}
@media (max-width: 1080px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 36px;
  }
}
@media (max-width: 960px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 32px;
  }
}
@media (max-width: 840px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 28px;
  }
}
@media (max-width: 720px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 16px;
  }
}
@media (max-width: 360px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 12px;
  }
}
@media (max-width: 240px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 8px;
  }
}
@media (max-width: 120px) {
  /* line 30, ../../app/assets/stylesheets/typography.css.scss */
  h1 {
    font-size: 4px;
  }
}