Knockout Type Plate

About this text effect

Knockout type — a headline that reverses out of whatever sits behind it — is a print idea that the web can do exactly, and almost nobody does, because the CSS that achieves it has two traps. The mechanism is a difference blend with the text in pure white: difference subtracts channel by channel, so white minus the backdrop is a true inversion, and the headline reads light over the dark areas of a photograph and dark over the light ones with no plate behind the letters. The white is not a taste decision. Any other colour produces a channel-wise absolute difference, which is a hue shift rather than a knockout. The first trap is isolation: a blend mode composites against everything below it in the stacking context, so without isolate on the wrapper the type inverts the page behind the plate as well as the image inside it. The second is contrast, and it is the one that ships broken. Mid grey inverted is still mid grey, so over a photograph nobody checked — a client upload, a CMS field — the headline can land genuinely invisible. The directional scrim is what gives the inversion somewhere to go, which is what makes the effect safe on imagery it has never seen. Blended text is also composited in its own layer and so antialiases in greyscale rather than subpixel, which reads thinner; the weight and tracking here are set against the blended result.