Web-safe fonts

Web-safe fonts

Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by web content authors to increase the chance that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will select an alternative — in the case of dingbat typefaces the alternative is unlikely to have similar characters at the same code points.

CSS Generic Font Families

The most safe option is to use the generic font families as defined by the CSS. These are: sans-serif, serif, monospace, cursive and fantasy. One of them should always be specified as a last resort for every "font-family" CSS property. Sans-serif is regularly specified in CSS as the default for generic font families, as sans-serif fonts are more easily readable on screens.Fact|date=July 2008

Examples

sans-serif
serif
monospace
cursive
fantasy

Microsoft's Core Fonts for the Web

Microsoft has started a Core fonts for the Web initiative. However, despite the name, only some of the fonts defined there are web-safe indeed. These are: Arial, Courier New, Georgia, Times New Roman, Verdana, Trebuchet MS (more recently) and Lucida Sans (to some extent).

Examples

Arial
Courier New
Georgia
Times New Roman
Verdana
Trebuchet MS
Lucida Sans
Note: These examples may not display properly in all browsers/operating systems

Unicode Fonts

Only two fonts available by default on the Windows platform, Arial and Lucida Sans, provide a wide Unicode character repertoire. A bug in Verdana (and the different handling of it by various user agents) hinders its usability where combining characters are desired.

Dingbats

No dingbats font, including Webdings, can be considered web-safe.

Workarounds

A common hurdle in web design is the programming of mockups that include non-web-safe fonts. There are a number of solutions for situations like this. One common solution is to "slice" out the text and reference the particular font along with a similar replacement. For instance, if a heading contains a Windows Vista-specific font, the programmer would write the code such that the heading is physical text (rather than an image) and references the particular font. If the font is not present on a viewer's computer, the website falls back on a similar font or set of fonts that are similar or are suitable replacements.

Another practice is to use image replacement techniques. These methods store the text in question as physical text and then overlay the text with an image containing the text typed out in the correct font. This is good for search engine optimization and aesthetic purposes, though the text cannot be selected (for say, copy and pasting). However it should be noted that Mozilla Firefox for instance has the option "Copy" on the right click contextual menu for a highlighted image which copies the alt attribute to the clipboard.

A new technique in the web design community is the use of Flash-based solutions such as sIFR. They work similar to image replacement techniques, though the text is selectable and rendered as a vector. The downside to this method is that the tools needed to create sIFR files are generally not readily available for free.

"This Digital typography-related article is a . You can help Wikipedia by plainlink|url=fullurl:FULLPAGENAME|action=edit expanding it".

External links

* [http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html A List of Web Safe Fonts]
* [http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ Web safe fonts by operating system and type]


Wikimedia Foundation. 2010.

Игры ⚽ Нужно решить контрольную?

Look at other dictionaries:

  • Web typography — Web fonts allow Web designers to use fonts that are not installed on the viewer s computer. Web 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… …   Wikipedia

  • Web design — is the process of planning and creating a website. Text, images, digital media and interactive elements are shaped by the web designer to produce the page seen on the web browser.[1] Web designers utilize markup language, most notably HTML for… …   Wikipedia

  • Core 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.[1][2] It included the proprietary fonts Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New …   Wikipedia

  • Font embedding on the Web — refers to the ability to embed fonts into web pages. This allows for more flexibility when deciding about what font to use, and is especially useful for web pages that use foreign characters that are not widely supported. However, embedding font… …   Wikipedia

  • Safari (web browser) — Safari Safari 5.1 on Mac OS X Lion Developer(s) …   Wikipedia

  • Sentence spacing — Double sentence spaced typewriter text (1946) vs. single sentence spaced typeset text (1979) Sentence spacing is the horizontal space between sentences in typeset text. It is a matter of typographical convention …   Wikipedia

  • Yahoo! UI Library — Infobox Software name = Yahoo! UI Library (YUI) developer = Yahoo! latest release version = 2.6.0 latest release date = release date|2008|10|01 operating system = Cross platform (JavaScript) programming language = JavaScript genre = JavaScript… …   Wikipedia

  • Firefox — For other uses, see Firefox (disambiguation). Phoenix (web browser) redirects here. For the Phoenix browser based on tkWWW, see tkWWW. Firefox …   Wikipedia

  • Windows Presentation Foundation — This subsystem is a part of .NET Framework 3.0 Developed by Microsoft, the Windows Presentation Foundation (or WPF) is a computer software graphical subsystem for rendering user interfaces in Windows based applications. WPF, previously known as… …   Wikipedia

  • Amiga support and maintenance software — This article is a split of main article Amiga software and refers to any support and maintenance software that run on Amiga line of computers.See also related articles Amiga productivity software and Amiga Internet and communications software for …   Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”