dоgмзaтdоgиимзaT о
36 dOgMEaT 48 dOgMEaT 60 dOgMEaT 72 dOgMEaTDOgMEaT useS OpenTypographic Features
This page provides a simple, yet informative description of OpenType features along with illustrations of each OpenType feature.1ы 24 MEaTdOgdOgMEaT
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 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.
¿ À Â Î Ï Ô Ù Û Ü à â î ï ô ù û ü ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ Ÿ ƒ ˆ ˇ ˘ ˙ ˚ ˛ ˜ ˝ ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ “ ” „ ‚ ‛ “ ” „ ‟ † ‡ • ‣ ․ ‥ … ‧ ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › › ※ ‼ ‽ ‾ ‿ ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆ ⁇ ⁈ ⁉ ⁊ ⁋ ⁌ ⁍ ⁎ ⁏ ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞ € ™ ◊ 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 (below right) adjust their vertical position to better align with uppercase glyphs.
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 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).
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 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 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 can easily be created for any numerator/denominator combination.
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
ABCDEFGHIJKLMNOPQRST400% Size using Embedded Font
ABCDEFGHIJKLMNOPQRSTTest for :before/:after Content Trick
3 Characters should show here: BOriginal jQuery UI Icons
jQuery UI Icons using Embedded Font (and :before content trick)
CSS color: red; CSS color: blue;
Ordinals
Ordinals are properly designed (left) as opposed to synthesized (right).
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
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.
