HTML : Formatting fonts and text using CSS


Fonts are fundamental to all written communication. Fonts convey emotion, style and help your writing convey implicit meaning. For instance, if you are chatting in a chat-room or emailing someone and you type USING ALL CAPS, a common Web convention is that you are yelling.

A font’s meaning can be subtle. A choice as simple as using Comic Sans rather than Arial can convey an entirely different mood.

Welcome to My Site (Comic Sans)

The Comic Sans font conveys a loose and informal site while Arial seems more formal.

Welcome to My Site (Arial)

The Lucida Blackletter font conveys something out of Bram Stoker’s Dracula. It is neither loose and informal, nor formal. It’s spooky.

Welcome to My Site (Lucida Blackletter)

All three font choices give users entirely different expectation of a site’s content. I would expect a goth rock band to use Lucida Blackletter, but not an online banking firm. A goth band that used Arial for its site would seem rather boring; and I definitely would not bank on an online banking site that used Comic Sans. Different fonts are appropriate, depending upon the impression you want to give. Choose your site’s fonts carefully.

But before getting too creative, and choosing an exotic font (such as Lucida Blackletter), note that you should choose fonts commonly found on most operating systems. If your page specifies a font which is not installed on OS of a user, then the browser displays your page using the user’s default font set in their browser. The hours you spent agonising over a font was wasted time; users will probably view your site in Times, Courier or some equally boring font.

CSS also provides several properties that replace the deprecated HTML text formatting tags and attributes such as the paragraph element’s align attribute and the <u></u> tags that underline text. This formatting is important to the formatting of a page and adds extra formatting choices. In this and subsequent articles you will get to know about how we can use CSS to underline, overline, strikethrough, change case and make your text blink. You will learn to align your text and to add spacing to your text. These properties, combined with CSS font properties, are how you should format your HTML text.


CSS Formatting

Setting an element’s font-family

You declare a font’s family by using the font-family property. A font-family is a family of similarly designed fonts. For instance, Arial, Helvetica and Times New Roman are all font-family examples. You can also use a generic font-family name. The generic font-family names are: serif, sans-serif, cursive, fantasy and monospace. The generic font-families are common to all browsers on all computers and so they are the safest bet if you want to be certain that all users have your specified font.

When declaring a font’s family, you can list more than one font. This is important because if a user’s system doesn’t have the font-family needed; it looks for the next font-family in the list. When using font-family, good practice is to end the list with one of the five generic font-family values. That way a browser is provided with multiple options. For instance, if Arial isn’t found, use Tahoma. If Tahoma isn’t found, than use serif:

p {font-family: arial, tahoma, serif;}

Because serif is one of the generic font families, it is guaranteed to be there.

Elements inherit font-family from their parent, and can override their parent’s font. The best way to specify fonts is by assigning the body a font-family – that way your pages will all share the same base font. Then, for paragraphs, headings and other text where you want the font to be different, you can override the body element’s font.

Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc.

Leave a Reply