[Guide]Creating pixel-perfect text of small size

[ExTrEmEDwarf]

Gonna search some guides for text cuz few ppl needs them :)

 

Quick Overview

 

Look at these two buttons:

 

 

Text on the first button is typed with some default settings and on the second one text is corrected. Doesn’t it look much sharper? The main tools to achieve perfect appearance of characters are: anti-aliasing settings, horizontal shift over a pixel fraction (in different cases it can be done by non-scaled transformation, changing fractional width setting and manual tracking) and horizontal scaling of characters.

 

Let us take a closer look at each of these tools.

Anti-aliasing

 

Anti-aliasing is the set of rules that determine the appearance of semi-transparent pixels around the edges of symbol. In Adobe Photoshop, you can use one of four anti-aliasing settings: Sharp, Crisp, Strong and Smooth.

 

Let’s see the difference on the example of 14pt Tahoma text:

 

 

Notice blur at the top and the bottom of the symbols. With Crisp, Strong and Smooth anti-aliasing we have semi-transparent pixels at the top of A, B, C and at the bottom of C, d and e of that make the text look dirty. Sharp anti-aliasing avoids this problem by cutting vertical blur. Generally, Sharp makes type appear the sharpest - with the least amount of 'soft' (i.e. semitransparent) pixels introduced. Although Sharp anti-aliasing slightly deforms characters shape, it is the best one to achieve really sharp text of small size.

 

So, the first step to pixel-perfect text is to set its anti-aliasing to ‘Sharp’.

Shifting over a pixel fraction

 

Human eye generally notices text blur in two directions, horizontal and vertical. Although Sharp anti-aliasing makes horizontal parts of symbols look nice, vertical parts may have problems. Look at this letter with default appearance:

 

 

Notice that vertical part consists of three pixel columns and the first and the last ones are semi-transparent, i.e. its overall width is near two pixels. The letter will become sharper if it’s shifted to occupy two pixel columns with less transparency instead of three. To obtain this, character should be shifted over a distance less than one pixel. With separate symbols (e.g. letters on a virtual keyboard) it’s handy to make Transform without scaling — just press right or left arrow on the keyboard to slightly move the symbol.

 

Unfortunately, this won’t help much if you work with words. Transformation moves all letters of the word over the same distance, while usually letters have different width and therefore need to be shifted over different pixel fractions. This can be done by modifying tracking for each letter. But before starting this exhausting work, you can try to obtain better results by turning off Fractional Widths.

Fractional Width

 

By default, type in Adobe Photoshop is displayed using fractional character widths. This means that spaces between symbols keep original proportions—and in most cases are fractional. Thus, some letters become shifted relative to pixel grid. Turning this setting off modifies the spaces between letters to whole number of pixels. This can make most of letters significantly sharper:

 

 

In the second line, ‘vertical’ letters t, f, r, i, l are released from blurry pixel columns because they are arranged on pixel grid.

 

You can find Fractional Widths settings in the menu covered upon small ‘Options’ icon in the top right of Character palette.

 

 

Tracking

 

Turning Fractional Width off does not provide perfect results. In previous example, there still remains significant blur in letter d of ‘words’. It can be removed by shifting over a pixel fraction which can be achieved by setting tracking for previous letter. Play with numbers until you get the appropriate result. And don’t forget about following characters that are moving too: in this example tracking was set to 25 for i and to -25 for d to keep h and s on their previous places.

 

 

Also you should remember about text alignment while tracking characters. Tracking always sets spacing after selected symbol, i.e. shifts right all following letters if paragraph is left-aligned. For right-aligned paragraph, the following letters will remain on their places but all previous letters including the selected letter itself will be shifted left. For center-aligned text, both following and previous letters will be shifted over a half of selected tracking and that’s really uncomfortable. So, it’s preferable to work with tracking of left-aligned text and change the alignment after correction if necessary.

Horizontal scaling

 

Sometimes font size creates a problem. Notice that letter h on the previous image has a blur in short vertical line; this is caused by font proportions and cannot be changed by moving. Such partial blur can be corrected by changing width of a separate character (this won’t hurt proportions much if you stay between 95—105%):

 

 

At last, this word looks totally sharp!

Remember the contrast

 

Visual sharpness significantly depends on contrast of text and background colors. Unwanted blur becomes more noticeable with the higher contrast. The same text can look quite sharp when appearing dark on the light background, but becomes blurry when inverted—because light text on the dark background visually has higher contrast. Look at the example:

 

 

To avoid such unexpected effect, it’s better to work in resulting colors when correcting text blur.

 

A shadow around the text also works as a contrasting background, so keep this effect on to see exactly what you’ll get.

Conclusions

 

Here is the short guide to creating pixel-perfect text:

 

• Use ‘Sharp’ anti-aliasing.

• Shift separate characters horizontally over pixel fractions by non-scaled transformation.
  
• For words, try to turn Fractional Widths off. Then manually set tracking for separate characters.
  
• If a character has several vertical lines and font proportions don’t allow to make them all sharp, play with character width in range 95—105%.
  
• Remember that blur is more visible when the text has higher contrast with the background, so work in resulting colors and keep text effects on.

 

 

Author: Ksenia Chernyavska

[Tessellate]

Nice guide, well done, sure gonna use it when its needed :D

[ProJecT]

Awesome! I want to try it in black color or red! OMG!! Gaulwsa twra!!! Tha kanw kai template! Ty ty pl Extreme!!!