Skip to content
Site volume
Colourway

Print kit

Giant glyph

One shape-alphabet glyph, huge and screened, bleeding off a corner of an art region.

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

A poster's glyph printed huge as a coarse halftone: dots at 34 % ink over the glyph's body at 22 %, bleeding off the chosen corner. It lives in art regions only.

Example#

Look of this example
Live render of examples/giant-glyph/basic.tsx

Usage#

Use a giant glyph as a big, quiet piece of art: one shape from the alphabet, screened in dots, bleeding off a corner of an art region. It suits section art and empty corners of a poster.

  • Props. name, ink, screen (dots, solid or outline), bleed (the corner it runs off) and size.
  • One per view at Studio, in an art region, never behind a text column.

Layer and volume#

Art, never behind a text column (the press walker fails any overlap). Quiet: hidden. Studio: one per view, tilt ≤ 3°; Press ≤ 6°; Rave ≤ 12°.

Anatomy#

The parts of examples/giant-glyph/basic.tsx, numbered:
  1. Art regionThe glyph lives only here.[data-mk-layer="art"]
  2. GlyphScreened at 45°, bleeding off a corner..mk-giant-glyph

Volume#

  • Quiet

    Hidden.

  • Studio

    One per view, tilt up to 3°.

  • Press

    Tilt up to 6°.

  • Rave

    Tilt up to 12°.

Content#

  • A giant glyph is decoration; pick a shape that is not a line's glyph next to that line's content, so it is not read as meaning.

Do and don't#

Do

In its own art region.

Don't

A giant glyph behind a column of body text.

Behind the reading column.

A large shape behind text changes the contrast under every line. It lives beside the words (audit L5).

Accessibility#

  • aria-hidden; the glyph never carries a meaning alone.

Props#

PropTypeDefaultDescription
name requiredGlyphNamenone
inkInkRefleadDefault `lead`.
screen"dots" | "outline" | "solid"none
bleedGiantGlyphBleednone
sizestringmin(56%, 33.75rem)Default `min(56%, 33.75rem)`.
rotatenumbernoneDegrees, clamped to ±`--mk-v-tilt-max`.
childrenundefinednone

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

Tokens#

System tokens (3)

Its own properties (3)

  • --mk-giant-bleed
  • --mk-giant-rot
  • --mk-giant-size

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

Changelog#

Arrived in 0.1.0.

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).