.sans, strong {
      font-family:'PPTelegraf';
      font-weight: normal;
      font-style: normal;
}
  
  .serif {
      font-family:'PPEiko';
      font-weight: 100;
      font-style: normal;
  }
  
  .xlarge {
      font-size: 3vw;
      font-weight: 100;
      font-style: normal;
      line-height: 3vw;
  }
  
  .large {
      font-size: 2vw;
      font-weight: 100;
      font-style: normal;
      line-height: 2vw;
  }
  
  .med {
      font-size: 1.48vw;
      font-weight: normal;
      font-style: normal;
      line-height: 1.68vw;
  }
  
  .small {
      
      font-size: 1vw;
      font-weight: normal;
      font-style: normal;
      line-height: 1.2vw;
  }
  

@media screen and (min-width: 140px) and (max-width: 600px) {

    .sans {
        font-family:'PPTelegraf';
        font-weight: normal;
        font-style: normal;
    }
    
    .serif {
        font-family:'PPEiko';
        font-weight: 100;
        font-style: normal;
    }
    
    .xlarge {
        font-size: 6vw;
        font-weight: 100;
        font-style: normal;
        line-height: 6vw;
    }
    
    .large {
        font-size: 5vw;
        font-weight: 100;
        font-style: normal;
        line-height: 5vw;
    }
    
    .med {
        font-size: 4.48vw;
        font-weight: normal;
        font-style: normal;
        line-height: 4.68vw;
    }
    
    .small {
        font-size: 3vw;
        font-weight: normal;
        font-style: normal;
        line-height: 3.4vw;
    }
}