Using text (HTML tags) and images with varied fonts for web page and web site headings.

Sponsored Links

Headings and Fonts

One of the variables in web page design is ignorance of fonts installed on the visitor's computer. Though, specifying various fonts and font families through Style Sheets and the <font> tag is fine for body text, the emphasis from headings might be lost if they employ a singular font.

Headings are an important part of design. They provide a logical structure to a document and have to be rendered in the same fashion as specified by the designer.

But how to you keep the consistent display of headings when you don't know the fonts installed on the client?
A straight solution is to present headings in form of graphics rather than HTML text. You can then have the freedom to choose the font and the typography, without worrying about its final display.

Check the following examples of headings. All these images are GIFs.

Heading 1
1176 bytes, 4 color gif
Dimensions: 194 X 53

Heading 2
1872 bytes, 16 color gif
Dimensions: 179 X 54

Heading 3
1741 bytes, 4 color gif
Dimensions: 269 X 64

Take care not to overload the page with graphics and optimize all the image files.



Page contents: How to use HTML heading tags and images with different fonts for web page and web site headings.

AddThis Social Bookmark Button