How The Monitor Sharpness Test Works
The pixel-grid panel draws a 1 px alternating black-and-white checker on a HTML <canvas> at the device pixel ratio (window.devicePixelRatio), so every drawn pixel maps to exactly one physical pixel on a properly-scaled monitor. The image-rendering CSS property is forced to pixelated / crisp-edges so the browser cannot smooth the grid before display. If your monitor's sharpness control is at neutral, your OS scaling is a round value, and your resolution is native, all six patterns should blend into a uniform mid-grey at arm's length. Visible banding, moire, or shimmer means one of those three settings is interfering with pixel-perfect rendering.
What "Sharp" Really Means On A Monitor
Sharpness on a monitor is the fidelity with which thin, high-contrast features are reproduced. It is determined by three things: panel pixel density (PPI), sub-pixel layout (RGB stripe vs BGR vs PenTile), and any post-processing the monitor's scaler applies (the "Sharpness" OSD control, edge enhancement, or interpolation when running below native resolution). At a typical 60-70 cm desk viewing distance, 90-110 PPI is acceptable and 140 PPI+ is "retina-class". Below 80 PPI you can see individual pixels. Above 200 PPI, sub-pixel anti-aliasing matters less because individual pixels disappear at normal viewing distance.
Color Fringing And Sub-Pixel Layout
Modern font renderers (DirectWrite on Windows, CoreText on macOS, FreeType on Linux) use sub-pixel anti-aliasing tuned for an RGB-stripe LCD. On a BGR panel, the fringing will be reversed and noticeable; on an OLED with a PenTile arrangement (some Samsung phones, some QD-OLEDs), the sub-pixels do not line up in vertical stripes at all and you will see slight color halos around dark-on-light text regardless. The sub-pixel ruler in this tool shows you which layout your panel uses: read the stripe order at very close range and compare against R-G-B (standard LCD), B-G-R (some VA panels), or a triangular pattern (PenTile OLED). If the order does not match what your OS expects, re-run ClearType (Windows) or disable sub-pixel rendering (macOS >= Mojave does this automatically on Retina displays).
Why Text Looks Different Across Browsers
Each browser renders text through a slightly different stack. Chrome on Windows uses DirectWrite by default but falls back to GDI on older versions. Firefox uses DirectWrite with its own gamma correction. Safari on macOS uses CoreText with its grayscale anti-aliasing (no sub-pixel). The same 14 px paragraph in this test can therefore look thicker in Firefox, slightly contrastier in Chrome, and softer in Safari. None of those are wrong - they are different anti-aliasing philosophies. If your text looks fuzzy in every browser, the cause is upstream: wrong OS scaling, non-native resolution, or a monitor sharpness setting that is not neutral.
