The new typography for the Web. Microsoft showcases OpenType

Microsoft released a demo page for advanced typographic format of OpenType. This alternate glyphs, ligatures, kerning, fractions, small caps and minuscule numbers. The effects are visible when the mouse to direct the text. The demo only works well in browsers that support OpenType, Microsoft itself recommends IE10 + and 8 + Firefox. Other browsers may not manifest all the effects, it still depends on the operating system.

Since Microsoft can agree - OpenType really raises the design of the text on the web to the next level, which is close to printing. The possibilities of this format is clearly superior to @ font-face. For each effect is a snippet of code, as implemented in OpenType.

Small Caps

Text written in capital letters, immediately attracts the attention but he looks very ill, surrounded by text. In this case, you can use small caps.


/* use small-caps */
.smallcaps { -moz-font-feature-settings: "smcp=1"; -ms-font-feature-settings: "smcp" 1; }
/* both upper and lowercase to small caps */
.allsmallcaps { -moz-font-feature-settings: "c2sc=1, smcp=1"; -ms-font-feature-settings: "c2sc" 1,"smcp" 1; }

Ligatures

Ligature - a combination of two or more letters. In typography can be used to improve readability and / or structure of the text, removing unnecessary spaces, saving space.


/* use ligatures automatically */ .ligatures { text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga=1"; -ms-font-feature-settings: "liga" 1; }

Figures

Conventional mayuskulnye numbers are better suited for table layout, but in the text can be used for aesthetic purposes minuscule.


/* enable proportional figures and ordinals */ .figures { -moz-font-feature-settings: "pnum=1,onum=1"; -ms-font-feature-settings: "pnum" 1,"onum" 1; }}

Kerning

Selective changes in the spacing between letters, depending on their shape creates a more readable, well-balanced text.


/* enable kerning data */ .kerning { text-rendering: optimizeLegibility; -moz-font-feature-settings: "kern=1"; -ms-font-feature-settings: "kern" 1; }

Fractions

If you enable this option in the code, then all combinations of type "2 / 3" will be automatically converted into the right kind of shot.


/* enable OpenType fractions */ .fractions { -moz-font-feature-settings: "frac=1"; -ms-font-feature-settings: "frac" 1; }

Alternate glyphs

Additional glyphs can be used in the text in certain situations, for visual effect.


/* enable style set five */ .alternates { -moz-font-feature-settings: "ss05=1"; -ms-font-feature-settings: "ss05" 1; } /* enable contextual and stylistic swashes */ .swashes { -moz-font-feature-settings: "swsh=1,cswh=1"; -ms-font-feature-settings: "swsh" 1,"cswh" 1; }

Microsoft has said OpenType format and the revolutionary hopes on the broad support it by all browsers. I should add that OpenType - the format developed by Microsoft and Adobe, is an advanced version of the format TrueType, and the term of a patent on TrueType recently ended.