Text Clarity Test
Compare subjective readability, visible fringing, and stroke appearance across browser-rendered text samples.
Go to test controlsThis check runs directly on this page without requiring fullscreen. Review what this browser test can and cannot measure.
Before you start
- Use your normal operating-system text settings and browser zoom.
- Sit at your normal viewing distance and keep display settings unchanged.
Step-by-step instructions
How to run this check
- Start the Text Clarity Test
- Read text samples at various sizes (6px to 24px)
- Look for visible fringing or uneven strokes
- Record the smallest sample that is comfortable to read from your normal distance
- Keep browser zoom, operating-system scaling, and display settings with the observation
📏 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.
🔤 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.
💻 Monospace Font Test (Programming)
Test clarity of monospace fonts used in code editors. Characters should be easily distinguishable.
const fibonacci = (n) => {
if (n <= 1) return n;
return fib(n-1) + fib(n-2);
};
// Test characters: 0O o8B il1| ,;:.
console.log(fibonacci(10));
const fibonacci = (n) => {
if (n <= 1) return n;
return fib(n-1) + fib(n-2);
};
// Test characters: 0O o8B il1| ,;:.
console.log(fibonacci(10));
✅ 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.
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 |
What this browser test can tell you
Can help you check
- Relative readability across browser-rendered samples.
Cannot measure
- This test cannot certify a subpixel layout or a universal minimum readable size.
Interpret this observation
- Record the smallest comfortable sample and any visible fringing or uneven strokes.
- Exact subpixel and optical analysis requires magnified calibrated imaging equipment.
Setup and sources
Recommended setup
- Use the display native resolution and your normal browser zoom and scaling.
- Compare samples from your usual viewing distance with sharpening settings unchanged.
Sources
Methodology reviewed: