In a utility billing portal, the icon set looks blurry at small sizes on standard-density screens; how do you use the pixel grid to diagnose and fix it?
answer
- edges that fall between pixels
- odd strokes on whole-pixel lines
- non-integer scaling breaks the grid
- half-pixel offsets in the layout
- review at actual size, standard density
basics
~20 sBlur appears when edges fall between pixels and anti-aliasing smears them. Check that points and straight edges sit on the pixel grid, odd-width strokes sit on half-pixel centres, icons are not scaled by awkward factors, and layouts do not place icons at half-pixel positions.
solid answer
~50 sOn a standard-density screen, one grid unit is one pixel, and any straight edge that falls **between** pixels is anti-aliased into two half-strength pixels, which reads as blur. Diagnose by overlaying the pixel grid at actual size and looking for four causes. **Points and straight edges off the grid**: move them to whole units. **Odd-width strokes centred on whole-pixel lines**: a one-unit vertical stroke centred on a pixel boundary straddles two columns, so its centre belongs on a half-pixel position. **Non-integer scaling**: an icon drawn on a 24-unit grid shown at 18 pixels is scaled by 0.75, so every aligned edge lands on a fraction. **Half-pixel placement**: centring a 24-pixel icon in a 37-pixel box offsets it by 6.5 pixels. Fix the drawings, render at the sizes actually used, and give containers even dimensions. High-density screens hide much of this, but not all of it.
go deeper
Recall that edges between pixels blur, and that icon points and straight edges should sit on the pixel grid.
Explain how stroke width decides whole- or half-unit paths, and why non-integer scaling and half-pixel placement undo aligned drawings.
Show the full diagnosis: overlay the grid, separate drawing, scaling and layout causes, fix each, and add review or export checks so it stays fixed.
Weigh the cost of per-size drawings and alignment checks against the share of users on standard-density screens, and decide where the set draws the line.
## Why grid-aligned icons can still look blurry A vector icon is drawn with exact coordinates; a screen shows it with whole pixels. When a straight edge falls exactly on a boundary between pixels, the pixel on one side is fully coloured and the other is empty: the edge is **crisp**. When the edge falls in the middle of a pixel, the renderer **anti-aliases** it, colouring that pixel at partial strength. On a standard-density screen, where one grid unit is one pixel, a line of half-strength pixels reads as a soft, blurry edge. At small sizes, where an icon is only 16 to 24 pixels across, every blurred edge is a large share of the drawing. In a utility company's billing portal, this shows up exactly where icons matter most: the status column of the bills table and the compact navigation, both viewed on office desktop monitors, which are often standard density. ## Diagnosing: four causes | Cause | What happens | How to spot it | |---|---|---| | Points or straight edges at fractional coordinates | edges land mid-pixel | coordinates such as 5.3 or 11.5 in the drawing | | Odd-width stroke centred on a whole-pixel line | a one-unit stroke covers half of two pixel columns | a two-pixel-wide grey line where a one-pixel dark line was intended | | Scaling by a non-integer factor | every aligned edge moves to a fraction | icon drawn on 24 units shown at 18, 20 or 21 pixels | | Half-pixel placement in the layout | the whole icon shifts by half a pixel | icon centred in a box whose size differs from the icon's by an odd number | The first two are drawing problems, the third a size-set problem, the fourth a layout problem. A blurry set usually has more than one. ## Fixing the drawings 1. **Snap straight edges and anchor points to whole units.** Horizontal and vertical edges of shapes should fall on grid lines. 2. **Place strokes by their width.** A stroke is centred on its path. For an **odd** width, such as one unit, the path goes on a half-unit so both edges of the stroke land on pixel boundaries; for an **even** width, such as two units, the path goes on a whole unit. 3. **Keep dimensions whole.** Widths and heights of rectangles and the diameters of circles should be whole units so both sides can align. 4. **Accept what cannot align.** Curves and diagonals always anti-alias; align their extremes, the top of a circle or the ends of a diagonal, and let the rest be smooth. A drawing that passes these checks at its base size will be crisp at that size and at whole multiples of it. ## Fixing sizes and placement - **Scaling.** Showing a 24-unit icon at 18 pixels multiplies every coordinate by 0.75, so aligned edges become fractions again. The remedy is either to use sizes that keep alignment or to provide drawings made for the smaller size; which sizes the set supports is a separate decision from the grid. - **Placement.** A 24-pixel icon centred in a 37-pixel-wide button sits 6.5 pixels from each side. Containers that hold icons should differ from the icon's size by an even number, or position the icon at a whole-pixel offset. - **Review at actual size.** Zoomed views in a design editor hide blur; review exports at 100% on a standard-density screen, next to text and other icons. - **Automate what can be checked.** An export check can flag coordinates that are not on whole or half units, so the problem is caught before it ships. ## What high-density screens change On a high-density screen, one grid unit spans several physical pixels, so a half-unit error becomes a much smaller fraction of a physical pixel and is far less visible. That is why a set can look fine on a designer's laptop and blurry on a customer-service agent's desktop monitor. Standard-density displays remain common, and alignment still makes edges slightly sharper on dense screens, so the grid discipline still pays. ## Pitfalls - Judging crispness only when zoomed in or only on high-density screens. - Fixing drawings while the layout keeps placing icons at half-pixel positions. - Assuming vector icons are sharp at every size because vectors scale.
- Why does a two-unit stroke belong on a whole-unit path while a one-unit stroke belongs on a half-unit path?A stroke is centred on its path, extending half its width on each side. A two-unit stroke on a whole-unit path extends one unit each way, so both edges fall on pixel boundaries. A one-unit stroke on a whole-unit path extends half a unit each way, splitting two pixels; moving the path to a half-unit puts both edges on boundaries.
- Why might the set look sharp to its designers and blurry to customers?Designers often work on high-density laptop screens and zoomed-in canvases, where half-pixel errors are a tiny fraction of a physical pixel. Many customers, and support staff on office monitors, use standard-density screens at 100%, where the same errors produce visible half-strength edges. Reviewing exports at actual size on a standard-density screen closes that gap.
saying these in an interview costs you the question
- Vector icons are sharp at any size because vectors scale.
- Centring a stroke's path on a whole pixel always gives a crisp line.
- Pixel alignment no longer matters because every screen is high density.
- Once the drawings are aligned, layout placement cannot blur them.
- Checking icons zoomed in inside the design editor is enough.