Text Clarity Test

Compare sample text at different sizes and styles to spot blur, color fringing, and scaling problems.

Go to the test
Start text clarity review

📏 Font Size Clarity

Start with a comfortable size, then compare smaller samples from your normal viewing distance. These are CSS pixels; difficulty reading a 6px or 8px sample is not a failed monitor test.

6px: The quick brown fox jumps over the lazy dog. 0123456789
8px: The quick brown fox jumps over the lazy dog. 0123456789
10px: The quick brown fox jumps over the lazy dog. 0123456789
12px: The quick brown fox jumps over the lazy dog. 0123456789
14px: The quick brown fox jumps over the lazy dog. 0123456789
16px: The quick brown fox jumps over the lazy dog. 0123456789
18px: The quick brown fox jumps over the lazy dog. 0123456789
20px: The quick brown fox jumps over the lazy dog. 0123456789
24px: The quick brown fox jumps over the lazy dog. 0123456789

🔤 Font Family Comparison

Compare serif vs sans-serif fonts. Check which is more readable for you.

Sans-Serif (Gothic)

12px: Programming requires clear monospace fonts

14px: Programming requires clear monospace fonts

16px: Programming requires clear monospace fonts

18px: Programming requires clear monospace fonts

Serif (Myeongjo)

12px: Programming requires clear monospace fonts

14px: Programming requires clear monospace fonts

16px: Programming requires clear monospace fonts

18px: Programming requires clear monospace fonts

🌍 Multilingual Clarity

Test text rendering quality across different languages and scripts.

🇺🇸 English

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]|;:'",./?

🇯🇵 日本語 (Japanese)

いろはにほへと ちりぬるを

あいうえお かきくけこ さしすせそ

アイウエオ カキクケコ サシスセソ

漢字テスト: 日本語表示確認

🇨🇳 中文 (Chinese)

快速的棕色狐狸跳过懒狗

简体中文：床前明月光，疑是地上霜

繁體中文：床前明月光，疑是地上霜

一二三四五六七八九十

🔬 Text Edge Rendering Samples

The CSS below requests different font-smoothing behaviors, but browsers and operating systems may ignore those hints. Compare visible stroke edges only; this sample cannot identify RGB, BGR, PenTile, or any other physical subpixel layout.

Antialiasing requested
Hgpmn
Subpixel antialiasing requested
Hgpmn
No font smoothing requested
Hgpmn

💻 Monospace Font Test (Programming)

Test clarity of monospace fonts used in code editors. Characters should be easily distinguishable.

// Monospace - System Default
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fib(n-1) + fib(n-2);
};

// Test characters: 0O o8B il1| ,;:.
console.log(fibonacci(10));
// Monospace - Courier New
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fib(n-1) + fib(n-2);
};

// Test characters: 0O o8B il1| ,;:.
console.log(fibonacci(10));
Character Disambiguation Test:
0O o8B il1| rn m ,;:. [] () <> '" `
Can you distinguish: zero/O, o/0/8, i/l/1/|, rn/m, punctuation marks?

✅ Text Clarity Checklist

Check the statements you observed in this setup. Checked statements are included in your notes when you choose Save Result; an unchecked statement is unrecorded, not a failed check.

💡 Tips for Better Text Clarity

  • • Compare supported operating-system text settings if desired
  • • Keep browser zoom and scaling with each observation
  • • Use the scaling level that provides comfortable text size
  • • Physical pixel density can affect appearance, but this page does not measure PPI
  • • Adjust brightness to comfortable level (not too bright)

Compare a real scaling change

Use this same reference before and after changing one browser or operating-system setting. It does not simulate operating-system scaling. Record the actual zoom and scale values from their settings menus, then restore your baseline to check whether the difference returns.

Reading reference: minimum, ill1, O0, rn, m. 0123456789

Code reference: il1| O0 rn m [] () <>

Compare the gaps inside letters, the distinction between similar characters, and any colored outline. Keep the font, words, and viewing distance unchanged.

Current Device Pixel Ratio
Requires JavaScript
Updates when the browser reports a change. Page zoom or moving between displays can change this ratio; pinch zoom may not. It is not physical PPI and cannot identify your OS scale or zoom percentage on its own.

Controlled text comparisons

Use the same words, font, viewing distance, room lighting, and display preset. Change one item below, then record stroke weight, blur, colored fringing, and character distinction without assigning a hardware cause.

Change Keep fixed Record Do not infer
Browser zoom OS scaling, app, font, display mode Readable size and visible stroke changes Physical PPI or panel quality
OS scaling Browser zoom, resolution, app, display preset Text size, edge softness, and app consistency That one percentage is universally correct
Font-smoothing setting Font, size, zoom, scaling, display mode Stroke weight and any visible fringe change The active antialiasing algorithm or physical subpixel layout
Display scaling mode Signal resolution, zoom, OS scaling, app Whole-image softness and text-edge change Whether scaling occurred in the GPU or display without separate evidence
Application or browser Font file, nominal size, zoom, OS scaling Character shape, hinting, weight, and spacing differences RGB, BGR, PenTile, or another panel subpixel arrangement

Background

Why text looks blurry or has colored edges

Sharp text depends on the whole chain from font to panel: the font renderer, the scaling setting, the resolution, the connection, and the arrangement of the subpixels. When one link is off, letters look soft, fuzzy, or fringed with color. Most causes are settings, and the samples on this page help you find which one.

Subpixel rendering and panel layout

Windows ClearType sharpens text by using the separate red, green, and blue subpixels of each pixel. It assumes the standard RGB stripe arrangement found on most LCD monitors. On panels with a different layout, such as BGR monitors or many OLED monitors with WOLED (RWBG) or QD-OLED (triangular) subpixels, the same technique can leave red, green, or purple fringes on the edges of letters.

You can tune ClearType by running the ClearType Text Tuner: search for “Adjust ClearType text” in the Start menu. Some people with OLED monitors prefer grayscale anti-aliasing, available in some apps and browsers or through third-party tools. macOS stopped using subpixel anti-aliasing in macOS Mojave (10.14) and relies on high pixel density instead, which is why text on low-PPI external monitors can look softer on a Mac than on Windows.

Resolution and scaling

  • Not at native resolution: a monitor driven below its native resolution has to stretch the image, which blurs everything. Check that the OS uses the resolution marked “recommended.”
  • Fractional scaling: at 125% or 150%, apps that do not support high-DPI scaling are rendered small and then enlarged, which makes them blurry. On Windows, the app’s Properties › Compatibility › Change high DPI settings can override this for a specific program.
  • Browser zoom: zoom levels that are not 100% can make some sites slightly softer, especially images of text.

Connection and TV problems

TVs used as monitors often blur text in two ways. Overscan crops and enlarges the picture slightly; turn it off with a setting named Just Scan, Screen Fit, or Fit to Screen. Chroma subsampling (4:2:2 or 4:2:0) sends color at lower resolution than brightness, which leaves colored text fuzzy, especially red on black. Select the TV’s PC or Game mode, label the HDMI input as PC where available, and set the graphics card to RGB or YCbCr 4:4:4 output.

Monitors and TVs also have a Sharpness setting. Too high adds halos around letters; too low softens them. The neutral value differs by brand, often 0, 50, or a midpoint, so compare a few values on the same text sample.

A quick checklist

  • Native resolution set in the OS.
  • Scaling at a value that suits the panel’s PPI (see the Screen Info tool).
  • ClearType tuned on Windows, or grayscale smoothing if you see color fringes on OLED.
  • On a TV: PC or Game mode, overscan off, 4:4:4 color.
  • Monitor sharpness at its neutral value.

Common questions

Why is only one app blurry?
That app probably does not support high-DPI scaling, so Windows draws it small and stretches it. Try the app’s high-DPI compatibility setting, or update the app.
Why does text look worse on my new OLED monitor than on my old LCD?
Most likely the subpixel layout. ClearType expects RGB stripes, and OLED layouts produce color fringes with it. Newer OLED panels with improved layouts and higher PPI reduce the effect.
Does a higher resolution always make text sharper?
At the same screen size and scaling factor, yes. But if you scale a high-resolution screen down to a fractional setting, apps that do not scale well can look softer than on a lower-resolution screen at 100%.

References