CSS3 Fonts Notes | CSS: Presentation Layer
Standards Based Development
The quick brown fox jumps over the lazy dog. Literally. The quick brown fox jumps over the lazy dog, http://imgur.com/v2BoIZP
Font Characteristics, terms, and related information:
Typeface
Typeface (design) name: like "Georgia", or "Comic Sans".
Width
Font names associated with width:
- Condensed, Narrow, Compressed
- Expanded, Wide, Extended
Width can also have further divisions using preprended "extra-" or "ultra-".
Variant (Also Optical Variant)
- Small-caps
- Display
Slope
- Italic - re-designed characters that lean and infer a connection from one to another
- Oblique - the upright version is slanted
Weight
| Weight Name | Weight Shorthand |
|---|---|
| Hairline / Hair | H |
Ultra-light (font-weight:100) | UL |
Thin (font-weight:200) | T |
| Extra-light | XL |
| Light | L |
Book (font-weight:300) | R |
Regular / Normal / Plain / Roman / Standard (font-weight:400) (used for the default weight of the typeface) | R |
| Medium | M |
Semi-bold / Demi-bold (font-weight:500) | SB |
Bold (font-weight:600) | B |
Extra-bold / Extra (font-weight:700) | XB |
Heavy Black / Heavy / Black (font-weight:800) | V (Heavy) - K (Black) |
| Extra-black | |
Ultra-black / Ultra Bold (font-weight:900) | UB |
Font Weights in Windows
TrueType historically used values of 400 for a "regular" font in a Windows family with 700 for "bold" style-linked font; because of this, in practice many/most Windows applications do not handle all possible values witout problems. Certain weightclasses, or style-lining certain weights, can result in fonts which are incorrectly "smeared bold", or cases where regardless of which font is selected (regular or bold) either only the regular or bold font appears.
Adobe offers these guidelines to deal with applications that appear to exhibit the same problems with the same fonts (including Word 97 and Word 2000):
Usable Values
A font which is "regular" (not style-linked as the bold version of something else), any weightclass value from 250 to 1000 seems to work.
Because manual overrides can change values to any desired number, Adobe recommends that font developers should preserve at least the relative weight relationships of all fonts within any given "preferred family".
Adobe says "here are what ranges of weightclasses appear to work consistently as the "bold" style-links" from any given base weightclass, along with what names are normally associated with the given weightclass values (association made by makeotf by default, based on the TrueType specification):
- Reg Bold Range (usable increments of 50)
- 250: 600-1000 Thin, extra light, ultra light at this value can be bold to semibold or heavier
- 300: 600-950 Light can bold to medium, semi/demi, bold, extra-bold/ultra, or heavy
- 350: 600-900 (undefined) can bold to medium, semi/demi, bold, extra-bold/ultra, or heavy
- 400: 600-850 Regular can bold to semi/demi, bold, or extra-bold/ultra
- 500: 650-750 Medium can bold to bold
- 550: 600-800 (undefined) can bold to semi/demi, bold, or extra-bold/ultra
Setting Font Weights for Windows
Family and Super Family
A font family is usually the width variatn, for example "Arial Narrow". Many foundries commonly list fonts by:
- Typeface name (
Arial) - Super Family Group: Sans, Serif, Slab
- Family Group: Widths (like
Arial Narrow) - narrowest is first, widest is last - including any variants (likeGeorgia Small Caps) and the width - Slope (grouped by width or variant)
- Weight (grouped by slope)
Style-Linked Fonts
Style-linked fonts describes a font style/variant of the font-family in use; upon encountering the need, the style/variant are accessed and rendered...we're so used to it we don't even notice it. however, if the font-family does not have the style/variant that it is reaching for, it will create and render one on the fly. typically affecting the bold version of a typeface, instead of accessing the true-drawn bold weight, italic version of a typeface or a renderd slanted roman.
Style-link font families are common practice, especially text faces. A style-linked font allows you to highlight text in the regular/book weight, chose bold/italic from your application's style menu, and the font correctly renders its own true-drawn bold weight.
Style-linked fonts typically allow for actual bold italic weight to be accessible via style menu. Style-linking is also accessible for application's keyboard command shortcuts for styling text.
Font File Formats
| Format | Description |
|---|---|
T1 (.pfm), (.pfb), (.mmm) | PostScript Type 1 (atm font) |
Multiple Master (.mmm), (.pfb) | Multiple Master |
OTF (.otf) | CFF-flavoured OpenType |
TTF (ttf.) | TrueType or TT-flavoured OpenType |
WOFF (woff.) | Web Open Font Format (web-only font format) |
| SFD | FontForge's work file format |
| SFDir | FontForge's work directory format |
FON (.fon) | System Font |
| UFO | RoboFont's work directory format |
| VFB | Fontlab's work file format |
Licenses
| License | Description |
|---|---|
| GPL | The Free Software Foundation's General Public License |
| GPL2+ | Ditto, version 2 or later |
| LPPL | The LaTeX Project Public License |
| OFL | SIL's Open Font License |
| Utopia | Adobe's and TUG's collective Utopia licensing |
| Vera | Bitstream's licence for the typeface Bitstream Vera |
Hamburgefonts
Hamburgefonts is an ideal test word as it contains most of the shapes and strokes found in a typeface, so using it gives you a great idea as to what's in the font.
References and Resources
devlib
- Adobe Type 1 Font Format (pdf)
- Mapping of Adobe's Type 1 Fonts to OpenType (pdf)
- A Word About Symbol or 'Pi" Fonts (pdf)
- Adobe Font Name Reference Table (pdf)
- Adobe PostScript Font Naming Issues Technical Note 5088 (pdf)
SVG !!! ????
svg Developer Center - Adobe Developer Connection - Adobe's vector graphics tool, Adobe Illustrator creates and imports SVG files for print and the web. Within the Adobe Edge Tools & Services, SVG content can be styled and debugged using Edge Code and can be animated and embedded in HTML with Edge Animate.
What's In A Font
Compact Font Format
The Compact Font Format Specification (pdf)
OS X Quicklook Font – Preview international characters
To Show international characters in OS X (tested on Leopard, Snow Leopard, Lion) Quuicklook Font Preview edit file:
Benefits of OpenType/CFF Over TrueType Fonts
In sum, the two main benefits OpenType/CFF fonts have over TrueType fonts are 1) their smaller file size, and that 2) they require far less hinting information in order to render well in environments that allow some form of anti-aliasing.
The Benefits Of OpenType/CFF Over TrueType
"...some environments such as Mac OS X and iOS disregard font hints"
- Font hinting on iPad?
Initalism
Initalism aka an alphabetism, refers to an abbreviation formed from, and used simply as, a string of initials. Although acronym is widely used to refer to an abbreviation formed from initial letters, some dictionaries define acronym to mean "a word" in its original sense, while others include additional senses attributing to acronym the same meaning as that of initialism. The distinction, when made, hinges on whether the abbreviation is pronounced as a word, or as a string of letters. In such cases, examples found in dictionaries include NATO /ˈneɪtoʊ/, scuba /ˈskuːbə/, and radar /ˈreɪdɑr/ for acronyms, and FBI /ˌɛfˌbiːˈaɪ/ and HTML /ˌeɪtʃˌtiːˌɛmˈɛl/ for initialisms
The spelled-out form of an acronym or initialism (that is, what it stands for) is called its expansion.
Typography WebComm
