
The New Web Typography - cleverjake
http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html
======
codyrobbins
I am completely, wholeheartedly, emphatically, and unabashedly in favor of
finally bringing control over OpenType features to CSS—finally!!

But this syntax they’ve come up with is an absolute horrifying mess. Ugh.
Please say it ain’t so!

    
    
      font-feature-settings: "smcp=1”;
      font-feature-settings: "swsh=1,cswh=1”;
    

Seriously—that’s how you get small caps and swash? Seriously?? These look like
optimization flags for a C compiler, not CSS.

I’m guessing that these are probably mapping through to the underlying
OpenType features directly somehow to support arbitrary aspects of a
particular type, but it still needs to be less of a mess for the “normal”
stuff.

Why can’t it be something readable and self-documenting?

    
    
      font-features: small-caps, contextual-swash;

~~~
zethraeus
Actually not. In the current W3C draft ([http://www.w3.org/TR/2011/WD-
css3-fonts-20111004/#font-featu...](http://www.w3.org/TR/2011/WD-
css3-fonts-20111004/#font-feature-settings-prop)) the syntax for font features
is as such:

    
    
      font-feature-settings: "kern" 1;
    

Actual implementations are currently CSS extensions as the functionality is
not yet in a published spec. Mozilla's CSS extension uses the syntax:

    
    
      -moz-font-feature-settings: "kern=1";
    

Microsoft's CSS extension however uses the same syntax as the current W3C
draft, expect with the standard browser specific prefix used before a feature
makes it into the official spec.

    
    
      -ms-font-feature-settings: "kern" 1;
    

Whether this syntax is ideal or not is still, imho, contestable. Either way it
isn't Mozilla's parameter-esque style (which I agree stands very much in
opposition to the usual CSS syntax style), and as long as the syntax in the
draft reaches finalization, said parameter-esque syntax should go away for
good.

~~~
underwater
Both are horrible. Mozilla's because the string is a transparent blob that's
parsed separately to the rest of the CSS syntax and Microsoft's because it's
dependent on ordering.

I don't see why a boolean value wasn't an option; the values is either defined
or it's not. Otherwise "kern(1)" would have been more consistant with other
properties.

------
Jabbles
This is what I want! Not nice fonts, but competition!

Microsoft stepping up and implementing desirable features in their browser is
exactly what we (as users of the web) need in order to move technology
forward.

In the same manner, I hope Microsoft pushes hard with Windows Phone; not
because I own one, but because I want the whole industry to move forward
faster.

------
ComputerGuru
Guys, the sections change to display the actual features when you hover over
them with the mouse.

I literally spent the better part of 5 minutes reading the text and comparing
Chrome, IE, and Firefox to search for the kerning changes and fractions
support, because I just couldn't see it.. Until I accidentally hovered over
the sections and the content changed to match.

~~~
kgen
I agree, had no idea what was going on (figured I didn't have IE so it
wouldn't show) until I read your comment.

Some of the examples are too subtle for this flashy animations (like kerning)
and some just look bad (like the word affluent in ligatures).

Otherwise, pretty cool to see though.

~~~
aiscott
I thought the ligature examples looked pretty bad as well. It may have just
been the font they used.

~~~
mikeklaas
Yeah, the /fl/, /ffl/ ligatures in that font are atrocious.

Hoefler Text has much nicer ones: <http://imgur.com/ofE3Z>

------
pg
Incidentally, the title they chose is an ambitious non-coincidence:

<http://www.ucpress.edu/book.php?isbn=9780520071469>

------
sc00ter
"If you want the real deal, get a browser that supports OpenType like Internet
Explorer 10+ or Firefox 8+."

Downloads IE10... "Windows Internet Explorer Platform Preview is only
supported on Windows 8 Developer Preview." Oops!

PS. Microsoft: This -> / isn't a backslash, this -> \ is. (A common mistake,
but not one I'd expect in article on Typography.)

~~~
pornel
It's nice that they suggest Firefox though. For me it's a refreshing change
from demos that force me to use Chrome merely because they use User-Agent
sniffing or only -webkit- prefix.

~~~
kijin
We're probably at a point where Microsoft considers Chrome, not Firefox, to be
the biggest threat to IE.

~~~
aj700
well, yes

<http://www.firefoxwithbing.com/>

------
nitrogen
_Fractions created with the backslash character can be clunky and confusing.
With the Fraction property turned on, backslash-based fractions can be
automatically transformed into true fractions._

If an article about typography doesn't even know the difference between a
slash and a backslash, how are we ever to get people to stop saying backslash
when talking about URLs?

<http://public.wsu.edu/~brians/errors/backslash.html>

~~~
mbq
BTW, this feature is a complete fail -- say I write 3431/5147, and what do I
get? 343(1/5)147, so not only still ugly, but also incorrect mathematically.

~~~
DieBuche
No, it's not. It works like it's suppossed to do for any (not actual regex)
/d+ \/ /d+ . See screenshot here: <http://imgur.com/gwlHJ>

Fonts supporting the frac feature have a separate set of smaller numbers, and
these get dynamically composed into fractions once you type them.

~~~
webfuel
Maybe things will change with how the browser implements fractions but 112/3 =
11(2/3) and 3431/5147 = 3431/5147 (there is no 1/5) <http://imgur.com/a/4FFNy>

Edit: Spelling.

~~~
DieBuche
That's actually an issue with that specific font. Try editing the first
Verdana Example (3/4 Ale..), that works for me for 1234/5678.

------
ned
So it seems like we now have two way of specifying small caps:

    
    
      font-feature-settings: "smcp=1”;
    

and…

    
    
      font-variant: small-caps;
    

The later is the CSS 2.1 syntax, and will force the browser to create small
caps on its own if the chosen font doesn't contain small caps glyphs.

The Open Type version is probably better, since it falls back to lower case
glyphs if the browser doesn't support them, instead of an emulated version
that probably won't be very legible.

~~~
stan_rogers
There was also an existing CSS implementation of ligatures:

    
    
      font-variant-ligatures: [ common-ligatures | additional-ligatures | historical-ligatures | normal | inherit ];
    

See <http://marc.baffl.co.uk/browser_bugs/css-ligatures.html> for a working
example. Webkit seems to ignore it; Gecko has an incomplete implementation
(common-ligatures works).

------
wlievens
I was reading this, thinking really nice, adhering to such meticuluous
styling.

Then I saw this was microsoft. My mouth literally[1] fell open.

[1] I know what that word means

~~~
tptacek
Microsoft has an extremely respectable collection of typographic talent, and
(matter of opinion, obvs) actually has done a better job with the fundamentals
of typography over the last 10 years than Apple. Microsoft: several highly
credible new screen faces. Apple: Market Felt as the typeface for notes on the
iPhone. Hm.

~~~
mbq
Yup; or when they actually created a vector font to reproduce bitmap design:
<http://www.fonts.com/aboutfonts/verdana.htm> Later they were lagging with
smoothing techniques because of this pixel-perfection.

------
duhoang
This is rad, but Microsoft handling of fonts in their browser is so terrible
in the past that I hesitant to jump on this bandwagon.

They got a long way to go to convince designers to take them seriously.

~~~
deepkut
I'm with you here duhoang--

This may or may not make some designers' lives easier considering some of
these additions are not cross-browser compatible.

------
spiralganglion
"Once-inaccessible design features such as small caps, swashes and fractions
_are now access_ through CSS"

On a website drawing attention to type, one should be extra attentive to the
content of their writing.

It'd be just like grossly aliased images on Adobe's Photoshop site, or a pile
of computer parts around the genius bar.

~~~
ajross
... because the Apple "geniuses" would never actually look inside their
computers? Sometimes I cry for what geek culture has become.

( _edit @awda: That's exactly how I interpreted it too, which is why I'm
crying._ )

~~~
awda
Because part of their company image is that computer internals are an abstract
concept, unsuitable for fiddling by mere mortals.

~~~
canop_fr
When you think that Jobs asked for the interior of the Macintosh case to have
the team's signature and that he insisted on even those hidden parts to be
clean and beautiful because an engineer has to be proud of the beauty of the
hidden parts...

------
hm2k
TIL Google Chrome doesn't support OpenType.

~~~
kooshball
I wonder if this explains the ugly non-aliased text I see so often with
chrome.

~~~
masklinn
I'm pretty sure that's the renderer and has nothing to do with opentype
support.

~~~
kooshball
Do you know if there's a specific reason why the renderer is showing non
smooth text?

------
micheljansen
Does anyone understand why ligatures do not appear to work on Webkit? From
what I understand, setting "text-rendering: optimizeLegibility" should enable
ligatures on Webkit [1], but I cannot see them on Chrome and Safari where I do
see them on Firefox.

[1] <https://developer.mozilla.org/en/CSS/text-rendering>

~~~
bdunzer
Chrome/Webkit will start to support the OpenType features version 18 from what
I have seen - no idea about Safari yet. The current Canary build has support
built into it but at this time it is only for Windows and not on the Mac. Not
sure about the issues around the Mac and why they might not support it out of
the gate but I assume they are working on it.

They will use the -webkit- prefix for the font-feature-settings. So like most
new things we will have -webkit -ms and -moz until it settles down.

~~~
bdunzer
Sorry I should have said Chrome 15+ on Windows. I was thinking of another
feature in the Canary build.

So today you can use the -webkit-font-settings to get some of the OpenType
features into Chrome for Windows today

------
kibaekr
I feel a little stupid in not really understanding the significance of this
blog post. So what are the examples suggesting? I can't seem to notice
anything too radical.

One thing that I've noticed/learned of web typography is that fonts with edges
(Times New Roman) work well offline on actual paper, but is extremely hard to
read on-screen. After realizing this, I started to notice that most fonts
meant for on-screen reading were edge-less (sans-serif).

------
shuzchen
This is pretty cool. My wish-list of typographic features were kerning and
alternate glyphs, both of which are on this list. However, I'm still hoping
for the day when we get a real baseline grid.

------
ChuckMcM
Does anyone know the definitive patent status of OpenType?

~~~
pash
The only definitive way to find out the status of any patent is through
litigation:

"The [US] PTO grants most patent applications, then lets people fight over
their validity later on. ... Almost half of patents litigated to judgement are
invalidated; of those found valid, half are found not to be infringed." [1]

1\. Michael Heller, _The Gridlock Economy_ , p. 53

------
smackfu
At headline size, some of those ligatures look terrible.

~~~
shuzchen
I generally reserve ligatures to body text, in cases where it improves
readibility. I don't know if anybody actually uses ligatures for headers.

~~~
justincormack
Yes they do eg [http://www.markboulton.co.uk/journal/comments/five-simple-
st...](http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
better-typography-part-3)

------
Samuel_Michon
They use all-caps Verdana in their headlines, how am I supposed to take their
views on web typography seriously?

~~~
ugh
(Yeah, sarcasm, but) You don’t have to take any of their views seriously. All
they are doing is implement OpenType features. They are not in any way pushing
for new features. You can already do that stuff pretty much everywhere except
on the web. (Can you imagine how happy the long neglected typography on the
web nerd inside me is about this? Well, took ’em long enough.)

InDesign could do all that stuff since forever (literally!). I’m not sure, but
I think OS X could, too.

The only fear you can have is that they screw it up. That, however, seems
pretty unlikely, considering the trampled path – scratch that – superhighway
they are driving on.

------
tle9
This is beautiful. Web 2.0 getting another design remake. This time with the
content we use most, text.

------
pothibo
Very cool stuff.

However, it would have been cool if they included font-stretching so you can
manipulate glyphs.

------
rabidsnail
While we're on the subject of @font-face, _please_ only use it as a
replacement for images. I'm tired of waiting 30 seconds for any text to show
up on the screen because my computer's busy loading a font file. The web is
not a magazine stand. Don't treat it like one.

~~~
tjpick
The web is well overdue for proper typography.

~~~
_delirium
I suspect the more likely median result will be a decline in typographic
standards, like what happened immediately after desktop-publishing software
became widespread: huge overuse of newly available features just to use them,
gratuitous mixing of five typefaces in a document, etc.

~~~
wmf
I think we hit that point years ago with sFIR and it should have worn off by
now.

------
mise
Opening that page in Firefox crashes my Gnome session! Linux Mint.

------
funkah
I really, really dislike that style of numerals. It just looks like they're
bouncing all around the baseline. Please don't use that, designers. Different
!= good.

~~~
Adaptive
This isn't different for difference's sake.

1\. These are often termed old-style numerals. Nothing new under the sun here.
If anything, all fixed height numerals are the newer invention. (conjecture,
feel free to research this and refute, but I'd bet it's the case)

2\. Research into how we read whole words indicates that letter height and the
profile of entire words is critical to faster reading. SAME HEIGHT WORDS slow
us down. The changes in word outline can help us along. 2009 2oo9. A poor
example given that I'm simulating old-style numerals, but you get the idea. In
blocks of text, not in tabular formatting, the changes in the numeral heights
can help carry the eye along.

~~~
Someone
_"If anything, all fixed height numerals are the newer invention"_

I doubt it, given that all-uppercase is the older style.
<http://en.wikipedia.org/wiki/Letter_case#History> seems to agree:

 _"Originally alphabets were written entirely in capital letters, spaced
between well-defined upper and lower bounds"_

But feel free to research and refute.

~~~
olavk
Roman numerals were upper case, but arab numerals were introduced in latin
after lower case letters had evoved.

------
mark-r
Ironically the site features don't work in IE8.

~~~
tadfisher
They do inform you that it's only supported in IE10+ and FF8+.

~~~
mark-r
I went back to the link and couldn't find that disclaimer. Can you tell me
where it is? Edit: never mind, it's not on the linked page, it's on the parent
page. And how was I supposed to know that?

~~~
pearle
For me it appeared at the top of the linked page.

------
alpb
I opened my Firefox after a few months and upgraded it to 9.x just to see what
Microsoft have achieved. Great work indeed but I'm not sure it is worth
changing and messing the CSS standards. Some of them were already achieveble
by doing a few tricks like using different fonts IMO.

------
bh42222
Will Microsoft truly favor OpenType over ClearType:
<http://en.wikipedia.org/wiki/ClearType>

~~~
dgalling
ClearType is a technique used to smooth fonts on LCD displays. OpenType is a
font format. Perhaps you meant to say TrueType?

~~~
bh42222
I am not certain about this, but I think true TrueType fonts are only slightly
improved by font smoothing technologies like ClearType and Quartz. Where as
fonts made specifically to be used with ClearType look like utter crap on LCDs
without it.

And that is Microsoft's way to embrace and extend TrueType fonts in a
proprietary way, make them look like shit without the Microsoft proprietary
ClearType.

Obviously this can't be true for all fonts, but if enough people, running MS
Windows on LCDs experience the difference, then perhaps Microsoft can create
the perception that ClearType is essential for any font to look good.

That's what I was trying to get to above, Microsoft has clearly embraced web
fonts, will it also try to extend them in a proprietary way?

------
justinph
It's almost too bad microsoft squandered any credibility they had on web
standards years ago.

