weft (Web Fonts Embedding Tool)

The Web Embedding Fonts Tool, or weft, is Microsoft's utility for generating embeddable web fonts. weft is used by webmasters to create 'font objects' that are linked to their web pages so that users using Microsoft's Internet Explorer web browser will see the pages displayed in the font style contained within the font object. weft scans the html document file(s), the TrueType font file(s), and some additional parameters. It adjusts the html files and creates Embedded OpenType files for inclusion on the web site. These files usually use the extension "eot". weft can embed most fonts, but it will not embed fonts that have been designated as 'no embedding' fonts by their designers. weft may reject other fonts because problems have been identified. Embedded fonts are widely used to generate non-English-language websites.

As of May 2010, the most recent version of the tool (weft 5.3.2) was released on 25 February 2003.

An open source alternative is "ttf2eot".

Microsoft PowerPoint 2007 and 2010 also generate eot files with the "fntdata" extension when fonts are selected to be embedded in a presentation by the PowerPoint client application. These eot files can be extracted from the "pptx" file and used directly on web pages.

Embedded OpenType

Core Fonts for the Web (Web Fonts)

Core Fonts for the Web was a project started by Microsoft in 1996 to create 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 Webdings, all of them in TrueType font format packaged in executable files (".exe") for Microsoft Windows and in BinHexed Stuff-It archives (".sit.hqx") for Macintosh. These packages were published as freeware under a proprietary license imposing some restrictions on usage and distribution. They are still available from some third-party websites. The project included some of the latest TrueType versions of the fonts available in 2002. Updated versions of the fonts released in following years were not published as freeware and are usually available only after purchasing a license or as a part of some commercial products.

Core Fonts for the Web

The Web Open Font Format (woff) is a font format for use in web pages. It was developed during 2009 and is in the process of being standardized as a recommendation by the World Wide Web Consortium (W3C) Web Fonts Working Group.

WOFF

woff is mostly ttf with compression and additional metadata. The goal is to support font distribution from a server to a client over a network. This means that bandwidth is an important parameter.

• Filename extension .woff
• Internet media type application/font-woff

Web Open Font Format, Web Open Font Format

WOFF is a compressed wrapper for TrueType, OpenType, and Open Font formats.

Mozilla Firefox has supported WOFF since version 3.6.

Font Embedding

Font embedding is the process of placing eot font files onto a server along with the web site's other supporting files. The font objects (files) are then referenced within the site's css via @font-face.

Font Linking

Font Linking is the method by which a style sheet declares and references a web font family that is linked to one or more font objects (files). Font linking differs from font embedding because the font object itself is not embedded into the web document, and does not necessarily reside on th same server as the web document.

Font Hinting

"Hints" are information included in a font program to aid the rasterizer in scaling character outlines to various sizes.

Hinting

Kerning

Kerning refers to data included in a font that specifies how to adjust the spacing of a specific pair of characters in a font.

Kerning

sfnt-Based Fonts

sfnt-based fonts - TrueType, OpenType, and Open Font formats.

Subpixel Rendering and Cleartype

Subpixel Rending on Mac OS X is activated by default; Cleartype is on in Windows by default in Vista and 7, Office 2007 and 2010, ie7+ and Windows Live Messenger.

Font Hinting Icons

Different Kinds of Hinting

Best Google Web Fonts

Typography

Proof are words used to expose a typeface by showing particular letters in a sequence. Proof is also known as key words, trial words, test terms, and Lorem Ipsum. Slang is a proof; it contains an uppercase and lowercase letters, an ascender, descender, as well as both round and straight letters. Some other proofs are Oboe, Champion, Hamburgevons, Hamburgefonts, and Hamburgefontsiv.

Lowercase letters have no ascenders or descenders.

A font family is a set of related fonts that have contrasting proportions and weights.

A type set is a complete set of letters, including upper and lowercase characters, as well as basic punctuation. A type set is also known as a font.

An advanced type set typically includes alternating characters/small caps. Advanced type sets are also known as expert sets.

A typeface's apparent lightness or darkness is known as it's optical weight. The following terms describe type color, from darkest to lightest:

• Black
• Ultra Bold
• Extra Bold
• Bold
• Demi or Demi Bold
• Medium
• Book
• Lightface
• Hairline

Arm/leg

An upper or lower (horizontal or diagonal) stroke that is attached on one end and free on the other.

Ascender

The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.

Bar

The horizontal stroke in characters such as A, H, R, e, and f.

Bowl

A curved stroke which creates an enclosed space within a character (the space is then called a counter).

Cap Height

The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).

Counter

The partially or fully enclosed space within a character.

Descender

The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline.

Ear

The small stroke that projects from the top of the lowercase g.

Link

The stroke that connects the top and bottom part (bowl and loop) of a two–story lowercase g.

Loop

The lower portion of the lowercase g.

Serif

The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles.

Shoulder

The curved stroke of the h, m, n.

Spine

The main curved stroke of the S.

Spur

A small projection off a main stroke found on many capital Gs.

Stem

A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals).

Stress

The direction of thickening in a curved stroke.

Stroke

A straight or curved line.

Swash

A fancy flourish replacing a terminal or serif.

Tail

The descender of a Q or short diagonal stroke of an R.

Terminal

The end of a stroke not terminated with a serif.

X-height

The height of lowercase letters, specifically the lowercase x, not including ascenders and descenders.

Anatomy of a Character

Faux Bold and Faux Italic

Faux bold occurs when a browser can't find the true bold version of a font and fakes it via creating faux bold by slightly stretching the vertical strokes of the original font.

Faux italic occurs when a browser can't find the true italic version of a font and fakes it via creating faux italic by stretching and slanting the original font at an angle.

Faux bold italic occurs when a browser can't find the true bold italic version of a font and fakes it via creating faux bold italic by stretching the vertical strokes and slanting the letters at an angle, resulting in letters that are clunky in comparison to the rhythm and texture of a true bold italic font.

All three faux font styles negatively impact legibility, which in turn undermines readability; letters that have been stretched and slanted no longer have well balanced strokes and spaces.

Avoiding Faux Weights and Styles with Google Web Fonts

Non Breaking Hyphen

nonbreaking hyphen is not really a hyphen; rather, it is a command not to hyphenate. When placed in front of a word or a group of characters acting as a word, such as a phone number, web address or email address, that word will not be hyphenated. This is helpful not only in text, but also in headlines that you don’t want breaking onto two lines.

Here’s how it works: place the cursor in front of the word you want to remain unhyphenated, then insert the nonbreaking hyphen, which can be accessed in the following manner, depending on which application you are using

nonbreaking hyphen

Baseline Shift

Baseline shift is a feature that shifts a character (or group of characters) up or down relative to the baseline, in tiny increments. Generally speaking, Baseline shift settings use positive numbers to shift characters up, and negative numbers to shift them down.

Note: that baseline shift does not change the actual line spacing of a character. When making overall changes in the leading, the baseline-shifted position will be preserved proportionally.

Baseline shift is a great tool for fine-tuning your typography. Try using it to:

• create fractions manually. Use baseline shift to raise the numerator in diagonal fractions.
• optically position symbols, such as register, copyright and trademark (®, © and ™).
• adjust the position of bullets, ornaments and other font-based graphics.
• be expressive with type by raising and lowering individual characters to create a jumpy, jittery effect.
• tweak the position of parenthesis, braces and brackets relative to the type they enclose.

Baseline Shift

Dev Toolkit

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.

• Web Font Specimen
• tinytype is a compatibility table showing the available default system fonts across different mobile platforms
• Mobile Fonts

References & Resources

• Font Formats
• The Elements of Typographic Style Applied to the Web
• Font Formats
• Typography
• Outline Font
• What's in a Font? The Complete Manual of Typography
• TrueType
• TrueType Reference Manual
• Internationalization
• Adobe Glyphlet Development Kit (gdk) for SING Gaiji Architecture
• The Indian Type Foundry (Internationalization/r-t-;)
• Oldstyle Figures
• Proportional vs. Tabular Figures
• Converting Text to Outline

Macintosh Dfonts

Many Macintosh-specific fonts use a file structure that predates OS X. In this structure, the file contents are divided into two parts: a data fork and a resource fork. Older versions of the Mac OS used data in the resource fork to tell (among other things) what application created a specific file. Mac OS X does this by reading a file's filename extension, such as .doc. Dfonts are a variety of TrueType font that have no resource fork, and they are included in OS X for the sake of font compatibility with other computers running the UNIX operating system. (OS X, like Microsoft Windows, is based on UNIX.)

You can use dfonts just as you would any other Macintosh TrueType font. Documents formatted with them will not, however, display correctly on Macs running operating systems that predate OS X.

What's in a Font? The Complete Manual of Typography