Category: 

What Is an HTML Font Family?

Article Details
  • Written By: Angela Farrer
  • Edited By: W. Everett
  • Last Modified Date: 24 August 2016
  • Copyright Protected:
    2003-2016
    Conjecture Corporation
  • Print this Article
Free Widgets for your Site/Blog
Roughly one-fifth of the world's stock of gold - worth over $200 billion USD - is stored under the streets of London.  more...

September 30 ,  1949 :  The Berlin Air Lift ended.  more...

A hypertext markup language (HTML) font family is a group of similar typeface choices rendered in the coding of a web page. Setting a generic HTML font family provides a range of fonts that can appear when different web users open a published website. Most computer users have only a limited number of font choices on their machines, depending on factors such as their operating systems and choices of web browsers. Web programmers who code a specific font for all of their text may limit their numbers of site visitors because that font may not render correctly on everyone's monitor screen. Using an HTML font family usually avoids this problem, and experienced web designers usually choose at least one of the three most common font families.

Working with HTML involves a range of design decisions for creating a website that is both interesting and user-friendly. One of the more frequent beginner mistakes is selecting a font that is difficult for many users to read and that may not render correctly in all browsers. This type of text often belongs to the HTML font family designated fantasy or decorative. While these fonts may appear trendy, most web designers recommend that they should only be used sparingly and for an added embellishment such as a drop-cap letter at the opening of a paragraph.

Ad

The three most common choices for web page text are sans-serif, serif, and monospace. Sans-serif letters are constructed from straight lines and include popular fonts such as Arial and Helvetica. Serif fonts such as Times New Roman have ending tails on each stroke of each letter that can make reading large blocks of this text more difficult on a computer screen. Monospace fonts are normally used only for descriptions of tags or code elements to make them stand out from the rest of the web copy; a web site about HTML coding may often have examples of tags rendered in monospace for instance.

Designating an HTML font family involves giving the web browser instructions to apply the first available font in a group to a web page. If the first font is not available in a certain user's computer system, the browser will search for and render the second available font. A web designer who wishes to apply an HTML font family to a page can use either the font-face tag or the font-family property tag in a cascading style sheet (CSS) declaration.

Ad

You might also Like

Recommended

Discuss this Article

Post your comments

exception 'Exception' with message 'error writing captcha: Duplicate entry '2147483647' for key 'PRIMARY'' in /ssd/www/wisegeek/public_html/_core/classes/public/Captcha.php:44
Stack trace:
#0 /ssd/www/wisegeek/public_html/_core/controls/public/ControlDiscussionPostBox.php(324): Captcha->createCaptcha()
#1 /ssd/www/wisegeek/public_html/framework/classes/Control.php(104): ControlDiscussionPostBox->preRender(false)
#2 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): Control->render()
#3 /ssd/www/wisegeek/public_html/tpl/default-nocustom-lu/pages/public/article/article.htm(526): Control->__toString()
#4 /ssd/www/wisegeek/public_html/framework/classes/Control.php(300): require('/ssd/www/wisege...')
#5 /ssd/www/wisegeek/public_html/framework/classes/Control.php(309): Control->requireTpl('pages/public/ar...', Object(PageArticleCom), true)
#6 /ssd/www/wisegeek/public_html/framework/classes/Control.php(131): Control->renderTpl('pages/public/ar...', Object(PageArticleCom))
#7 /ssd/www/wisegeek/public_html/framework/classes/FormDataControl.php(87): Control->renderTemplate()
#8 /ssd/www/wisegeek/public_html/framework/classes/Control.php(109): FormDataControl->renderTemplate()
#9 /ssd/www/wisegeek/public_html/framework/classes/ScriptPage.php(50): Control->render(false)
#10 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): ScriptPage->render()
#11 /ssd/www/wisegeek/public_html/framework/classes/Page.php(97): Control->__toString()
#12 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(443): Page->processRequest()
#13 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(7): PublicFrontController->renderPage()
#14 /ssd/www/wisegeek/public_html/index.php(11): PublicFrontController::run()
#15 {main}