11 ms·
The New Web Typography
- sc00ter 15y ago"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.)
- deleted 15y ago[deleted]
- pornel 15y agoIt'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.
- mark-r 15y agoIronically the site features don't work in IE8.
- tadfisher 15y agoThey do inform you that it's only supported in IE10+ and FF8+.
- mark-r 15y agoI 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?
- deleted 15y ago[deleted]
- deleted 15y ago[deleted]
- pearle 15y agoFor me it appeared at the top of the linked page.
- Silhouette 15y agoIt doesn't work on Firefox 9.0.1 on Windows XP, either. In fact, it pops up a little message saying that my browser doesn't support OpenType...
- hubb 15y agoworked okay here in FF 6.0.2 in Ubuntu
- 15y ago
- Samuel_Michon 15y ago"Ironically the site features don't work in IE8." How is that ironic? Even Microsoft doesn't like to be reminded of IE8.
- micheljansen 15y agoDoes 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 https://developer.mozilla.org/en/CSS/text-rendering
- azernik 15y agoA quick look at their code samples reveals the issue samples - as browsers have not yet standardized the syntax, in order to use this feature you need to use versions of the CSS property names with browser-specific prefixes for example (for Firefox) "-moz-font-feature-settings" instead of just "font-feature settings". For some reason, this demo doesn't include the "-webkit"-prefixed versions - might be they don't exist, might be Microsoft's people just didn't think to.
- micheljansen 15y agoThat was exactly my question: is this one of those rare cases where IE10 is "ahead" of Webkit (and thus Chrome)? The fact that Firefox supports it too rules out the notion that this could just be some crackpot Microsoft-only technology like DX transforms. My question remains: does Webkit not yet support this?
- bzbarsky 15y agoIf 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).
- bdunzer 15y agoChrome/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.
- deleted 15y ago[deleted]
- sp332 15y agoThey use prefixes for experimental features. It's not part of an official spec yet, so each browser is implementing different features with different syntax. Eventually, when they agree on a feature set and syntax, they will move it into the common namespace by dropping the prefixes. Also, please use normal English.
- deleted 15y ago[deleted]
- ugh 15y agoThey just disagree about the syntax and will have to try and come to some sort of compromise in the future. It happens. By the way, if they didn’t use pre-fixes we would be truly fucked now because of the differing syntax. Because they don’t it’s not a big deal.
- jlogsdon 15y agoThere's no standard on how the values should be set yet, and we all know how well different browser vendors communicate...
- ChuckMcM 15y agoDoes anyone know the definitive patent status of OpenType?
- pash 15y agoThe 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
- wmf 15y agoFreeType doesn't seem to care: http://www.freetype.org/patents.html http://www.freetype.org/patents.html
- justinph 15y agoIt's almost too bad microsoft squandered any credibility they had on web standards years ago.
- funkah 15y agoI 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.
- tptacek 15y agoI couldn't read them (they don't work in Chrome) but were those text figures (with ascenders and descenders, and the bowls aligned with the bowls of "b" and "p") vs. lining figures? Text figures flow better in running text. When the numbers are part of a prose sentence and when you aren't comparing them with other numbers or doing math with them, they can be more readable (and less jarring). Since we don't have old-style numbers in web typography today, it's understandable that they look weird to you, but they aren't a case of different- for- difference- sake.
- ugh 15y agoGeorgia (the best serif font everyone has) actually has Old Style Figures. They are really nice (but they certainly don’t work in isolation, like in tables). The option to use Old Style Figures should always be applauded. As is obvious from the case of Georgia, it’s never good when you are stuck with only one or the other.
- tptacek 15y agoHow did I not notice that before? Thanks for pointing that out. I think they're fantastic for addresses and phone numbers. Distinctiveness is a win there, since the numbers are abstract and would otherwise just run together. The '8' in for instance "Suite 1850" is a little bouncy.
- funkah 15y agoWell, its usage is different for different's sake in the context of the web, and that's what I meant. I know this style of numeral is old, but I'm saying that its age does not make it good. We also used to substitute "f" for "s" in some scenarios, but we stopped. Let's stop doing this too. As far as it being easier to read in running text, I can't see it, but if the designer of a given work truly feels it provides that benefit, then so be it. I just would prefer for this style to not be used on the web, even though it is becoming available along with other advances in web typography. I just think it looks bad and it's hard to read.
- Jabbles 15y agoThis 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.
- spiralganglion 15y ago"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 15y ago... 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 15y agoBecause part of their company image is that computer internals are an abstract concept, unsuitable for fiddling by mere mortals.
- canop_fr 15y agoWhen 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...
- duhoang 15y agoThis 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 15y agoI'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.
- jorisw 15y agoExactly. Any lead Microsoft wants to take on the Web, I will have a hard time ever taking seriously given their history of anything Web related.
- wlievens 15y agoI 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 15y agoMicrosoft 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.
- bitwize 15y agoMarker Felt. It's the new Comic Sans.
- dfan 15y agoSegoe UI is so good that I have Firefox set to use only it (which of course renders this entire page meaningless for me). I can even read light text on a black background in it, which previously has always sent me scurrying for Readability.
- mbq 15y agoYup; or when they actually created a vector font to reproduce bitmap design: http://www.fonts.com/aboutfonts/verdana.htm http://www.fonts.com/aboutfonts/verdana.htm Later they were lagging with smoothing techniques because of this pixel-perfection.
- avolcano 15y agoWhile 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.
- hm2k 15y agoTIL Google Chrome doesn't support OpenType.
- kooshball 15y agoI wonder if this explains the ugly non-aliased text I see so often with chrome.
- masklinn 15y agoI'm pretty sure that's the renderer and has nothing to do with opentype support.
- kooshball 15y agoDo you know if there's a specific reason why the renderer is showing non smooth text?
- rorrr 15y agoChrome does suck at rendering. Not just the fonts. I recently found a bug where Chrome constantly eats 12% of an 8-core CPU because of an animated GIF, some transparency and shadows. The latest IE and FF have no such problems. I'm a Chrome user btw.
- tadfisher 15y agoThe render is OS-dependent. On which operating system do you experience this issue?
- dminor 15y agoCan't speak for the OP but I see it on Windows XP with cleartype turned on when viewing webfonts.
- bdunzer 15y agoRendering of web fonts on Windows XP is one big issue that there are solutions for but it really takes a lot of tweaking. First, it starts with a well designed and created font. Second, hinting can be applied that helps shift around the pixels on the screen to better map the outlines to the pixels on the screen, ClearType does help in some instances but mostly with small text, using tricks like sending WOFF/CFF to turn on GDI grayscale anti-aliasing is another that is employed when a font is a certain size - usually larger sizes. Its one big issue and one that all of us web font service providers are trying to help solve. If we all had the resources we would be sending down one specific version for each browser / OS and screen setting combination. But that is pretty prohibitive. We are starting to see better renders built into the browsers and some tweaks that the folks at Webkit, Mozilla and IE are making.
- alpb 15y agoI 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.
- nitrogen 15y agoFractions 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 http://public.wsu.edu/~brians/errors/backslash.html
- mbq 15y agoBTW, 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.
- nitrogen 15y agoYeah, it can only support those fractions that are included in the specification and the font itself, like 1/2, 3/4, 5/8. It's a typographic special case.
- mbq 15y agoI know -- the problem is the syntax. You can't safely apply this to any document, because it may change the meaning of it. Such things should only exist as unicode characters or character entities.
- sukuriant 15y agoI'm not sure your argument is valid. How is the decision made to convert x/y to fraction form? Is it white-space/punctuation+whitespace on either side? If that's the case, then: xxx/yyy will never become fraction form; however, x/y and x/y. (as in the end of a sentence) will.
- yeswecan 15y agoThe only way to guarantee it is to have an HTML tag to identify the fraction - <frac>11/63</frac> or similar.
- rabidsnail 15y agoWhile 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 15y agoThe web is well overdue for proper typography.
- _delirium 15y agoI 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.
- rabidsnail 15y agoEven if you're in a rare situation where you can't make do with Helvetica or Georgia or one of the other standard fonts, the long load time that your custom font imposes is going to affect my impression of your page much more than any improvement in readability or expression that the font may provide. You only have a few seconds to make a first impression. Of course this only applies to the copy in the body of the page. Using @font-face for logos, buttons, or even headings, isn't going to impose the performance hit (if you only include in the font file the characters that you use) that a whole page's worth of text would.
- ComputerGuru 15y agoGuys, 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 15y agoI 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.
- michaelmior 15y agoOdd, no hovering necessary for me. Perhaps it's changed since.
- xbryanx 15y agoSad that all this mystery meat is making a comeback on the web. http://www.webpagesthatsuck.com/mysterymeatnavigation.html http://www.webpagesthatsuck.com/mysterymeatnavigation.html
- smackfu 15y agoAt headline size, some of those ligatures look terrible.
- shuzchen 15y agoI generally reserve ligatures to body text, in cases where it improves readibility. I don't know if anybody actually uses ligatures for headers.
- justincormack 15y agoYes they do eg http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-3 http://www.markboulton.co.uk/journal/comments/five-simple-st...
- bh42222 15y agoWill Microsoft truly favor OpenType over ClearType: http://en.wikipedia.org/wiki/ClearType http://en.wikipedia.org/wiki/ClearType
- dgalling 15y agoClearType is a technique used to smooth fonts on LCD displays. OpenType is a font format. Perhaps you meant to say TrueType?
- bh42222 15y agoI 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?
- pg 15y agoIncidentally, the title they chose is an ambitious non-coincidence: http://www.ucpress.edu/book.php?isbn=9780520071469 http://www.ucpress.edu/book.php?isbn=9780520071469
- pothibo 15y agoVery cool stuff. However, it would have been cool if they included font-stretching so you can manipulate glyphs.
- codyrobbins 15y agoI 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;
- pdenya 15y agoI 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');"
- zethraeus 15y agoActually not. In the current W3C draft (http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-feature-settings-prop http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-featu...) 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 15y agoBoth 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.
- shuzchen 15y agoThis 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.
- ned 15y agoSo 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 15y agoThere 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 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).
- tle9 15y agoThis is beautiful. Web 2.0 getting another design remake. This time with the content we use most, text.
- Samuel_Michon 15y agoThey use all-caps Verdana in their headlines, how am I supposed to take their views on web typography seriously?
- ugh 15y ago(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.
- kibaekr 15y agoI 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).
- mise 15y agoOpening that page in Firefox crashes my Gnome session! Linux Mint.