example of viewport based type sizing using viewport units

viewport-type.scss

// requires: respond.scss 
// https://gist.github.com/krambuhl/9dd229f391aceb3012b4

$vptext-viewport: 960px;
$vptext-min: 640px;
$vptext-max: 1180px;

@mixin viewport-text($font-size: 24px) {
	font-size: #{($font-size / $vptext-viewport * 100) + vw};
}

@mixin viewport-text-limit($font-size: 24px, $limit: 960px) {
	font-size: #{($font-size / $vptext-viewport) * $limit};
}

.vptext-tiny { @include viewport-text(16); }
.vptext-small { @include viewport-text(20); }
.vptext { @include viewport-text(24); }
.vptext-large { @include viewport-text(40); }
.vptext-huge { @include viewport-text(72); }
 
// min
@include respond(0, $vptext-min) {
	.vptext-tiny { @include viewport-text-limit(16, $vptext-min); }
	.vptext-small { @include viewport-text-limit(20, $vptext-min); }
	.vptext { @include viewport-text-limit(24, $vptext-min); }
	.vptext-large { @include viewport-text-limit(40, $vptext-min); }
	.vptext-huge { @include viewport-text-limit(72, $vptext-min); }
}
 
// max
@include respond($vptext-max) {
	.vptext-tiny { @include viewport-text-limit(16, $vptext-max); }
	.vptext-small { @include viewport-text-limit(20, $vptext-max); }
	.vptext { @include viewport-text-limit(24, $vptext-max); }
	.vptext-large { @include viewport-text-limit(40, $vptext-max); }
	.vptext-huge { @include viewport-text-limit(72, $vptext-max); }
}