I'm using pixie to render charts with small labels, and I'm struggling with font quality at sizes ≤12px. The text appears blurry compared to native OS rendering or html canvas (Windows ClearType/macOS CoreText). This isn't a bug report, pixie works great as-is, just looking for enhancement ideas or user-discovered techniques to push small font quality further.
I've tried the common approach of rendering text at larger sizes (2x or 4x) and then downscaling the final image, but the results aren't very convincing, sharpness is lost and artifacts appear.
If you've found a practical approach, whether preprocessing, specific font choices, or compositing tricks, I'd love to hear your workflow.
I can share a side-by-side comparison image if helpful, though I realize the perceived quality may vary depending on display DPI, subpixel layout.
Thanks for any pointers.
Pics please. We should look nearly identical to macOS CoreText at small scales.
You might be used to Windows ClearType, which I think butchers the letters and does not stay true to how they should look. Also they might do LCD tricks that look good on some monitors but bad on others.
This is at 11 pixels:
Thanks for the answers.
I am trying to reproduce this type of chart from echarts : https://echarts.apache.org/examples/en/editor.html?c=line-simple
The link below for the pixie output (which I think accurately reflects what I see on the screen rather than the PNG file) https://ibb.co/1fkYvRkP
png link (bad, but it's not the reality): https://i.ibb.co/jvS963SQ/line.png
The link below for the echarts output (which I think accurately reflects what I see on the screen rather than the PNG file) https://ibb.co/tpHBFjsm
png link (bad, but it's not the reality): https://i.ibb.co/4RFW3vTm/echarts.png
Most fonts are not designed to look good at small scales. Maybe a special purpose font like https://tobiasjung.name/profont/ would work better for you?
I'll try it to see if it's better.
- The ImageBB page (first link) shows the image scaled down in my browser, which looks sharper and more similar to what I see in my actual application.
- The direct PNG link looks worse when viewed at 100% zoom in the browser (or when opened in an image viewer at native resolution).
I realize the ImageBB links above were misleading, they display the image in a viewer that resizes it, which doesn't show the actual pixel data.
Here's a direct link to the raw PNG file (exactly as output by Pixie): https://files.catbox.moe/5yxo78.png
And the ECharts reference: https://files.catbox.moe/5lc0zg.png
These are the unmodified files at 100% scale.
Actually, looking at the raw PNG files side by side, I don't think this is an display pipeline issue.
Most fonts are not designed to look good at small scales. Maybe a special purpose font like https://tobiasjung.name/profont/ would work better for you?
It's much better, even though I'm not a fan of the font, it's definitely better. https://files.catbox.moe/whynev.png
The images look pretty low-dpi. I recall having to set the DPI or some other setting in matplotlib so png exports would look good on a high dpi Mac.
Does pixie have a dpi setting for pngs?