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?
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.
I don't know what mozilla is doing but at least IE has improved since "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/image.png',sizingMethod='scale');"
There's a trend towards lists in new CSS values (see transforms, transitions, etc.), but this seems to go against making site styles easily customizable using cascading/inheritance. It is a bigger pain to programmatically control. How about one value for one property:
font-caps: small; /* or none */
font-swash: contextual; /* or none */
This also gives room for future flexibility in values.
As thristian points out, font-feature-settings should be a last resort for rarely-used features without a separate syntax. It is not meant to set all features down.
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.
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.
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.
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?
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.
I've always disagreed with the whole "leans forward/backward" logic. I feel that a slash is a character that you draw by moving your pen _forward_ along the page, while a backslash is drawn by moving your pen _backward_. I guess the added problem with that is that probably not all people start drawing slashes from the top.
I should add that my opinion doesn't stop me from using the correct term in conversation.
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.
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.
While I take issues with some elements of Metro, it's definitely a style that puts typography front and center. That, combined with some great fonts coming out from (or at least licensed by) Microsoft, shows that they have the ability to be a stylistic powerhouse - at least, when it comes to text.
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.
If the text is styled with a font that has common ligatures, then "text-rendering: optimizeLegibility" does enable them for me. Doesn't seem to enable discretionary ligatures, which is what the liga=1 thing does in IE and Firefox (which have common ligatures on by default to start with).
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.
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).
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.
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]
(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.
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.
The fact you are waiting 30 seconds is agreeably a poor experience but this should not be the case. Font files on the web range in size from 20kb to 120kb depending on the details in the font - I consider this file size to be nothing more to wait for than say a normal image size. Technically fonts can save on total downloads if you think about the number of images that can be replaced. Fonts from services like WebINK, Typekit, Fontdeck, Fonts.com are all served from global CDN's that have these files located regional servers that should be bring the fonts down to your browser in 500ms to 2 seconds at the most. Of course connection speed matters.
[+] [-] codyrobbins|14 years ago|reply
But this syntax they’ve come up with is an absolute horrifying mess. Ugh. Please say it ain’t so!
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?
[+] [-] thristian|14 years ago|reply
[+] [-] zethraeus|14 years ago|reply
[+] [-] pdenya|14 years ago|reply
[+] [-] tumultco|14 years ago|reply
[+] [-] lifthrasiir|14 years ago|reply
http://en.wikipedia.org/wiki/List_of_typographic_features
As thristian points out, font-feature-settings should be a last resort for rarely-used features without a separate syntax. It is not meant to set all features down.
[+] [-] unknown|14 years ago|reply
[deleted]
[+] [-] unknown|14 years ago|reply
[deleted]
[+] [-] ronaldj|14 years ago|reply
[+] [-] Jabbles|14 years ago|reply
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|14 years ago|reply
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.
[+] [-] xbryanx|14 years ago|reply
[+] [-] kgen|14 years ago|reply
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.
[+] [-] michaelmior|14 years ago|reply
[+] [-] pg|14 years ago|reply
http://www.ucpress.edu/book.php?isbn=9780520071469
[+] [-] sc00ter|14 years ago|reply
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|14 years ago|reply
[+] [-] unknown|14 years ago|reply
[deleted]
[+] [-] nitrogen|14 years ago|reply
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|14 years ago|reply
[+] [-] Aramgutang|14 years ago|reply
I should add that my opinion doesn't stop me from using the correct term in conversation.
[+] [-] ned|14 years ago|reply
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|14 years ago|reply
[+] [-] wlievens|14 years ago|reply
Then I saw this was microsoft. My mouth literally[1] fell open.
[1] I know what that word means
[+] [-] tptacek|14 years ago|reply
[+] [-] avolcano|14 years ago|reply
[+] [-] duhoang|14 years ago|reply
They got a long way to go to convince designers to take them seriously.
[+] [-] deepkut|14 years ago|reply
This may or may not make some designers' lives easier considering some of these additions are not cross-browser compatible.
[+] [-] jorisw|14 years ago|reply
[+] [-] spiralganglion|14 years ago|reply
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.
[+] [-] hm2k|14 years ago|reply
[+] [-] micheljansen|14 years ago|reply
[1] https://developer.mozilla.org/en/CSS/text-rendering
[+] [-] bzbarsky|14 years ago|reply
[+] [-] bdunzer|14 years ago|reply
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.
[+] [-] kibaekr|14 years ago|reply
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|14 years ago|reply
[+] [-] ChuckMcM|14 years ago|reply
[+] [-] pash|14 years ago|reply
"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
[+] [-] wmf|14 years ago|reply
[+] [-] smackfu|14 years ago|reply
[+] [-] shuzchen|14 years ago|reply
[+] [-] Samuel_Michon|14 years ago|reply
[+] [-] ugh|14 years ago|reply
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|14 years ago|reply
[+] [-] pothibo|14 years ago|reply
However, it would have been cool if they included font-stretching so you can manipulate glyphs.
[+] [-] rabidsnail|14 years ago|reply
[+] [-] gkoberger|14 years ago|reply
Additionally, eventually things will get faster -- even now, with proper caching using a good CDN, it should be completely unnoticeable.
[+] [-] tjpick|14 years ago|reply
[+] [-] bdunzer|14 years ago|reply
[+] [-] klausa|14 years ago|reply
It also seems like an easy thing to change.