Readable responsive typography.

flextype.css

.content {
  font-size: 1.2rem;
  line-height: 1.5; }
  @media (min-width: 800px) and (max-width: 900px) {
    .content {
      font-size: 1.4rem; } }
  @media (min-width: 1000px) {
    .content {
      font-size: 1.8rem;
      line-height: 1.3; } }

@media (min-width: 200px) and (max-width: 300px) {
  .content--tweaks {
    font-size: 1rem; } }
@media (min-width: 350px) and (max-width: 500px) {
  .content--tweaks {
    font-size: 1.1rem; } }
@media (min-width: 600px) and (max-width: 710px) {
  .content--tweaks {
    font-size: 1.4rem; } }

flextype.scss

// ----
// libsass (v3.1.0)
// ----

// breakpoints
// These are min and max values in any unit.
// Must be seperated with a space.
// No min or no max must be declared as null.
$s: null null;
$m: 800px 900px;
$l: 1000px null;


// at-breakpoint takes a space seperated list
// (must be two values) and creates 'inline'
// media query @content wrappers
@mixin at-breakpoint($min,$max:null){
    @if($max == null and $min != null){
        @media (min-width: $min){
            @content;
        }
    } @elseif($min == null and $max == null) {
        @content;
    } @else{
         @media (min-width: $min) and (max-width: $max){
            @content;
        }
    }
}


// Flextype
// Takes an arglist of mediaqueries, font sizes 
// and line heights and outputs different sizes
// at different breakpoints.
@mixin flextype($type_styles...){
    @each $val in $type_styles {
    
        $mq_combined: nth($val,1);
        $mq_min: nth(nth($val,1),1);
        $mq_max: nth(nth($val,1),2);
    
        @if length($val) == 1 {
            @error "Not enough arguments";
        } @else if length($val) == 2 {
            @include at-breakpoint($mq_min, $mq_max){
                font-size: nth($val,2);
            }
        } @else if length($val) == 3 {
            @include at-breakpoint($mq_min, $mq_max){
                font-size: nth($val,2);
                line-height: nth($val,3);
            }
        } @else if length($val) > 3 {
            @error "Too many arguments";
        }
    }
}

// Usage Example
// Changes font-size and line-height at multiple
// breakpoints.

// Flextypes takes multiple arguments seperated by spaces
// but each of these arguments each contain their own
// args (seperated by spaces).
// This may seem odd but is similar to how you add multiple 
// value declatations (like multiple box shadows) in CSS.
.content{
  @include flextype(
    $s 1.2rem 1.5, 
    $m 1.4rem, 
    $l 1.8rem 1.3 
  );
}

// 'Tweakpoint' usage example
//
// Sometimes you need to make typography changes between 
// your pre defined breakpoints (tweakpoints). You can easily
// Do this using flextype:
.content--tweaks{
  @include flextype(
    (200px 300px) 1rem,
    (350px 500px) 1.1rem,
    (600px 710px) 1.4rem
  );
}