The new typography for the Web. Microsoft showcases OpenType

January 12, 2012
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; }


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; }


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; }}


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; }


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.

Share this :

थका हूँ... बुझा नहीं

Next Post »
0 Komentar

Write markup in comments
  • Please leave a comment by topic. Comments that include active links, ads, or promotion will be deleted.
  • To insert the code use <i rel="code"> kode yang akan disisipkan </i>
  • To insert long code use <i rel="pre"> kode yang akan disisipkan </i>
  • To insert a quote use <i rel="quote"> catatan anda </i>
  • To insert a picture use <i rel="image"> URL gambar </i>
  • To insert video use [iframe] URL embed video [/iframe]
  • Then parse the code in the box below
  • © 2015 Simple SEO ✔