FB Doug Meet

Search This Blog

July 9, 2011

DOgMEaT useS OpenTypographic Features

dоgмзaтdоgиимзaT о

DOgMEaT useS OpenTypographic Features

This page provides a simple, yet informative description of OpenType features along with illustrations of each OpenType feature.1ы 24 MEaTdOgdOgMEaT

  dOgMEaT 48 dOgMEaT 60 dOgMEaT 72 dOgMEaT

Small Capitals

Small Capitals

Small caps are often used by publishers to introduce a body of text or in headline copy. The examples below illustrate the improvement in the appearance of text when ‘true’ small capitals are used in place of ‘synthesized’ small capitals.


Swash

Swash

Swash glyphs are designed with an ornamental attachment, often based on a calligraphic model. These decorative glyphs may be used as drop capitals or in short phrases found in greeting cards or book jackets.


Contextual Swash ¿ À Â Î Ï Ô Ù Û Ü à â î ï ô ù û ü ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ Ÿ ƒ ˆ ˇ ˘ ˙ ˚ ˛ ˜ ˝ ​ ‌ ‍ ‎ ‏ ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ “ ” „ ‚ ‛ “ ” „ ‟ † ‡ • ‣ ․ ‥ … ‧ ‪ ‫ ‬ ‭ ‮ ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › › ※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁇ ⁈ ⁉ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞ ⁠ ⁡ ⁢ ⁣ ⁤ ⁥ ⁦ ⁧ ⁨ ⁩       € ™ ◊  fi fl fi fl ffi ffl

Contextual Swash

Swash glyphs can cause bad letter combinations. This feature substitutes a different glyph for problematic combinations.


 Case Sensitive Forms

Case Sensitive Forms

Case sensitive forms (below right) adjust their vertical position to better align with uppercase glyphs.


 Capital Spacing

Capital Spacing

Capital spacing is a feature which helps improve all caps text setting. Capital letters are typically designed to combine more naturally with lowercase letters and often appear too tightly spaced in all-cap settings (top). The cpsp feature inserts a small amount of space on either side of capital letters (bottom).


 Titling Case

Titling Case

Titling capitals (top line) are designed to be a bit more elegant in weight and proportion for setting large headlines compared to the regular text design (2nd line). Titling capitals are also useful as drop capitals (bottom left) in place of the regular design (bottom right).


 Figures

Tabular Figures

Tabular lining figures are typically set as the default style of figure. ‘Tabular’ means that the figures all share the same advance width so that they will align vertically. ‘Lining’ means they optically align along a figure height line and the base line. These figures are best used in financial reporting or any place where alignment is crucial.


 Proportional Figures

Proportional Figures

Proportional lining figures are not tabular and are spaced to fit together more like alphabetic glyphs. For instance the figure 1 is very narrow like the letter I. These figures are best used in text where it is not necessary for figures to be tabular.


 Oldstyle Figures

Oldstyle Figures

Oldstyle proportional fi gures (onum) are also called ‘ranging’ figures because they range above and below the xheight and baseline. The intent is for the figures to blend in with lowercase text and not become a distraction to the reader.


 Fractions

Fractions

Fractions can easily be created for any numerator/denominator combination.


 Scientific Inferiors, subscript and superscript

Scientific Inferiors, Subscript & Superscript

Inferiors, super and subscript glyphs are designed for these fonts and not synthesized by the application.


zachleat.com: CSS Sprites Using @font-face

Original Size using Embedded Font

ABCDEFGHIJKLMNOPQRST

400% Size using Embedded Font

ABCDEFGHIJKLMNOPQRST

Test for :before/:after Content Trick

3 Characters should show here: B

Original jQuery UI Icons

jQuery UI Icons using Embedded Font (and :before content trick)

CSS color: red;

CSS color: blue;

 Ordinals

Ordinals

Ordinals are properly designed (left) as opposed to synthesized (right).


 Stylistic Alternates

Stylistic Alternates

The stylistic alternates feature allow for multiple designs for a single character. In the case of Miramonte, a more traditional two-story ‘a’ is in the font and can be used in place of the default ‘a’ (right).


Font-face Demo for the Lobster Two Font

DOgMEaT useS OpenTypographic Features

Font-face Demo for the Lobster Two Font

Lobster Two Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lobster Two Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lobster Two Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lobster Two Bold Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Don't use the CSS code underlying this page. Please

Contextual Alternates

The contextual alternates feature allow for multiple designs for a single character to be substituted depending on context.

 Contextual alternates

 Slashed zero

Slashed Zero

It is occasionally useful to emphasize the difference between the letter ‘O’ and the figure ‘zero’. User interfaces, financial reports and recording serial numbers are just some of the scenarios which may make use of this feature.

36 dOgMEaT 48 dOgMEaT 60 dOgMEaT 72 dOgMEaT

dоgмзaт dоgиимзaT о DOgMEaT useS OpenTypographic Features This page provides a simple, yet informative description of OpenType features along with illustrations of each OpenType feature.1ы 24 MEaTdOgdOgMEaT   zachleat.com : CSS Sprites Using @font-face Original Size using Embedded Font ABCDEFGHIJKLM ...»See Ya