Types Of Fonts That Can Be Used With Html

The right font can help people use your website better.

Selecting a clever font can make your Web design exciting, but using an unpopular font with HTML can lead to a broken Web page. The World Wide Web Consortium has come up with a solution using cascading style sheets. In the HTML/CSS tag, specify a font “family” to be used if your first choice is unavailable. This enables designers to specify their favorite fonts and still avoid broken pages. The five font families are serif, sans-serif, cursive, fantasy and monospace.

Serif Fonts

According to the W3C, serif fonts have “finishing strokes, flared or tapering ends, o r… actual serifed endings.” They may also have a wide variation between thick and thin strokes, and individual letters may have differing widths. Times New Roman and Georgia, for example, are two very common serif fonts. An example of a less-common serif font is Warnock Pro. You can use Times New Roman and Georgia with confidence. It is also possible to use Warnock Pro by incorporating this code into your style tag:

font-family: “Warnock Pro”, serif;

Serif fonts are also described as Mincho in Japanese and Sung in Chinese.

Sans Serif Fonts

Sans serif literally means “without a serif.” The W3C defines sans-serif fonts as having “stroke endings that are plain–without any flaring, cross stroke or other ornamentation.” Like serif fonts, sans serifs may have differing letter widths. Common sans-serif fonts include Helvetica, Arial and Verdana. Gotham is a less-common example. As with serif fonts, you can use common sans serifs freely. To safely use Gotham for your website, insert the following into your style tag:

READ  Prewrite An Ogt Essay

font-family: “Gotham”, sans-serif;

Sans-serif fonts are also described as Gothic in Japanese and Kai in Chinese.

Monospace Fonts

Monospace fonts are required by definition to have the same width for every letter or character. Courier and Courier New are the best-known examples of monospace fonts. Overall, monospace fonts are not very popular in Web design. If you plan to use anything other than Courier or Courier New, you should always define a backup font family. For example, if your design incorporates Prestige as the font, your style tag should look like this:

font-family: “Prestige”, monospace;

Monospaced fonts are almost never used in Arabic and other cursive-oriented scripts.

Cursive and Fantasy Fonts

The W3C describes cursive fonts as having “either joining strokes or other cursive characteristics beyond those of italic typefaces.” Cursive letters usually connect to one another, and “the result looks more like handwritten pen or brush writing than printed letter work.” Certain languages, such as Arabic, use cursive fonts primarily, though they are less common in English and nonexistent in Japanese and Chinese. Fantasy fonts, on the other hand, are decorative designs that are based on representations of characters. When using a cursive or fantasy font, it is always a good idea to provide a backup font family in your style tag. The following example uses the Zapf-Chancery cursive font:

font-family: “Zapf-Chancery”, cursive;