Really small font with clear outlining

Started by
8 comments, last by Crispy 19 years, 7 months ago
When using outline fonts, how would you go about increasing the quality of the edges of the letters when the font becomes small (size 12 and smaller)? I'm having a hard time making the font clearly readable. Here's what I mean (in the image, the text size is 15): The aliasing is most likely caused by really small polygons (yes, I'm drawing text in polygon mode - in line mode, the results are far worse) not lining up perfectly. I've been pondering on this for some time now and I can't think of a way to smooth it. What I'd like, ideally, is single-line precision when font sizes become very small to get the clarity you'd expect to see when setting font size to something like 8 in Word. Basically - how do you draw text like the one you're most likely reading this post in?
"Literally, it means that Bob is everything you can think of, but not dead; i.e., Bob is a purple-spotted, yellow-striped bumblebee/dragon/pterodactyl hybrid with a voracious addiction to Twix candy bars, but not dead."- kSquared
Advertisement
Use a texture based font rendering system. I've rendered small fonts before, with no such problems.
If at first you don't succeed, redefine success.
I don't want to get into all the meticulous aligning of characters and creation of bitmap fonts - I'd much rather use something simpler. Outline fonts suit me well, but I'd still like some greater detail.
"Literally, it means that Bob is everything you can think of, but not dead; i.e., Bob is a purple-spotted, yellow-striped bumblebee/dragon/pterodactyl hybrid with a voracious addiction to Twix candy bars, but not dead."- kSquared
This is a hinting issue. You need to access the hinting information in the fonts you are using. Are you using your own code to read fonts from file? Maybe you can look at freetype.org for some hints on the subject (boring pun intended).
If you're using wglCreateFont or whatever it's called, then IIRC there's a quality parameter, increase it and see what happens...
If at first you don't succeed, redefine success.
Take a look at freetype fonts tutorial, I find my small text looks quite nice with the anti aliasing.
I use a bitmap font system that seems to work excellent with small fonts. Here is my smallest:

Each glyph is 4x5px and contains the space. It's lined up correctly for ASCII 0-127.

- Pete
Rendering to a texture in a bigger size and scaling it down should do the job.
However, I would spend the time for a decent font rendering engine once, wiping out all the trouble that you'll always have by rendering polygon based fonts. Not to mention the performance.
_____________________________________http://www.winmaze.de, a 3D shoot em up in OpenGL, nice graphics, multiplayer, chat rooms, a nice community, worth visiting! ;)http://www.spheretris.tk, an upcoming Tetrisphere clone for windows, a 3D tetris game on a sphere with powerful graphics for Geforce FX and similar graphics cards.
If you are using screen space polygons to render your fonts with 3D acceleration, you have to offset the screen coordinates (not the texture coordinates) of your the vertices by 0.5 on both the x and y axis to hit each pixel's center. An explanation as to why this is required can be found in the DX SDK docs for example.

From what I see on your image, the distortions vary, even on the same letter rendered at different location, which would be a typical issue of even screen coordinates.

-Markus-
Professional C++ and .NET developer trying to break into indie game development.
Follow my progress: http://blog.nuclex-games.com/ or Twitter - Topics: Ogre3D, Blender, game architecture tips & code snippets.
Okay. How about the quick chat font in Unreal Tournament? Are you suggesting that they're using bitmap fonts? Or perhaps GDI (although I seriously doubt that)?

Just to make it clear: I don't want to use some library and writing a font renderer isn't really something I'm looking forward to with there being so much else to do that is far more important...
"Literally, it means that Bob is everything you can think of, but not dead; i.e., Bob is a purple-spotted, yellow-striped bumblebee/dragon/pterodactyl hybrid with a voracious addiction to Twix candy bars, but not dead."- kSquared

This topic is closed to new replies.

Advertisement