Anti-aliasing

Anti-aliasing is a rendering technique that smooths the jagged, staircase edges that appear when vector letterforms are converted to pixels. Because display pixels are arranged in a grid and letter outlines are smooth curves, the conversion process inevitably creates rough, blocky edges — particularly visible on diagonal strokes and curves. Anti-aliasing softens these edges by calculating partially-covered pixels and rendering them at intermediate opacity or color values.

The fundamental challenge is that letter outlines are continuous curves living in a world of discrete grid squares. A diagonal stroke cutting across pixel boundaries will partially cover some pixels and fully cover others. Without anti-aliasing, each pixel is simply on or off — the result is the "jaggies" or aliased appearance. Anti-aliasing calculates the coverage percentage of each boundary pixel and renders it at proportional opacity.

/* OS-level anti-aliasing control in CSS */

/* macOS: subpixel vs grayscale anti-aliasing */
body {
  -webkit-font-smoothing: antialiased; /* Grayscale anti-aliasing */
  -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
}

/* The default on macOS is 'subpixel-antialiased' — using RGB subpixels */
/* Resetting to default: */
.subpixel {
  -webkit-font-smoothing: auto;
}

/* Disable anti-aliasing (rarely appropriate) */
.no-smooth {
  -webkit-font-smoothing: none;
}

/* The context where this matters most */
.dark-background-text {
  background: #1a1a2e;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  /* Subpixel AA looks poor on dark backgrounds — grayscale AA is better */
}

.light-background-text {
  background: #ffffff;
  color: #1a1a2e;
  -webkit-font-smoothing: auto;
  /* Subpixel AA is fine on light backgrounds */
}

There are two main anti-aliasing approaches used in text rendering. Grayscale anti-aliasing uses only gray values to smooth edges — each boundary pixel is rendered in the appropriate gray between background and foreground color. Subpixel anti-aliasing exploits the fact that LCD pixels contain separate red, green, and blue subpixels arranged horizontally. By addressing subpixels individually, it effectively triples the horizontal resolution available for rendering text edges — producing sharper results on LCD displays. However, subpixel rendering assumes a specific subpixel arrangement and looks poor on dark backgrounds or OLED displays.

The -webkit-font-smoothing: antialiased declaration explicitly requests grayscale anti-aliasing, overriding macOS's default subpixel rendering. This is commonly applied for text on dark backgrounds or for UI elements where the slight weight reduction from grayscale anti-aliasing (text appears thinner) is aesthetically preferred. Typefaces like Inter and Roboto are designed and tested with both anti-aliasing modes in mind — part of what makes them reliable across diverse rendering environments.