Web Fonts

Choosing Fonts
How text looks on our web pages is a major component of the overall appearance of our site.  We need to choose our text fonts carefully, keeping in mind the following:

  • Only those fonts that are installed on our viewers’ computers will display properly on our web pages.
  • For this reason, we are limited to a handful of so-called “web safe fonts”, i.e. those fonts that are installed on nearly all computers.
  • Whichever font we choose as primary, we should provide one or more “backup” fonts for the browser to use in case the main one is not available.

Web Safe Fonts
Fonts are divided into two major groups: serif and sans-serif.  Here are the traditional fonts that we may use safely, since more than 99% of web visitors will have them installed on their computers:web-fontsWhat’s a Serif and Sans-serif?serif-san-serif
A “serif” is the extra flourish at the ends of letters.  Serifs are intended to enhance readability, especially in physical print media, such as newspapers and magazines.

A “sans-serif” font is one that does not contain serifs on its characters.  These fonts are generally preferred for web pages, as they are slightly easier to read on a computer screen.sans-serifSerif vs. Sans: the final battle


Setting Fonts and Fallbacks
We are already familiar with the font-family property in CSS.  Until now, we simply designated a single font:font1A better approach is to set our preferred font but also provide a second (fallback) font, and a third (final fallback) font, like this:
font-css
Additional fallback fonts may be listed, if desired.  Two named fonts and the generic fallback should be considered the minimum.

CSS Font Syntax
If the named font contains a space, we must enclose it in quotation marks:
css-syntax
font-fallback
Always list either serif or sans-serif as the final entry in your list.  It will be the “ultimate” fallback font, as all browsers have these generic fonts available to use.

Font Strategies
When choosing fonts for your own web pages:

  • Experiment using various fonts and sizes on your pages until you find those that match the “look and feel” for which you’re aiming.
  • Visit websites in which you find the text visually appealing.  View the page source to see which fonts they are using.
  • The Comic Sans MS font is fun and lighthearted but not appropriate for a professional website.
  • It’s OK to name a relatively exotic font in your font-family declaration, as long as you have a web safe fallback font that renders acceptably on the page.
  • As a general web design rule, avoid using more than two different fonts on a single web page.

Types of Web Fonts
When it comes to rendering type on the Web, a designer has three primary options:

  • Images of type
  • Web-safe fonts
  • Font replacement and or embedding
Designer Control
Images of types
doyaldsfix
Web-safe Type
web-safe1
 Font replacement
font-replacement
 Font embedding
type-image

Image Type 
Images of type offers a Web designer the most control over the typography on a web page. A designer can freely choose a font from  his or her library to make adjustments to it. Images from type enable a designer to match or express a concept exactly as the designer envisioned.
silly-poems

Web-Safe Type
These fonts vary slightly in appearance from Mac to PC–and their display varies from browser to browser–the general appearance is consistent enough that a designer can reasonably predict the look of the finished designed when viewed by the user.
daytum
Font Replacement or Embedding

This gives the designer the most typographic flexibility with their design, while still being able to take advantage of the search-ability of live text.
mica

CSS3 uses a technique called @font-face supported by designers and by the companies that make and license fonts. @font-face lets you embed fonts within a page by declaring the font you want and placing this font on your web server. When a user visits your site, the browser renders the page using this font where specified.
font-face1
If you want to display the Sigma font on as many browsers as possible, you need another method to display the font.font-face2

Different Font Formats

TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.


References
The Web Designer’s Guide to Font Replacement Methods
Font Replacement Methods: Techniques for Web Fonts
CSS3 Web Fonts

Advertisements