@atomixdesign/rem-scaling

Usage

Attach the rem font scaling

import { HtmlFontSetter } from '@atomixdesign/rem-scaling'


new HtmlFontSetter({
  min: 12, // Min px size
  max: 16, // Max px size
  base: 16, // Default px size (normally this is the max size). Used for when no breakpoints match
  breakpoints: {
    md: [768, 1024], // Font-size @768: 12px, @1024: 16px
    lg: [1024, 1600],
  },
  fallback: [Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY], // Fallback breakpoint for SSR, if no SSR is needed just use this
})

If you'd like to remove the rem scaling in the future, simply call the return value

import { HtmlFontSetter } from '@atomixdesign/rem-scaling'

const instance = new HtmlFontSetter({ ... })

instance.destroy()