Larger font size but smaller heading on mobile (discussion and example)

I prefer to set a larger font-size for small screens, 20px typically. At this size I can (more easily) read the text on my mobile without glasses. This is likely true for a lot of people over 40.

I also set smaller heading for small screens, large heading look good on large displays but on a mobile it looks blown up and takes space from other content.

This is how I do it at the moment and it seems to works well even do the code looks a bit messy.

Suggestions for a better way to implement this?

Is it interesting to add something like this to the Zen subtheme? Since zen is very popular it would increase the chances of Drupal sites having more readable text on mobile screens.

Add this to _variables.scss:

// The font size set on the root html element.
$base-font-size:    20px;
$base-font-size-2:  16px;

// The base line height determines the basic unit of vertical rhythm.
$base-line-height:    30px;
$base-line-height-2:  24px;

$base-multiplier: $base-font-size / $base-font-size-2;

$xxl-2: 32px * $base-multiplier;
$xl-2:  24px * $base-multiplier;
$l-2:   20px * $base-multiplier;
$m-2:   16px * $base-multiplier;
$s-2:   14px * $base-multiplier;
$xs-2:  12px * $base-multiplier;

// The font sizes in our type hierarchy as tee shirt sizes.
$font-size: (
  xxl:              28px,
  xl:               24px,
  l:                22px,
  m:                $base-font-size,
  s:                16px,
  xs:               14px,
  xxl-2:            $xxl-2,
  xl-2:             $xl-2,
  l-2:              $l-2,
  m-2:              $m-2,
  s-2:              $s-2,
  xs-2:             $xs-2
);

Add this to _root.scss:

@include respond-to(xxl) {

  html {
    @include define-type-sizing($base-font-size-2, $base-line-height-2);
  }

}

Add this to _headings.scss (and similar to all other places where we adjust the font size):

@include respond-to(s) {
  h1,
  %h1 {
    // Set the font-size and line-height while keeping a proper vertical rhythm.
    @include type-layout(xxl-2, 1.5);

    // Set 1 unit of vertical rhythm on the top and bottom margins.
    @include margin-top(1, xxl-2);
    @include margin-bottom(1, xxl-2);
  }

  etc.
}