Change font size in Vuetify based on viewport?

You can use Breakpoint object, provided and tracked by Vuetify itself. Quoting the docs:

Vuetify converts the available breakpoints into an accessible object from within your application. This will allow you to assign/apply specific properties and attributes based upon viewport size.

One possible (and rather direct way) is mentioned in the same docpage - using computed property to calculate font-size:

computed: {
  fontSize() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return '3em';
      default: return '5em';
    }
  }
}

... and use it in your template directly. Of course, you can do the same with dynamic class name instead - applied on $vuetify.breakpoint.xsOnly, for example.

You can apply class based on viewport

:class="{'subheading': $vuetify.breakpoint.xs}"