# Font-Size : View-Width Mixer

## Mixes the base-font-size with a given view-width ratio.

Lets assume you designed something for desktops on a 1440px artboard and your text-size is supposed to be 16px. This mixin allows you to hit that target but mix in some screen-width to make sure your fonts scale nicely on larger or smaller screens.

    font-size: screen-ratio-mix(
      .2,
      // 20% of the the font-size is relative to the screen width
      1440,
      // artboard width in PX
      16,
      // target PX size (base font-size in the design)
      // 16px only for the demo, I usually set 10px as a base so 1rem would be around 10px
    );// would also work in CSS only, but would be even harder to read

    // results in:

    font-size: calc(80% + 0.1388888889vw);

Make sure the view-width ratio is not too hight, since it makes it less accessible. (Having a bigger font-size set in your browser would not do anything, if the font-size was solely expressed in vw)