typography type graphics photography

Photographer

TYPOGRAPHY TYPE GRAPHICS PHOTOGRAPHY Type graphics

Typography cannot always be neatly separated from the graphics of your Web site. Graphic text can be tightly integrated with images in ways that are impossible in HTML text:

www.dartmouth.edu/~socy15

For aesthetic reasons you may choose to use graphical representations of type rather than manipulate HTML type. In either case you'll need to understand how to best render type within GIF and JPEG graphics.

Anti-aliased type

Antialiasing is a technique widely used in computer graphics to optimize the look of graphics and typography on the display screen. Antialiasing visually "smoothes" the shapes in graphics and type by inserting pixels of intermediate colors along boundary edges between colors. In typography, antialiasing removes the jagged edges of larger type characters. At normal viewing distances antialiasing gives the impression that the type is rendered at a higher resolution:

Creating antialiased type
Sophisticated image editing programs such as Adobe Photoshop will create antialiased type automatically, and these "paint" image editors are where most Web designers create their graphic typography. If, however, you have a complex arrangement of typography and graphics , you may wish to work first in a drawing program such as Adobe Illustrator or Macromedia FreeHand. Drawing programs are better at laying out text and will let you edit the text up to the final rendering into a paint graphic to use on the Web page. Final rendering is usually done by importing the graphic into Photoshop, where all text will automatically become antialiased:

www.eng.yale.edu

We often use graphic type within banner or navigational graphics, but we rarely use graphic type simply as a stylistic substitute for headlines or subheads within a Web page. Purely graphic typography cannot be searched and indexed along with the HTML-based text on a Web page. Your best option is to repeat the textual content of the graphic inside an ALT tag and hope that search engines will pick up that content, too. Finally, bear in mind that graphic type is far more difficult to edit or update than HTML text.

When not to use antialiasing
Antialiasing is great for large display type, but it is not suitable for small type sizes, especially type smaller than 10 points. The antialiasing reduces the legibility of small type, particularly when you import it into Photoshop from a drawing program like Adobe Illustrator. If you need to antialias small type sizes, do it in Photoshop:

For the anatomic illustration below we used non-antialiased 9-point Geneva for the illustration labels:

source TYPOGRAPHY TYPE GRAPHICS PHOTOGRAPHY http://webstyleguide.com