A crisp one-pixel line in the design file can vanish entirely on a projector or a cheap screen
Aliases: line width · stroke weight
What it is
A crisp 1-pixel line in the design file may render as a broken ghost on a projector or blur into faint gray through anti-aliasing on a low-resolution screen. A line's visibility is the product of stroke width and contrast: both must hold, and when either is weakened (projection lowering contrast, scaling lowering pixel density), thin lines disappear first. What disappears is precisely the data itself—trend lines "refined" into hairlines are the chart's information core.
Why it happens
Thin-line disappearance is a rendering physics floor: a line needs to cover a perceivable pixel width with enough ink (contrast × width) to exist visually; a 1-px line that looks refined on a HiDPI design file maps to less than one physical pixel on a low-DPI projector, and anti-aliasing smears it into translucent gray. Low-vision users' discrimination of thin lines is further reduced—to them a hairline flickers in and out of existence. The design implication: data lines deserve a minimum weight floor (commonly from 2 px, key series heavier), reserving thin strokes for auxiliary elements like gridlines. Scaling is a second stress test: when a chart shrinks into a dashboard card or a document, line width shrinks proportionally, so width must be validated at the "smallest rendered size," not the largest design size. In dense multi-line charts, width allocation also carries hierarchy: the heaviest line belongs to the most important series (the same group's hierarchy thinking)—uniform weight in a crowded chart declares everything unimportant.
Where it stops holding
Line width trades off with information density: bolding every line in a dense multi-line chart blurs them into a mass, so a hierarchy strategy (bold the key series, thin and fade the secondary) beats uniform bolding. Width does not conflict with the position channel's reading (foundational knowledge: position and length carry the values)—width is only a visibility guarantee, and bolding does not alter position-reading precision. In touch contexts, line width intersects with touch targets (the same group's touch-target item): the hit area should be decoupled from the visual stroke—a visually 2-px line can carry an invisible 20-px hit band; the two are set independently.
Applying it
- Set data lines to at least 2 px (2.5-3 px for key series); reserve 1 px and low contrast for gridlines and auxiliary strokes.
- Validate at the smallest rendered size: shrink the chart to its smallest real use (dashboard card, mobile half-screen) and confirm the lines remain visible.
- In dense multi-line charts, use hierarchical weights: key series bold, secondary series thin and faded, paired with highlight interactions.
- Verification: view the chart on a projector or low-resolution external display; broken or vanished data lines mean the width floor is not met.
Related
- Same group: U11.04.1 Chart marks need discernible contrast against the background · U11.04.2 Mark-vs-background contrast and adjacent-category contrast are two independent requirements · U11.04.4 In-chart text minimum size is judged by final rendered size, not the design file · U11.04.5 Interactive marks are also bounded by touch-target requirements
- Nearby: U11.04.1 Chart marks need discernible contrast against the background · U2.03.3 Beyond a handful of lines, tracking becomes infeasible
- Search terms:
line width·stroke weight·chart legibility
Cards in the same group
- U11.04.1Low-vision users and anyone in bright sunlight lose a data mark the instant its contrast falls short
- U11.04.2A mark being visible against the background and being told apart from its neighbor are separate demands
- U11.04.4Text that looks fine at full design size can shrink to unreadable once squeezed into a dashboard card
- U11.04.5A clickable data point has to be big enough for a fingertip, not merely big enough to see