Java Tip 81: Jazz up the standard Java fonts

Design a unique look with some simple tricks

By Chunyen Liu, JavaWorld.com, 11/20/99

A few simple tricks applied to standard Java fonts can help make your Web site stand out from the crowd. With the basic knowledge presented here, you will be able to create a set of font styles richer than the standard plain, bold, and italic. And do not confine yourself to these ideas -- they just lay the groundwork. You only need a limited mathematical background to understand the computations. So read on and discover the possibilities!

Display your system fonts

String [] fonts = getToolkit().getFontList();
Font font;
int font_size = 20;
int x = 20;
int y = 25;
int line_spacing = 25;
for (int i = 0; i < fonts.length; i++)
   {
   font = new Font(fonts[i], Font.BOLD, font_size);
   g.setFont(font);
   g.drawString(fonts[i], x, y);
   y += line_spacing;
   }

Position the points

For most of the seven drawing tricks in this article you duplicate the text, slightly reposition it, and color the duplicate appropriately. The image on the right shows eight positions surrounding a center point. On the horizontal axis x increases from west to east, and on the vertical axis y increases from north to south. For example, the coordinate for the northeast position is (x + 1, y - 1) if the center is (x, y). I'll use the positions of this image in explaining the drawing tricks. The coordinate for the center position is assumed to be (x, y).

The following functions are used to improve code readability:

    
int ShiftNorth(int p, int distance) {
   return (p - distance);
   }
int ShiftSouth(int p, int distance) {
   return (p + distance);
   }
int ShiftEast(int p, int distance) {
   return (p + distance);
   }
int ShiftWest(int p, int distance) {
   return (p - distance);
   }

Add a shadow

The easiest trick adds a shadow to the text. Use a dark color for the shadow and draw it near the center. Then draw the text in the center with its color on top of the shadow. The example here shows a shadow two points away in a southeasterly direction. The light looks as if it's coming from the northwest.

g.setColor(new Color(50, 50, 50));
g.drawString("Shadow", ShiftEast(x, 2), ShiftSouth(y, 2));
g.setColor(new Color(220, 220, 220));
g.drawString("Shadow", x, y);

Engrave the text

You can achieve an engraved effect by using a darker color for the background than for the text. To emulate a light projected on the inner walls of the engraved text, use a brighter color and draw it near the center. Finally, draw the text in the center.

The example here draws the inner walls one point southeast of the center with the light coming from the northwest. This effect relies heavily on color selection, so be careful!

g.setColor(new Color(220, 220, 220));
g.drawString("Engrave", ShiftEast(x, 1), ShiftSouth(y, 1));
g.setColor(new Color(50, 50, 50));
g.drawString("Engrave", x, y);

Outline the letters You can outline the text by first drawing it at the northwest, southwest, northeast, and southeast positions with the outline color and then drawing the text in the center with the text color. The example here does exactly that with a red outline color and a yellow text color.