Skip to content
Site volume
Colourway

Print kit

Halftone

Tones as dots on a 45 degree screen, the fade and fringe that bleed art into the stock, and Ben-Day tints.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/print
On this page

Halftone is how Overprint prints a tone: dots on a rotated screen whose size follows the coverage. The screen is one SVG path, so even a dense field stays light in the DOM. Fade and fringe are the bleed of an art plate into the paper; Ben-Day is the even tint the old comic uses.

Example#

Look of this example
Live render of examples/halftone/basic.tsx

Usage#

Use halftone wherever a tone or a gradient prints: hero art, cover plates, panel art, the bleed of an art plate into the stock. It is the system's way of making tone with one ink.

  • Variants. screen (default) is a field of dots on a 45° screen whose size follows the coverage; fade and fringe bleed an art plate into the paper along one edge; benday is the even tint the old comic register prints; plate fills a photo plate made by the generators.
  • Coverage is linear or radial, from one value to another, so a screen can swell towards a corner or a centre.
  • Cells. cell and angle change the screen; keep the defaults unless you are matching a print job.
  • Photos only through the plate variant and the photo pipeline; client screenshots stay untouched (D-I1).

Layer and volume#

Art. It fills its host and is hidden at Quiet (texture off), except the photo plate variant (P1). Studio prints it on art plates, covers and panel art; Press adds section fields; Rave any art. The fade never runs across a text box.

Anatomy#

The parts of examples/halftone/basic.tsx, numbered:
  1. Art hostPositioned, aria-hidden; the halftone fills it.[data-mk-layer="art"]
  2. ScreenOne SVG path of dots..mk-halftone

Volume#

  • Quiet

    Hidden: no texture at Quiet.

  • Studio

    On art plates, covers and panel art.

  • Press

    Plus section fields.

  • Rave

    On any art.

Content#

  • Halftone carries no words. Anything to read sits on a plate beside it.
  • Pick one ink per screen; let Overprint make the third colours where screens cross.

Do and don't#

Do

Fresh by noon

The screen beside the words.

Don't

Fresh by noon

Words printed on the dots.

Dots under letters break their edges, and the contrast changes from dot to gap. The words go on a plate; the halftone goes around it (D-B1).

Accessibility#

  • Always aria-hidden; it never carries a word or a fact.
  • The screen's dot count is capped at 6,000 (the cell doubles), so it never slows a phone.

Props#

PropTypeDefaultDescription
variantHalftoneVariantnone
inkInkRefsupportDefault `support`.
coverageCoveragenoneScreen only; default linear 90°, 0 → 1.
cellnumbernoneScreen 9, Ben-Day 10, fade 6, fringe 8.
anglenumbernoneScreen 45, Ben-Day 0.
edge"bottom" | "left" | "right" | "top"noneFade default top, fringe default right.
depthstring1.875remFade length, default `1.875rem`.
widthnumber400Screen design box, default 400 × 300 (`preserveAspectRatio="xMidYMid slice"`).
heightnumbernone
srcstringnonePlate (P1): the generators' photo plate masks; duotone with a second plate.
src2stringnone
ink2InkRefnone
classNamestringnone
styleCSSPropertiesnone
childrenundefinednone

Plus 277 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from HalftoneProps in packages/overprint-react/src/print/halftone.tsx.

Tokens#

System tokens (3)

Its own properties (5)

  • --mk-halftone-cell
  • --mk-halftone-depth
  • --mk-tile-benday
  • --mk-tile-ht-fade
  • --mk-tile-ht-fringe

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.9.024 October 2026

  • Minorfonts, reactEditionNumber, ProofSheet, DieLine, InkDrawdown and SwatchChip (with inkPairs, the ink's sanctioned pairs in a look), and the Halftone photo plate case. Read the whole entry

0.1.024 October 2026

  • MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).