A17 SCSS Utilities

Description

Controls the application of anti-aliasing when fonts are rendered.

SCSS Usage

@include font-smoothing($value: on)

Where $value can be on or off, defaults to on.

And so, in SCSS:

_component.scss

p.foo {
  @include font-smoothing(on);
}

p.bar {
  @include font-smoothing(off);
}

Output

app.css

.demo-font-smoothing-on {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.demo-font-smoothing-off {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}

Demo

Using the above .demo-font-smoothing-on and .demo-font-smoothing-off classes above:

Font smoothing: on

Font smoothing: off

document.html

<div class="bg-banner background-fill py-gutter text-inverse mt-gutter">
  <p class="f-h1 demo-font-smoothing-on">Font smoothing: on</p>
  <p class="f-h1 demo-font-smoothing-off">Font smoothing: off</p>
</div>