Font family (HTML)
Encyclopedia
In HTML
and XHTML
, a font face or font family is the typeface that will be applied by a web browser
to some text. The font is relevant for the display of text on the screen, on a printer or another device.
A font family and other presentational attributes of a font may be applied in HTML code in either cascading style sheets
(CSS) or the deprecated
HTML
In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic), and weight (like regular and bold).
The web browser will only be able to apply a font if it is available on the system on which it operates, which is not always the case. HTML code writers may list in preferential order font families to use when rendering text. The font list is separated by commas (as shown above). To avoid unexpected results, the last font family on the font list should be one of the five generic families which are by default always available in HTML and CSS. In the absence of a font being found, the web browser will use its default font, which may be a user-defined one. Depending on the web browser, a user can in fact override the font defined by the code writer. This may be for personal taste reasons, but may also be because of some physical limitation of the user, such as the need for a larger font size or the avoidance of certain colors.
Under Windows API
, these families are identified as Roman, Swiss, Script, Decorative, and Modern, respectively.
's Internet Explorer
, for instance, always displays serif and Times as Times New Roman, and sans-serif and Helvetica as Arial
.
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
and XHTML
XHTML
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
, a font face or font family is the typeface that will be applied by a web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
to some text. The font is relevant for the display of text on the screen, on a printer or another device.
A font family and other presentational attributes of a font may be applied in HTML code in either cascading style sheets
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
(CSS) or the deprecated
Deprecation
In the process of authoring computer software, its standards or documentation, deprecation is a status applied to software features to indicate that they should be avoided, typically because they have been superseded...
HTML
font
element.In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. For example, the Times family includes different font sizes, styles (like roman and italic), and weight (like regular and bold).
The web browser will only be able to apply a font if it is available on the system on which it operates, which is not always the case. HTML code writers may list in preferential order font families to use when rendering text. The font list is separated by commas (as shown above). To avoid unexpected results, the last font family on the font list should be one of the five generic families which are by default always available in HTML and CSS. In the absence of a font being found, the web browser will use its default font, which may be a user-defined one. Depending on the web browser, a user can in fact override the font defined by the code writer. This may be for personal taste reasons, but may also be because of some physical limitation of the user, such as the need for a larger font size or the avoidance of certain colors.
Generic font families
The generic font families defined in HTML and CSS are:Family | Example (browser dependent) |
---|---|
cursive Cursive Cursive, also known as joined-up writing, joint writing, or running writing, is any style of handwriting in which the symbols of the language are written in a simplified and/or flowing manner, generally for the purpose of making writing easier or faster... |
The quick brown fox jumps over the lazy dog. 0123456789 |
fantasy | The quick brown fox jumps over the lazy dog. 0123456789 |
monospace | The quick brown fox jumps over the lazy dog. 0123456789 |
sans-serif Sans-serif In typography, a sans-serif, sans serif or san serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without".... |
The quick brown fox jumps over the lazy dog. 0123456789 |
serif Serif In typography, serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. A typeface with serifs is called a serif typeface . A typeface without serifs is called sans serif or sans-serif, from the French sans, meaning “without”... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Under Windows API
Windows API
The Windows API, informally WinAPI, is Microsoft's core set of application programming interfaces available in the Microsoft Windows operating systems. It was formerly called the Win32 API; however, the name "Windows API" more accurately reflects its roots in 16-bit Windows and its support on...
, these families are identified as Roman, Swiss, Script, Decorative, and Modern, respectively.
Generic fonts
The font-family can use a specific named font (like Heisei Mincho W9), but the result depends on the fonts installed on the user machine. Font names must be quoted if they contain whitespace. The actual appearance will depend on the browser and the fonts installed on the system. A default installation of MicrosoftMicrosoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
's Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
, for instance, always displays serif and Times as Times New Roman, and sans-serif and Helvetica as Arial
Arial
Arial, sometimes marketed or displayed in software as Arial MT, is a sans-serif typeface and set of computer fonts. Fonts from the Arial family are packaged with Microsoft Windows, some other Microsoft software applications, Apple Mac OS X and many PostScript 3 computer printers...
.
Font | Example (dependent on installed fonts) |
---|---|
Antiqua | The quick brown fox jumps over the lazy dog. 0123456789 |
Arial | The quick brown fox jumps over the lazy dog. 0123456789 |
Avqest | The quick brown fox jumps over the lazy dog. 0123456789 |
Blackletter Blackletter Blackletter, also known as Gothic script, Gothic minuscule, or Textura, was a script used throughout Western Europe from approximately 1150 to well into the 17th century. It continued to be used for the German language until the 20th century. Fraktur is a notable script of this type, and sometimes... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Calibri Calibri Calibri is a humanist sans-serif typeface family under the Microsoft ClearType Font Collection.In Microsoft Office 2007, it replaced Times New Roman as the default typeface in Word and replaced Arial as the default in PowerPoint, Excel, Outlook, and WordPad... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Comic Sans Comic Sans Comic Sans MS is a casual script typeface modeled on fonts used in American comic books for several decades. Sans is short for sans-serif. The modern Comic Sans was designed by Vincent Connare and released in 1994 by Microsoft Corporation... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Courier | The quick brown fox jumps over the lazy dog. 0123456789 |
Decorative | The quick brown fox jumps over the lazy dog. 0123456789 |
Fraktur Fraktur (typeface) Fraktur is a calligraphic hand and any of several blackletter typefaces derived from this hand. The word derives from the past participle fractus of Latin frangere... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Frosty | The quick brown fox jumps over the lazy dog. 0123456789 |
Garamond Garamond Garamond is the name given to a group of old-style serif typefaces named after the punch-cutter Claude Garamond . Most of the Garamond faces are more closely related to the work of a later punch-cutter, Jean Jannon... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Georgia Georgia (typeface) Georgia is a transitional serif typeface designed in 1993 by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. Microsoft released the initial version of the font on November 1, 1996 as part of the... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Helvetica Helvetica Helvetica is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with Eduard Hoffmann.-Visual distinctive characteristics:Characteristics of this typeface are:lower case:square dot over the letter i.... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Impact | The quick brown fox jumps over the lazy dog. 0123456789 |
Minion | The quick brown fox jumps over the lazy dog. 0123456789 |
Modern | The quick brown fox jumps over the lazy dog. 0123456789 |
Monospace | The quick brown fox jumps over the lazy dog. 0123456789 |
Palatino Palatino Palatino is the name of a large typeface family that began as an old style serif typeface designed by Hermann Zapf initially released in 1948 by the Linotype foundry.In 1999, Zapf revised Palatino for Linotype and Microsoft, called Palatino Linotype... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Roman | The quick brown fox jumps over the lazy dog. 0123456789 |
Script | The quick brown fox jumps over the lazy dog. 0123456789 |
Swiss | The quick brown fox jumps over the lazy dog. 0123456789 |
Times New Roman Times Roman Times New Roman is a serif typeface commissioned by the British newspaper The Times in 1931, created by Victor Lardent at the English branch of Monotype. It was commissioned after Stanley Morison had written an article criticizing The Times for being badly printed and typographically antiquated... |
The quick brown fox jumps over the lazy dog. 0123456789 |
Verdana Verdana Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Thomas Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group... |
The quick brown fox jumps over the lazy dog. 0123456789 |
See also
- Presentational markup
- Web typographyWeb typographyWeb typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the tag in 1995,...
- Core fonts for the WebCore fonts for the WebCore fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet. It was terminated in 2002. It included the proprietary fonts Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and...