Fonts and Text

As far as I'm concerned, there are only two fonts worthy of being used for body text on web pages. Verdana, and Arial, both at size 2 (10 pts). At size 3 or larger, these fonts look different, so I tend to stick to size 2.

Here's Verdana (A font designed for the web. I used it for my previous site.)

Here's Arial (Used for this site. It's narrower and uses up a lot less space than Verdana.)

These fonts are both Sans Serif fonts, meaning that they have no curly bits at their ends.

The best way to make a heading is to make it bold, and possibly a dark red colour (don't use blue as it will look like a hyperlink).

The default font in most editors is Times New Roman (TNR). This is one of the serif (curly edges) fonts, which are designed to be read easily on paper, not on the screen. If someone uses TNR on their website, it usually indicates that they're such a newbie that they don't know how to change the fonts settings.

Graphical Fonts:

For graphical text (e.g. the header on this page), neither Verdana or Arial fonts are much good. When making a header, some general tips are:

Use the Times New Roman (but only capital letters), or Tahoma fonts (but only bold).

(Update: since writing this tutorial, I've discovered Palatino Linotype, a greatly-improved alternative to TNR.)

You can always make the font white or yellow-white, regardless of the background colour.

You can put spaces in your header (go to the start of the line and repeatedly press RightArrow, Space) or increase the Tracking setting. I've only spaced one of the fonts here - Times New Roman. This process will put one space between letters, and three between words. With most fonts, you can repeat this process, to give an even greater effect.

Outline your text. (Use Stroke in Adobe Photoshop 6.0 or 7, or in Adobe Photoshop 5.0, use Outer Glow (Mode Normal, Opacity 100%, Blur 2, Intensity 600)). Outlining is essential for all fonts, especially when your text and background are both dark or both light. The outline on TIMES hasn't come out well here, because the font is too scrawny and small, but it comes out well when the font is slightly larger.

Add the shadow, which makes your text look like it's three-dimensional. Make sure you select the size option, and reduce it to zero. This will make your shadow solid, rather than a diffuse blur.

<< Return to Photoshop Tutorials