Setting the root font-size in % ensures device-specific sizing is not overruled.

responsive-roots.scss

html {

font-size: 100%;

    @include mq($min, $sm) {
        font-size: 106.3%; // 17px if the root was 16px
    }

    @include mq($min, $md) {
        font-size: 112.5%; // 18px if the root was 16px
    }

    @include mq($min, $lg) {
        font-size: 125%; // 20px if the root was 16px
    }

    @include mq($min, $xl) {
        font-size: 137.5%; // 22px if the root was 16px
    }
}