What is this?

Each of these containers has fluid typography with different easing techniques applied. Although they all have the same minimum and maximum sizes the transitions will be subtly different. Resize this window to see.

If you just want to grab the mixin you can find it here.

If you want to read more about why I made this read Interpolation without animation and Non-linear interpolation in CSS.

Classic Linear

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nisi, adipisci libero vitae deserunt iusto facilis expedita placeat quisquam fugit eligendi ipsum illum distinctio qui unde incidunt iure exercitationem voluptatem.

.classic-linear {
  @include interpolate('font-size', 600px, 12px, 900px, 24px);
}

Easy Peasy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nisi, adipisci libero vitae deserunt iusto facilis expedita placeat quisquam fugit eligendi ipsum illum distinctio qui unde incidunt iure exercitationem voluptatem.

.easy-peasy {
  @include interpolate('font-size', 600px, 12px, 900px, 24px, 'ease-in');
}

Cubic Bezier

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nisi, adipisci libero vitae deserunt iusto facilis expedita placeat quisquam fugit eligendi ipsum illum distinctio qui unde incidunt iure exercitationem voluptatem.

.cubic-bezier {
  @include interpolate('font-size', 600px, 12px, 900px, 24px, 'cubic-bezier(0.42, 0, 1, 1)');
}

Bloat My CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nisi, adipisci libero vitae deserunt iusto facilis expedita placeat quisquam fugit eligendi ipsum illum distinctio qui unde incidunt iure exercitationem voluptatem.

.bloat-my-css {
  @include interpolate('font-size', 600px, 12px, 900px, 24px, 'ease-in-ease-out', 6);
}