Responsive Typography for dummies

h1 {
  @include responsive-type(22px, 38px);
}

A "let the mixin do all the work" approach to the wonderful calc() liquid and molten text. This is all based off the great work done by mike

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

A Level two header that has a lot of text in it for the molten-lettering and showing off that the line height drops as it gets smaller.

h2 {
  @include responsive-type(18px, 28px);
  @include responsive-type(1.2, 1.05, line-height);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3 - As I wanted to keep the mixin readable to people that don't know the argument order of the function.

h3 {
  @include responsive-type('14px@400px', '50px@1900px');
  @include responsive-type('1.2@400px', '1.05@1900px', line-height);
}

This custom @ approach is the way you can tweak the typography without using the @include responsive-resize with a bunch of params

p.s Please note I'm linking up more helpers in the external CSS.