Text Clarity Test
Compare subjective readability, visible fringing, and stroke appearance across browser-rendered text samples.
This 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.
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
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.
Setup, interpretation, 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.
How to interpret what you see
- Record the smallest comfortable sample and any visible fringing or uneven strokes.
- Exact subpixel and optical analysis requires magnified calibrated imaging equipment.
Methodology reviewed:
๐ก Why This Test?
Text clarity is a visual experience affected by the font, browser, operating-system rendering, zoom, scaling, display settings, viewing distance, and individual vision.
This page lets you record the smallest sample that is comfortable to read and any visible fringing or uneven strokes. It cannot certify a subpixel layout, antialiasing method, display quality, or universal minimum readable size.
โ What You'll Check:
- Smallest readable font size (6px, 8px, 10px, 12px)
- Visible colored fringing around browser-rendered strokes
- Monospace character distinction (0/O, il1|, rn/m)
- Relative stroke appearance across samples
- How text changes with the current zoom and scaling setup
๐ How to Use This Test
- Use your normal operating-system text settings
- Scroll through font sizes and note the smallest you can read comfortably
- Check the fringing sample for colored edges and record what you see
- Test monospace fonts and verify you can distinguish 0/O, il1|, rn/m
- Look at large text for relative edge and stroke appearance
- Check your device pixel ratio (DPR) at the bottom
- Save your results noting the smallest readable size
Tip: There is no universal grade for a selected size. Keep browser zoom, operating-system scaling, viewing distance, and display settings with your observation.
๐ Font Size Clarity
Check readability at different font sizes. All text should be crisp and clear.
๐ค 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)
ๅฟซ้็ๆฃ่ฒ็็ธ่ทณ่ฟๆ็
็ฎไฝไธญๆ๏ผๅบๅๆๆๅ ๏ผ็ๆฏๅฐไธ้
็น้ซไธญๆ๏ผๅบๅๆๆๅ ๏ผ็ๆฏๅฐไธ้
ไธไบไธๅไบๅ ญไธๅ ซไนๅ
๐ฌ Subpixel Rendering Test
Colored fringes may come from the browser, operating-system text rendering, scaling, capture method, display processing, or subpixel structure. This sample cannot identify the subpixel layout. Look closely at the edges of letters.
๐ป 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
Record how the samples look in your current browser and scaling setup.
๐ก 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)
๐ Resolution Scaling Test
Compare text at your current scaling and record any visible change after a supported setting adjustment.
๐ง Common Issues & Solutions
๐ค "Text looks blurry/fuzzy at 100% Windows scaling" (ClearType, subpixel rendering)
What you observed: Browser text appeared blurry at the current Windows scaling setting.
Context: The browser engine, font, operating-system renderer, zoom, scaling, display processing, and viewing distance can all affect the appearance.
Next step: Record the current settings, compare a supported operating-system text-tuning option if desired, and repeat in the same browser. This page does not identify the active antialiasing method.
๐ "Red/blue color fringes around text edges" (BGR vs RGB subpixel layout)
What you observed: Red or blue fringing appeared around browser-rendered text.
Interpretation: Fringing can be affected by rendering, scaling, capture, color management, sharpening, and subpixel structure. A normal browser view cannot certify RGB, BGR, PenTile, or another layout.
Next step: Compare supported operating-system text settings and confirm physical subpixel structure only with manufacturer documentation or magnified calibrated imaging.
๐ "Text blurry at 125%/150% scaling but sharp at 100%" (Fractional DPI scaling)
What you observed: Text appearance changed between operating-system scaling settings.
Context: Applications handle scaling differently, and browser zoom, font hinting, compositing, and display sharpening can also change the result.
Next step: Choose the scaling and accessibility text size that are comfortable, then compare applications separately rather than treating one percentage as universally best.
๐ "4K monitor makes text tiny, can't read without scaling" (High PPI requires scaling)
What you observed: Text is too small for comfortable reading at the current resolution, scaling, zoom, and viewing distance.
Interpretation: Physical text size depends on both display dimensions and the rendering stack. This page does not know the display's physical PPI or your vision.
Next step: Increase application font size, browser zoom, or operating-system accessibility text size until the sample is comfortable. There is no universal size grade.
๐ "Text looks different in Chrome vs Firefox vs native apps" (Rendering engines, font hinting)
What you observed: The same nominal font and size appear different across browsers or native applications.
Context: Different rendering engines, font files, hinting, zoom, scaling, and application settings can legitimately produce different strokes.
Next step: Record each application's name, zoom, font, and scaling, and choose settings based on your own readability rather than expecting identical output.