<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Readable Web &#187; Typography</title>
	<atom:link href="http://readableweb.com/category/typography/feed/" rel="self" type="application/rss+xml" />
	<link>http://readableweb.com</link>
	<description>Tracking The Move From Print To The Networked Screen</description>
	<lastBuildDate>Sat, 10 Mar 2012 20:29:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>In Web Design, The Narrow Column Is King</title>
		<link>http://readableweb.com/in-web-design-the-narrow-column-is-king/</link>
		<comments>http://readableweb.com/in-web-design-the-narrow-column-is-king/#comments</comments>
		<pubDate>Sat, 10 Mar 2012 17:01:29 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Digital Publishing]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=6320</guid>
		<description><![CDATA[Get used to it. Learn to live with it. Make it work for you. Check this out:&#8194;Re-Thinking The Mobile Web It takes a good twenty minutes to get through but it&#8217;s worth it. Even if you are already familiar with the pitfalls of trying to accommodate all the different screen sizes out there. Maybe especially [...]
Related posts:<ol>
<li><a href='http://readableweb.com/practical-font-design-by-david-bergsland/' rel='bookmark' title='Practical Font Design by David Bergsland'>Practical Font Design by David Bergsland</a></li>
<li><a href='http://readableweb.com/practical-font-design-third-edition/' rel='bookmark' title='Practical Font Design, Third Edition'>Practical Font Design, Third Edition</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p>Get used to it. Learn to live with it. Make it work for you.</p>
<p>Check this out:&ensp;<a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">Re-Thinking The Mobile Web</a><br />
It takes a good twenty minutes to get through but it&#8217;s worth it. Even if you are already familiar with the pitfalls of trying to accommodate all the different screen sizes out there. Maybe <strong>especially</strong> if you&#8217;re already familiar with the pitfalls.</p>
<p>My friend Jerry Maddox &#8211; Professor of Art and teacher of New Media Design at Penn State is totally on the right track. He&#8217;s obsessed with finding the absolute minimal one-column layout with as little CSS as possible. Something that can be committed completely to memory, preferably. Here&#8217;s <a href="http://s3.amazonaws.com/simpleuseful/fivefonts.html">the latest iteration</a> featuring the same text and CSS using each of 5 free open-source web fonts of high visual quality.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/practical-font-design-by-david-bergsland/' rel='bookmark' title='Practical Font Design by David Bergsland'>Practical Font Design by David Bergsland</a></li>
<li><a href='http://readableweb.com/practical-font-design-third-edition/' rel='bookmark' title='Practical Font Design, Third Edition'>Practical Font Design, Third Edition</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/in-web-design-the-narrow-column-is-king/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Free RasterBRIDGE&#174; Web Font: Puffbuddy Light</title>
		<link>http://readableweb.com/a-free-rasterbridge-web-font-puffbuddy-light/</link>
		<comments>http://readableweb.com/a-free-rasterbridge-web-font-puffbuddy-light/#comments</comments>
		<pubDate>Wed, 29 Feb 2012 20:03:46 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Copyright]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[E-Books]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[RasterBRIDGE® Web Fonts]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Standards]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=6237</guid>
		<description><![CDATA[What you see above is a screen shot taken on Windows XP.It looks smooth and clean, right?Unlike most so-called &#8216;web fonts&#8217;, all RasterBRIDGE&#174; Web Fonts are specially prepared to look as good in Windows as they do on the Mac,and on the iPad,and on the iPhone,and on the Kindle Fire, and so on and so [...]
Related posts:<ol>
<li><a href='http://readableweb.com/a-free-downloadable-webfont-specimen-page/' rel='bookmark' title='A Webfont Specimen Page Free For Download'>A Webfont Specimen Page Free For Download</a></li>
<li><a href='http://readableweb.com/ten-great-free-fonts-cross-browser-a-case-study-in-font-face/' rel='bookmark' title='Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face'>Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><div style="text-align:left;">
<img src="/images/PuffbuddyLight.png" /></p>
<p style="font-size:20px;font-style:italic;width:30em;padding:0 0 1em 2em;">What you see above is a screen shot taken on <strong>Windows XP</strong>.<br />It looks smooth and clean, right?<br />Unlike <strong>most</strong> so-called &#8216;web fonts&#8217;, <strong>all</strong> RasterBRIDGE&reg; Web Fonts are specially prepared to look as good in <strong>Windows</strong> as they do on the  <strong>Mac</strong>,<br />and on the <strong>iPad</strong>,<br />and on the <strong>iPhone</strong>,<br />and on the <strong>Kindle Fire</strong>, and so on and so forth.<br />Before we ship, we test the font in a wide variety of browsers on all major platforms and devices.</p>
</div>
<p>As a RasterBRIDGE&reg; Web Font, Puffbuddy Light will remain <span style="font-family:'puffbudlight';">&ensp;balloony, buoyant, and jolly&ensp;</span> in any browser, on any platform.<br /><a href="http://readableweb.com/fonts/PuffbuddyLt-HTMLBasics+.zip">Download it here</a> and spread the word. Enjoy.</p>
<h3>What&#8217;s The Font Got?</h3>
<p>Puffbuddy Light features the <strong>HTML Basics+ Character Set</strong>. That means you get all the important <a href="http://www.w3.org/TR/html4/sgml/entities.html#h-24.2.1">HTML character entities</a>, a full complement of <a href="http://jontangerine.com/silo/typography/spaces/">spacing characters</a> and you&#8217;re covered for the following languages:</p>
<p>&emsp;&bull;&emsp;English, Spanish, German, French, Italian, Portuguese, Irish, Finnish, Icelandic, Norwegian, and Swedish.</p>
<h3>RasterBRIDGE&reg; Web Fonts Stay Small and Load Fast</h3>
<p>RasterBRIDGE&reg; Web Fonts are specially compressed to stay small and load fast. The Puffbuddy Light TTF font file weighs in at only 41 kb, the Woff at 28kb, and the EOT at 26kb. A whole font for the size of a small image!<br />And did we mention that, for the &#8220;price&#8221; of those 28 kilobytes compressed, the HTML Basics+ Character Set also covers these languages, too:</p>
<p>Basque, Albanian, Gaelic (Irish), Gaelic (Manx), Gaelic (Scottish), Luxembourgish, Afrikaans, Haitian_Creole, Indonesian, Javanese, Estonian, Fijian, Filipino/Tagalog, Afar, Bislama, Breton, Chamorro, Comorian, Faroese, Gilbertiese/Kiribati, Kinyanwanda, Kirundi, Luba/Ciluba/Kasai, Malagasy, Malay, Marquesan, Ndebele, Oromo, Palauan/Belauan, Quechua, Romansh, Sango, Sesotho, Setswana/Sitswa, Seychellois_Creole, SiSwati/Swati/Swazi, Somali, Sotho, Swahili, Tetum, Tok_Pisin, Tongan, Tsonga, Tswana, Tuvaluan, Uzbek/Usbek, Walloon, Xhosa, and Zulu.</p>
<p style="font-family:'puffbudlight';font-size:1.2em;">&iexcl;WOW!<br />Ett stort v&auml;rde. Ein gro&#223;er Wert. A mikils vir&eth;i. Yon gwo val&egrave;. Nj&euml; vler&euml; e madhe.</p>
<p>&nbsp;</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/a-free-downloadable-webfont-specimen-page/' rel='bookmark' title='A Webfont Specimen Page Free For Download'>A Webfont Specimen Page Free For Download</a></li>
<li><a href='http://readableweb.com/ten-great-free-fonts-cross-browser-a-case-study-in-font-face/' rel='bookmark' title='Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face'>Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/a-free-rasterbridge-web-font-puffbuddy-light/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Practical Font Design, Third Edition</title>
		<link>http://readableweb.com/practical-font-design-third-edition/</link>
		<comments>http://readableweb.com/practical-font-design-third-edition/#comments</comments>
		<pubDate>Thu, 01 Dec 2011 17:29:12 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Digital Publishing]]></category>
		<category><![CDATA[E-Books]]></category>
		<category><![CDATA[Education]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[People]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5554</guid>
		<description><![CDATA[Practical Font Design3rd Edition In Digital Publishing you need to co-ordinate your efforts with many people. Web designers, developers, server techs &#8211; the list goes on and on &#8211; and the more you know about how those people go about their work, the better off you will be. With fonts, the &#8220;collaboration&#8221; might take the [...]
Related posts:<ol>
<li><a href='http://readableweb.com/practical-font-design-by-david-bergsland/' rel='bookmark' title='Practical Font Design by David Bergsland'>Practical Font Design by David Bergsland</a></li>
<li><a href='http://readableweb.com/kernests-konstellations/' rel='bookmark' title='Kernest&#8217;s Konstellations'>Kernest&#8217;s Konstellations</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><div style="float:right;text-align:center;margin-left:-28px">
<a href="http://www.amazon.com/dp/1460979583"><img src="/images/practical3amazon.jpg" /></a></p>
<p><a href="http://www.amazon.com/dp/1460979583">Practical Font Design<br />3rd Edition</a></p>
</div>
<p>In Digital Publishing you need to co-ordinate your efforts with many people. Web designers, developers, server techs &#8211; the list goes on and on &#8211; and the more you know about how those people go about their work, the better off you will be.</p>
<p>With fonts, the &#8220;collaboration&#8221; might take the form of a purchase, or a free download, or just a link to the font in your HTML. But there <strong>is</strong> a font-maker somewhere on the other end of that transaction. And the more you know about how that font came to be, the better off <em>you&#8217;ll</em> be. And unlike a lot of things in today&#8217;s fast-paced environment &#8211; where it&#8217;s hard to separate the side-shows from the main attractions &#8211; <em>a knowledge of fonts and how they&#8217;re made won&#8217;t be obsolete in just a few years</em>. Changes in font technology come at a snail&#8217;s pace, and what changes do come, are incremental. So what you learn about fonts will pay dividends for as long as you live. Really.</p>
<h3>Have A &#8220;Practical&#8221; Christmas</h3>
<p>David Bergsland&#8217;s <a href="http://www.amazon.com/Practical-Design-Using-FontLab-ebook/dp/B003HC8PP0">Practical Font Design</a> is now in its Third Edition. It&#8217;s greatly improved in many, many ways from the <a href="http://readableweb.com/practical-font-design-by-david-bergsland/">Second Edition</a>. (Bergsland not only <strong>listens</strong> to reader feedback, but he <strong>acts</strong> on it, too.) It&#8217;s <em>still</em> the only book of its kind, and it does a simple thing: it tells you, in a friendly and to-the-point manner, how one experienced font designer and teacher &#8211; David Bergsland &#8211; goes about his work. It&#8217;s a must-buy for font designers. It&#8217;s a should-buy for any web designer, graphic designer, or anybody involved with digital publishing.<br />
Not much interested in the technical details? &#8211; It&#8217;s worth the price just for the &#8220;history of type&#8221; section and as a flip-through reference. If you&#8217;ve ever used Adobe Illustrator or CorelDraw, you already know more than you necessarily need. And a <a href="http://www.fontlab.com/font-editor/fontlab-studio/download-fontlab-studio/">demo download of FontLab Studio</a> &#8211; the professional level font editor referenced in the book &#8211; is available for Mac and Windows free.</p>
<p>Here&#8217;s a little piece to give you an idea of the tone:</p>
<blockquote style="font-style:italic;color:black">
<p>&#8220;My plan is to go through my decision making process so you can do the same as you develop your fonts. There is no right or wrong here. All you have to guide you in the process is your personal sense of style &#8211; what&#8217;s right and wrong.&#8221;</p>
</blockquote>
<h3>Practical Font Design, The Links:</h3>
<p><a href="http://www.amazon.com/dp/1460979583">Amazon Print and Kindle</a></p>
<p><a href="http://www.lulu.com/product/ebook/practical-font-design-third-edition/17555176"> Lulu PDF</a></p>
<p><a href="http://www.lulu.com/product/paperback/practical-font-design-third-edition/14849680">Lulu Paperback</a></p>
<p>David Bergsland sells his fonts at:</p>
<p><a href="http://www.hackberry-fonts.com/">Hackberry-Fonts</a></p>
<p>And blogs here, dispensing technical tips and helpful font-making tools:</p>
<p><a href="http://blog.hackberry-fonts.com/">Hackberry-Fonts Blog</a></p>
<p>&nbsp;</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/practical-font-design-by-david-bergsland/' rel='bookmark' title='Practical Font Design by David Bergsland'>Practical Font Design by David Bergsland</a></li>
<li><a href='http://readableweb.com/kernests-konstellations/' rel='bookmark' title='Kernest&#8217;s Konstellations'>Kernest&#8217;s Konstellations</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/practical-font-design-third-edition/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Extensis Brings Google Web Fonts Straight Into Photoshop</title>
		<link>http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/</link>
		<comments>http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/#comments</comments>
		<pubDate>Mon, 07 Nov 2011 23:42:10 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Digital Publishing]]></category>
		<category><![CDATA[E-Books]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5578</guid>
		<description><![CDATA[Extensis, the company behind the WebINK web font service, today announced a plug-in that brings Google Web Fonts straight into Photoshop. Free And Open-Source Fonts Served Alongside The Proprietary, In A Surprising Twist Since launching the WebINK web font service, Extensis has concentrated on building a library of fonts drawn from the proprietary type community, [...]
Related posts:<ol>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/google-fonts-failing-for-internet-explorer-users/' rel='bookmark' title='Google Fonts Failing For Internet Explorer Users'>Google Fonts Failing For Internet Explorer Users</a></li>
<li><a href='http://readableweb.com/a-nice-use-of-web-fonts-in-mainstream-media/' rel='bookmark' title='A Nice Use Of Web Fonts In Mainstream Media'>A Nice Use Of Web Fonts In Mainstream Media</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p><a href="www.extensis.com">Extensis</a>, the company behind the <a href="www.webink.com">WebINK</a> web font service, today announced <a href="http://www.webfontplugin.com">a plug-in that brings Google Web Fonts</a> straight into Photoshop.</p>
<h3>Free And Open-Source Fonts Served Alongside The Proprietary, In A Surprising Twist</h3>
<p>Since launching the WebINK web font service, Extensis has concentrated on building a library of fonts drawn from the proprietary type community, building on long-standing relationships developed through Extensis&#8217; other font and design products: <a href="http://www.extensis.com/en/products/suitcasefusion3/overview.jsp">Suitcase Fusion</a> (a desktop font manager) and <a href="http://www.extensis.com/en/font-management/universal-type-server-3/index.jsp?ref=nav">Universal Type Server</a> (a server-based font library and font license manager for workgroups).<br />
But they haven&#8217;t left it at just being another service operating in the shadow of (now Adobe) Typekit &#8211; as services like Fontdeck, WebType, and others have done. From day one, I&#8217;ve personally seen them strive to find new ways to meet the needs of web designers with innovative software tools that, in combination with their hosting service, make the use of a font service &#8211; as opposed to shopping the web for suitable fonts and then self-hosting &#8211; a much easier and useful proposition. They&#8217;ve continuously shown up at the major web conferences to promote, of course, but also to watch and learn and listen. What&#8217;s sets them apart is that they turn around and act on that knowledge in creative ways.</p>
<h3>Riding Piggy Back On Google&#8217;s Web Font Initiative</h3>
<p>[A developing story... more analysis, riding in on piggy-back, is on the way...]</p>
<div style="display:none;"<br />
at the <a href="http://futureofwebdesign.com/new-york-2011/schedule/">Future Of Web Design</a> conference</p>
<p>The web font plug-in allows you to use WebINK and Google Web Fonts in the creation of website mock-ups in Photoshop. begrudge</p>
</div>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/google-fonts-failing-for-internet-explorer-users/' rel='bookmark' title='Google Fonts Failing For Internet Explorer Users'>Google Fonts Failing For Internet Explorer Users</a></li>
<li><a href='http://readableweb.com/a-nice-use-of-web-fonts-in-mainstream-media/' rel='bookmark' title='A Nice Use Of Web Fonts In Mainstream Media'>A Nice Use Of Web Fonts In Mainstream Media</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Steve Jobs Role In Typography By Computer</title>
		<link>http://readableweb.com/steve-jobs-role-in-typography-by-computer/</link>
		<comments>http://readableweb.com/steve-jobs-role-in-typography-by-computer/#comments</comments>
		<pubDate>Mon, 17 Oct 2011 16:21:37 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[Digital Life]]></category>
		<category><![CDATA[Digital Publishing]]></category>
		<category><![CDATA[Education]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[People]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5508</guid>
		<description><![CDATA[A few weeks ago, my eye doctor said to me, &#8220;I only know of two people who know anything about fonts, you and Steve Jobs.&#8221; Seemed Dr. Patel was re-doing his web site and had questions about the qualities of Trebuchet MS. But the line about Jobs raised an eyebrow, naturally, and it was as [...]
Related posts:<ol>
<li><a href='http://readableweb.com/web-typography-simply-smashing/' rel='bookmark' title='Web Typography, Simply Smashing'>Web Typography, Simply Smashing</a></li>
<li><a href='http://readableweb.com/a-future-without-flash-microsoft-and-apple-nail-the-coffin/' rel='bookmark' title='A Future Without Flash: Microsoft and Apple Nail The Coffin'>A Future Without Flash: Microsoft and Apple Nail The Coffin</a></li>
<li><a href='http://readableweb.com/practical-font-design-third-edition/' rel='bookmark' title='Practical Font Design, Third Edition'>Practical Font Design, Third Edition</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p>A few weeks ago, my eye doctor said to me, &#8220;I only know of two people who know anything about fonts, you and Steve Jobs.&#8221; Seemed Dr. Patel was re-doing his web site and had questions about the qualities of Trebuchet MS. But the line about Jobs raised an eyebrow, naturally, and it was as I suspected &#8211; Dr. Patel had read Jobs&#8217; commencement address to the Stanford graduating class of 2005, the relevant portion of which follows:</p>
<blockquote><p><em>&#8220;Reed College [where Steve Jobs enrolled for awhile] at that time offered perhaps the best calligraphy instruction in the country. Throughout the campus every poster, every label on every drawer, was beautifully hand calligraphed. Because I had dropped out and didn&#8217;t have to take the normal classes, I decided to take a calligraphy class to learn how to do this. I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can&#8217;t capture, and I found it fascinating.<br />
None of this had even a hope of any practical application in my life. But ten years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it&#8217;s likely that no personal computer would have them.</em></p></blockquote>
<h3>Setting The Record Straight</h3>
<p>A lot of people know that Benjamin Franklin did research on electricity. The silhouette of Franklin in a lightning storm with his kite flying and key dangling is emblazoned on the average American&#8217;s brain: the rugged individualist in pursuit of a dream, no matter the danger. But what almost nobody knows is that Franklin&#8217;s work on electricity was as a part of a team of co-equals. And that his signature was only one of several others&#8217; that appeared upon publication of that work. But Franklin had the fame and got the credit. Sound familiar? History is a single-sentence thing.</p>
<p>A lone eagle, as an icon, works great. A flock of geese, not so much.</p>
<h3>FinksLinks: Pre-Approved For Your Reading Pleasure</h3>
<p>Here&#8217;s a couple of articles to help put it all in perspective:</p>
<p><a href="http://blog.extensis.com/apple/steve-jobs-typography.php">The Impact of Steve Jobs on Typography</a></p>
<p>
<a href="http://blog.fonts.com/2011/10/12/steve-jobs-and-type-connecting-the-dots/">Steve Jobs and Type: Connecting the Dots</a></p>
<p>And here, on Typophile.com, a bit of additional insight, debate, and perhaps a few ruffled feathers: <a href="http://www.typophile.com/node/86146">Steve Jobs 1955-2011</a></p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/web-typography-simply-smashing/' rel='bookmark' title='Web Typography, Simply Smashing'>Web Typography, Simply Smashing</a></li>
<li><a href='http://readableweb.com/a-future-without-flash-microsoft-and-apple-nail-the-coffin/' rel='bookmark' title='A Future Without Flash: Microsoft and Apple Nail The Coffin'>A Future Without Flash: Microsoft and Apple Nail The Coffin</a></li>
<li><a href='http://readableweb.com/practical-font-design-third-edition/' rel='bookmark' title='Practical Font Design, Third Edition'>Practical Font Design, Third Edition</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/steve-jobs-role-in-typography-by-computer/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>A Nice Use Of Web Fonts In Mainstream Media</title>
		<link>http://readableweb.com/a-nice-use-of-web-fonts-in-mainstream-media/</link>
		<comments>http://readableweb.com/a-nice-use-of-web-fonts-in-mainstream-media/#comments</comments>
		<pubDate>Fri, 09 Sep 2011 00:16:10 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Digital Publishing]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5344</guid>
		<description><![CDATA[There&#8217;s a nice use of web fonts at the New York Times. (Just remember to clear your cookies to keep on reading past their twenty page a month limit.) Titled The Reckoning&#8201;, it&#8217;s a link and teaser page for a group of stories about 9/11. Very tasteful and dutifully solemn. Definitely not cheesy. We don&#8217;t [...]
Related posts:<ol>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/' rel='bookmark' title='Best Practice For @Font-Face CSS Takes A Turn'>Best Practice For @Font-Face CSS Takes A Turn</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><div style="float:left">
<img src="/images/reckoningthumb.png" />
</div>
<p>There&#8217;s a nice use of web fonts at the New York Times. (Just remember to clear your cookies to keep on reading past their <a href="http://readableweb.com/turning-my-back-on-the-new-new-york-times/">twenty page a month limit.</a>)</p>
<p>Titled <em><a href="http://www.nytimes.com/interactive/us/sept-11-reckoning/viewer.html<br />
">The Reckoning</a></em>&thinsp;, it&#8217;s a link and teaser page for a group of stories about 9/11.</p>
<p>Very tasteful and dutifully solemn.</p>
<p>Definitely <a href="http://www.commarts.com/columns/how-explain-typography.html">not cheesy</a>.</p>
<p>We don&#8217;t want cheese.</p>
<p>Worth a look. Really. Except for the upper case &#8220;G&#8221; with a pimple on its chin. Is this some kind of slick reference to Lincoln? Or Lincoln&#8217;s well-documented love of pizza? We&#8217;ll probably never know for sure.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/' rel='bookmark' title='Best Practice For @Font-Face CSS Takes A Turn'>Best Practice For @Font-Face CSS Takes A Turn</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/a-nice-use-of-web-fonts-in-mainstream-media/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A Webfont Specimen Page Free For Download</title>
		<link>http://readableweb.com/a-free-downloadable-webfont-specimen-page/</link>
		<comments>http://readableweb.com/a-free-downloadable-webfont-specimen-page/#comments</comments>
		<pubDate>Sun, 10 Jul 2011 15:53:36 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5249</guid>
		<description><![CDATA[Tim Brown of Typekit put together a webfont specimen page awhile back. Originally introduced in Tim&#8217;s article for AListApart: Real Web Type in Real Web Context, and it does give a real nice view of a font in a variety of contexts. I&#8217;ve incorporated a modified version of it into my suite of web font [...]
Related posts:<ol>
<li><a href='http://readableweb.com/a-free-rasterbridge-web-font-puffbuddy-light/' rel='bookmark' title='A Free RasterBRIDGE&reg; Web Font: Puffbuddy Light'>A Free RasterBRIDGE&reg; Web Font: Puffbuddy Light</a></li>
<li><a href='http://readableweb.com/ten-great-free-fonts-cross-browser-a-case-study-in-font-face/' rel='bookmark' title='Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face'>Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p><a href="http://nicewebtype.com/">Tim Brown</a> of Typekit put together a <a href="http://webfontspecimen.com/">webfont specimen page</a> awhile back. Originally introduced in Tim&#8217;s article for AListApart: <a href="http://www.alistapart.com/articles/real-web-type-in-real-web-context/">Real Web Type in Real Web Context</a>, and it does give a real nice view of a font in a variety of contexts.
</p>
<p><center><br />
<img src="/images/specimenpagemed.jpg" /><br />
</center></p>
<p>I&#8217;ve incorporated a modified version of it into my suite of web font test pages. And, for those who might find it useful, you can <a href="http://readableweb.com/webfontspecimen/specimendemo.htm">take a quick look at it here</a>, and <a href="http://readableweb.com/downloads/webfontspecimenpage1.zip">download it here</a>.</p>
<h3>The Modifications</h3>
<p>There&#8217;s two main differences between my version and Tim&#8217;s:</p>
<ol>
<li>For test pages, I like to keep everything &#8211; the HTML, CSS, JavaScript, and even images &#8211; contained in a single file. As my webfont test pages have evolved, I&#8217;ve just found it simpler this way. At least to me. So everything is in one .htm file. The two images from the original &#8211; used for background &#8211; are included as Data URIs in the CSS. The only downside is that those images won&#8217;t show up in IE6 or 7: a situation that doesn&#8217;t bother me because nearly all the functionality remains intact and my IE testing is usually done on IE8. (IE6, 7, and 8 all require EOT, and Windows GDI is the rendering engine for all, and I&#8217;ve yet to see a font problem appear in IE6 or IE7 that didn&#8217;t show up in IE8.)</li>
<li>The @font-face syntax has been updated to use the &#8220;Fontspring&#8221;, single declaration syntax.<br />
See: <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Further Hardening of the Bulletproof Syntax</a> and <a href="http://www.fontspring.com/blog/fixing-ie9-font-face-problems">Best Practices for Serving Webfonts to IE9</a> on the Fontspring blog for more information.</li>
</ol>
<h3>Pause Before You Say &#8220;IE Sucks&#8221;</h3>
<p>An interesting glitch appeared while I was working on this. When displaying the font Ultra from Google Webfonts, there was a strange difference between IE8 and Chrome. In IE8, the glyph &#8220;j&#8221; was clipped off on the left like this:<br />
<img src="/images/clipped-j-inultra.png" /><br />
But Chrome rendered the entire glyph and allowed the part that IE clips off to extend outside the bounding box to the left:<br />
<img src="/images/unclipped-j.png" /><br />
In both cases, it&#8217;s not what you want.<br />
Which browser is doing the technically correct thing? And more importantly, what&#8217;s causing it? Since the clipped &#8220;j&#8221; in IE was more of an eyesore, the kneejerk response for most developers would be, I think, &#8220;Goddam IE! Again!&#8221;. But after opening the Ultra font in a font viewer, the real source of the problem revealed itself.<br />
In the font itself, the position of the left sidebearing of the &#8220;j&#8221; was the source of the problem:<br />
<img src="/images/leftsidebearing-jarrow.png" /> You can see that the font itself &#8220;clips&#8221; the &#8220;j&#8221;. (And this may or may not show up depending upon the layout.)
</p>
<p>Over the past eight months I have cracked open many hundreds of fonts, one after the other. And I can tell you firsthand that even on carefully made fonts, stuff like this happens a lot. Ultra was designed by Brian J. Bonislawsky of <a href="http://www.astigmatic.com/freeware.html">Astigmatic</a> who&#8217;s very experienced. But even so, stuff happens. So, before you go blaming the browser, if you&#8217;re using a webfont, remember that a new variable has been added to the mix &#8211; and the source of what seems like &#8220;buggy&#8221; behavior is just as likely to be there as anywhere else. Just what web developers needed, a new complication!</p>
<h3>Some Cool Tools That Came Into Play</h3>
<p>The CSS for Tim Brown&#8217;s page was originally in three separate CSS files. I brought them together within a single style tag using a nifty free tool &#8211; <a href="http://cssmixer.codeplex.com/">CSS Mixer</a> &#8211; which allows you to select a bunch of CSS files, concatenate them into a single file, and minify the code using the Yahoo User Interface Library. After that, it&#8217;s cut and paste. Very handy. There is also a tool by the same developer, <a href="http://www.sambeauvois.be/blog/">Sam Beauvois</a>, for concatenating and minifying JavaScript named <a href="http://jsmixer.codeplex.com/">JS Mixer</a>. (They&#8217;re .NET executables for Windows only. No Mac or Nix versions unfortunately.)</p>
<p>That&#8217;s it. Pay it forward.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/a-free-rasterbridge-web-font-puffbuddy-light/' rel='bookmark' title='A Free RasterBRIDGE&reg; Web Font: Puffbuddy Light'>A Free RasterBRIDGE&reg; Web Font: Puffbuddy Light</a></li>
<li><a href='http://readableweb.com/ten-great-free-fonts-cross-browser-a-case-study-in-font-face/' rel='bookmark' title='Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face'>Ten Great Free Fonts Cross-Browser: A Case Study In @Font-Face</a></li>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/a-free-downloadable-webfont-specimen-page/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>New @Font-Face Syntax: Simpler, Easier</title>
		<link>http://readableweb.com/new-font-face-syntax-simpler-easier/</link>
		<comments>http://readableweb.com/new-font-face-syntax-simpler-easier/#comments</comments>
		<pubDate>Mon, 07 Feb 2011 17:51:59 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=5119</guid>
		<description><![CDATA[I love it when a plan comes together. Some months ago, in an an email exchange with Jeffrey Zeldman about the feasibility of a book about web fonts, I wrote that the turning point &#8211; the point at which enough would be known to establish best practices &#8211; would be around the time IE9 and [...]
Related posts:<ol>
<li><a href='http://readableweb.com/mo-bulletproofer-font-face-css-syntax/' rel='bookmark' title='Mo&#8217; Bulletproofer @Font-Face CSS Syntax'>Mo&#8217; Bulletproofer @Font-Face CSS Syntax</a></li>
<li><a href='http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/' rel='bookmark' title='Best Practice For @Font-Face CSS Takes A Turn'>Best Practice For @Font-Face CSS Takes A Turn</a></li>
<li><a href='http://readableweb.com/eotfast-a-new-and-essential-product-for-font-face-web-fonts/' rel='bookmark' title='EOTFAST: A New And Essential Product For @Font-Face Web Fonts'>EOTFAST: A New And Essential Product For @Font-Face Web Fonts</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p>I love it when a plan comes together.</p>
<p>Some months ago, in an an email exchange with <a href="http://www.zeldman.com/">Jeffrey Zeldman</a> about the feasibility of a book about web fonts, I wrote that the turning point &#8211; the point at which enough would be known to establish best practices &#8211; would be around the time IE9 and Firefox 4 were released to market.</p>
<h3>A Simple And Conformant Cross Browser Syntax</h3>
<p>Now, with IE9 and FF4 nearing release, as if on cue, Ethan Dunham of Font Squirrel has revisited the problem of a cross-browser CSS @Font-Face syntax and found &#8211; a year and half after it first became an issue &#8211; <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">a new and simpler solution</a>.&ensp;This was last Thursday.</p>
<p>Only on the web could change happen so fast. Knowledgeable eyeballs were on it immediately. And within hours of publication, it was tested and tweaked a few times. By the end of the day it was already being implemented at <a href="http://fontsquirrel.com/">Font Squirrel</a>, <a href="http://fontspring.com/">Font Spring</a>, and <a href="http://kernest.com/">Kernest</a>, too.</p>
<h3>It Comes In Two Flavors</h3>
<p>
Since one of the things I <em>do</em> like about the Mo&#8217; Bulletproofer syntax is that, while the following is conformant:</p>
<pre>
     src: url('http://:/') format('no-ie-404')
</pre>
<p style="margin-top:-24px;">it&#8217;s <strong>obviously odd</strong> and <strong>deliberately self-describing</strong>. Therefore it&#8217;s less likely to be left out once you&#8217;re in the habit of using it. And less likely to be deleted accidentally by someone unfamiliar with it&#8217;s purpose. So, the following is <em>my</em> version of the new syntax, in line with that practice. It&#8217;s the result of tests done with the IE9 Preview 7 build and many other desktop browsers and platforms over the weekend.</p>
<h3>The Trick Is In The Question Mark</h3>
<p>There are currently two variations. They are:</p>
<pre>
@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('embedded-opentype'),
	   url('fishyfont.woff') format('woff'),
	   url('fishyfont.ttf')  format('truetype'),
	   url('fishyfont.svg#svgFontName') format('svg');
	}
</pre>
<p>With this variation, IE 6, 7, 8 <em>and</em> IE9 take the EOT file. But, of course, IE9 supports WOFF, too. So what if, for some reason, you want IE9 to take the WOFF file instead?</p>
<h3>Follow The Bouncing Ball</h3>
<p>Well, the ball that was set bouncing with Ethan&#8217;s original post on the <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">Font Spring Blog</a> bounced back again from Melbourne, Australia where <a href="http://www.ryanseddon.com/">Ryan Seddon</a> of <a href="http://www.thecssninja.com/">CSS Ninja</a> posted <a href="http://www.thecssninja.com/demo/css_fontface/">a fix that overcomes this limitation</a>:</p>
<pre>
@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('ie9-skip-eot'),
           url('fishyfont.woff') format('woff'),
           url('fishyfont.ttf') format('truetype'),
           url('fishyfont.svg#svgFontName') format('svg');
	}
</pre>
<p>With this variation, IE9 will <em>not</em> take the EOT. Instead it takes the next font in the stack that&#8217;s in a format that IE9 understands. In this case the WOFF file. If there was no WOFF file, it would take the TTF. (That is, as long as the TTF has <a href="http://readableweb.com/web-font-follies/#comment-8096">the hidden embedding bit</a> set to &#8220;Installable&#8221; &#8211; if Microsoft is still sticking to <em>that</em>. I&#8217;m not sure <em>what</em> IE9 does in that case, we&#8217;ll see.)</p>
<h3>It&#8217;s Still Being Tested</h3>
<p>There&#8217;s no such thing as too many tests or testers. <strong>If you find a problem, please report it on the Font Spring Blog. Or here.</strong></p>
<p>I&#8217;ll be posting more as I test more and to explain how and why all this works and what problems it solves.</p>
<h3 id="rctests">Update: Feb 17 2011</h3>
<p><span style="color:red;font-weight:bold;">Alert:</span> In some <a href="http://readableweb.com/fontface/sc/iemodetests.htm">quick-and-dirty tests</a> of this syntax in IE9 RC1, a problem came up. If the page kicks IE9 into a &#8220;less than&#8221; IE9 <a href="http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx">Compatibility Mode</a>, this technique fails and the fallback font displays. The word from Microsoft&#8217;s IE team is that <em>this behavior will not be altered</em> for IE9 RTM.</p>
<p>[Let's get it over with: insert, mentally, your expletive of choice here and now, and then let's move on....]</p>
<p>What this means is that, as of right now, the most comprehensive, failure-proof method &#8211; one that avoids the bug in Android, the innate strangeness of the local() descriptor, and bridges the gap between IE6, 7, 8, and IE9 &#8211; is the <a href="http://readableweb.com/mo-bulletproofer-font-face-css-syntax/">Mo&#8217; Bulletproofer @Font-Face Syntax</a>. <strong>However! However!</strong> If you prefer a single declaration solution and your pages <em>don&#8217;t</em> trigger one of the IE9 Compatibility Modes, barring any more unforeseen changes between IE9 RC1 and IE9 RTM, the Fontspring syntax seems alive and well. The problem won&#8217;t come up. Note also, that you can near-totally prevent failure and ensure your pages are running in IE9 &#8220;Edge&#8221; mode by using the <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx">X-UA-Compatible Meta Tag</a>.</p>
<h3 id="rctests2">Update: March 02 2011</h3>
<p><span style="color:red;font-weight:bold;">Alert:</span> More changes, but I think we are finally at the end. Maybe. Ethan Dunham <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">has &#8220;hardened&#8221; the syntax</a> by adding in the EOT-only src descriptor that was a part of Paul Irish&#8217;s Bulletproof Syntax. <strong>And it works in IE9&#8242;s compatibility modes, too.</strong> (I can&#8217;t see a downside. In fact, adding that first EOT-only src descriptor was Microsoft&#8217;s recommended approach to bridging the gap between IE 6, 7, and 8&#8242;s proprietary implementation and IE9&#8242;s standards-based implementation from the very start.)<br />
So, the following now works universally:</p>
<pre>
@font-face {
	font-family: 'fishyfont';
	src: url('fishyfont.eot'); /* IE9 Compat Modes */
	src: url('fishyfont.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('fishyfont.woff') format('woff'), /* Modern Browsers */
	     url('fishyfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('fishyfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
</pre>
<p>Ralf Hermann is recommending it in <a href="http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/">an article on @font-face at Smashing Magazine</a>.</p>
<p>Is it rock-solid? Looks like it. I would use it. But only IE9 RTM can seal the deal. Or not.<br />
Stay tuned.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/mo-bulletproofer-font-face-css-syntax/' rel='bookmark' title='Mo&#8217; Bulletproofer @Font-Face CSS Syntax'>Mo&#8217; Bulletproofer @Font-Face CSS Syntax</a></li>
<li><a href='http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/' rel='bookmark' title='Best Practice For @Font-Face CSS Takes A Turn'>Best Practice For @Font-Face CSS Takes A Turn</a></li>
<li><a href='http://readableweb.com/eotfast-a-new-and-essential-product-for-font-face-web-fonts/' rel='bookmark' title='EOTFAST: A New And Essential Product For @Font-Face Web Fonts'>EOTFAST: A New And Essential Product For @Font-Face Web Fonts</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/new-font-face-syntax-simpler-easier/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Best Practice For @Font-Face CSS Takes A Turn</title>
		<link>http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/</link>
		<comments>http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/#comments</comments>
		<pubDate>Mon, 31 Jan 2011 13:32:50 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[Browsers]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=4982</guid>
		<description><![CDATA[&#8220;Bulletproof&#8201;&#8221; is out, and &#8220;Mo&#8217; Bulletproofer&#8221; is in. In the last few days, major players on the web fonts scene &#8211; Kernest and Font Squirrel &#8211; have moved from Paul Irish&#8217;s Bulletproof @Font-Face syntax to Richard Fink&#8217;s Mo&#8217; Bulletproofer syntax as the default. Ethan Dunham, the developer behind Font Squirrel and Fontspring says: Mo&#8217; Bulletproofer [...]
Related posts:<ol>
<li><a href='http://readableweb.com/new-font-face-syntax-simpler-easier/' rel='bookmark' title='New @Font-Face Syntax: Simpler, Easier'>New @Font-Face Syntax: Simpler, Easier</a></li>
<li><a href='http://readableweb.com/mo-bulletproofer-font-face-css-syntax/' rel='bookmark' title='Mo&#8217; Bulletproofer @Font-Face CSS Syntax'>Mo&#8217; Bulletproofer @Font-Face CSS Syntax</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p><strong>&#8220;Bulletproof&thinsp;&#8221;</strong> is out, and <strong>&#8220;Mo&#8217; Bulletproofer&#8221;</strong> is in.</p>
<p>In the last few days, major players on the web fonts scene &#8211; <a href="http://kernest.com">Kernest</a> and <a href="http://fontsquirrel.com">Font Squirrel</a> &#8211; have moved from Paul Irish&#8217;s <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @Font-Face</a> syntax to Richard Fink&#8217;s <a href="http://readableweb.com/mo-bulletproofer-font-face-css-syntax/">Mo&#8217; Bulletproofer</a> syntax <em>as the default</em>.</p>
<p><a href="http://5by5.tv/bigwebshow/1">Ethan Dunham</a>, the developer behind <a href="http://fontsquirrel">Font Squirrel</a> and <a href="http://fontspring.com">Fontspring</a> says:</p>
<p style="font-style:italic;margin:10px auto 10px 20px;border-left: 1px solid gray;padding-left:10px;">Mo&#8217; Bulletproofer is the only syntax that works across browsers including Android.<br />
IE and Android both have buggy implementations and this format works around both of them.
</p>
<p>Since I&#8217;m Richard Fink and this <em>could</em> just be my ego talking, here&#8217;s why Mo&#8217; Bulletproofer is best practice going forward&#8230;</p>
<h3>The Android <strong>local()</strong> Bug</h3>
<p>Android has a bug that&#8217;s triggered by using the <strong>local()</strong> descriptor inside the @font-face declaration.</p>
<p>To clarify, the following non-standard code does not work on Android as it does in IE 6-8:</p>
<pre>
@font-face {
  font-family: 'somefont';
  src: url(somefont.eot);
  /* IE takes this font, Android doesn't. */
  src: local('3ix90a'), url(somefont.ttf) format('truetype');
  /* Android chokes on the local() descriptor and
    discards the entire @font-face declaration.
    No web fonts show up. */
   }
</pre>
<p>Unlike IE, Android doesn&#8217;t &#8220;look back&#8221; and take the font specified in the initial <strong>url</strong> reference.<br /><strong>This makes the &#8220;Bulletproof&thinsp;&#8221; syntax unusable on Android.</strong><br />
The problem is described in a <a href="http://code.google.com/p/android/issues/detail?id=10609">bug report</a> filed by Google&#8217;s Paul Irish, originator of &#8220;Bulletproof&thinsp;&#8221;.<br />
It also includes this FYI:</p>
<p style="font-style:italic;margin:20px;border-left: 1px solid gray;padding-left:10px;">This bug has also caused a workaround from the Google Font API team: http://code.google.com/apis/webfonts/<br />
As a result they sniff and change the CSS they serve to Android 2.2 devices.</p>
<h3>Android Is Too Big For This Problem To Go Ignored</h3>
<p>There isn&#8217;t much choice here. Mo&#8217; really <strong>is</strong> more bulletproof. Even if the Android problem didn&#8217;t exist, there are other solid reasons for using Mo&#8217; , but Android is the kicker.<br />
How big is the Android market? Well, in 2010 Android emerged as <a href="http://www.zokem.com/2011/01/in-the-us-market-iphone-outperforms-other-mobile-platforms-in-user-loyalty-by-a-wide-margin-android-is-second-blackberry-fourth/">the single best selling mobile platform</a> in the United States.<br />
Andy Rubin, former Android CEO and current VP of Engineering at Google, reports that <a href="http://twitter.com/Arubin/status/12727540783251456#">300,000 Android devices are being activated <em>every day</em></a>.
</p>
<h3>Bulletproof Reported As Problematical On Linux, Too</h3>
<p>Last week there was a pingback here at RW from WordPress developer Aaron James Young <a href="http://ajy.co/blog/tech/web-designers-skeleton-wordpress-theme-in-html5">saying</a>:</p>
<p style="font-style:italic;margin:10px auto 10px 20px;border-left: 1px solid gray;padding-left:10px;">I use the Mo’ Bulletproof @font-face syntax, which I’ve found to have the best cross-browser compatibility.</p>
<p>Young spent considerable time hands-on, <a href="http://ajy.co/blog/tech/font-face-for-obscure-linux-browsers">testing Linux based browsers</a>, before coming to this conclusion.<br />
(It seems GTK-Webkit and Konqueror also have problems with <strong>local()</strong>).
</p>
<h3>Don&#8217;t Use <strong>local()</strong> At All</h3>
<p>The bottom line is that using <strong>local()</strong> at all is a bad practice. In <a href="http://readableweb.com/google-fonts-failing-for-internet-explorer-users/">Google Fonts Failing for Internet Explorer Users</a> I wrote:</p>
<p style="font-style:italic;margin:10px auto 10px 20px;border-left: 1px solid gray;padding-left:10px;">See Jonathan Snook’s post <a href="http://snook.ca/archives/html_and_css/font-face-in-chrome/">here</a>, and this Typophile thread <a href="http://www.typophile.com/node/63992">here</a> for an in-depth explanation of why the local() descriptor should not be used to specify a locally installed font except in very special circumstances.</p>
<p>I now take part of that back: in the absence of being able to specify and query for a unique font version ID &#8211; <em>as a matter of defensive coding</em> &#8211; I can&#8217;t imagine a plausible scenario where using <strong>local()</strong> isn&#8217;t, in some way, asking for trouble.</p>
<p>Here&#8217;s the <a href="http://readableweb.com/mo-bulletproofer-font-face-css-syntax/">original post</a> on Mo&#8217; Bulletproofer. To be updated soon, after the next Beta of IE9 arrives for testing.</p>
<h3 id="upd020311">Update &#8211; Feb 3, 2011</h3>
<p>Paul Irish has <a href="http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/#comment-10727">chimed in</a> on this issue in the comments. See his roundup on full view, with web fonts, on <a href="http://dl.dropbox.com/u/39519/webfontsdemo/2011.html">this test page</a>. Paul is reporting that IE9 downloads both the EOT file <em>and</em> the WOFF file using Mo&#8217; Bulletproofer. His tests were performed in Platform Preview 7. Is it a bug or a flaw in Mo&#8217; Bulletproofer that calls for the addition of Conditional Comments? (That <em>would</em> fix the problem and it&#8217;s likely that the page would already contain the necessary &#8220;less than&#8221; IE9 Conditional Comment tags, anyway.) Also, in yet a new turn, Ethan Dunham of Font Squirrel has <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">chimed in with yet another syntax</a> that looks quite promising. And clever, damn him. Stay tuned. Rumor has it that IE9 RC1 (or will it be an RTM?) is due out in just a few days. Will go hands-on with testing then.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/new-font-face-syntax-simpler-easier/' rel='bookmark' title='New @Font-Face Syntax: Simpler, Easier'>New @Font-Face Syntax: Simpler, Easier</a></li>
<li><a href='http://readableweb.com/mo-bulletproofer-font-face-css-syntax/' rel='bookmark' title='Mo&#8217; Bulletproofer @Font-Face CSS Syntax'>Mo&#8217; Bulletproofer @Font-Face CSS Syntax</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/best-practice-for-font-face-css-takes-a-turn/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Google Fonts Failing For Internet Explorer Users</title>
		<link>http://readableweb.com/google-fonts-failing-for-internet-explorer-users/</link>
		<comments>http://readableweb.com/google-fonts-failing-for-internet-explorer-users/#comments</comments>
		<pubDate>Mon, 10 Jan 2011 15:39:13 +0000</pubDate>
		<dc:creator>Richard Fink</dc:creator>
				<category><![CDATA[@Font-Face]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[Readability]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Fonts]]></category>
		<category><![CDATA[Web Typography]]></category>

		<guid isPermaLink="false">http://readableweb.com/?p=4900</guid>
		<description><![CDATA[If Google isn&#8217;t going to take web fonts seriously, they should stay away. Slapping on a &#8220;Beta&#8221; label doesn&#8217;t excuse sloppiness or, worse, pursuing a hidden competitive agenda at the expense of users and developers. Now, I can&#8217;t know if Google Fonts is shortchanging IE users intentionally, but in light of the controversy over, say, [...]
Related posts:<ol>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/users-report-fuzzy-fonts-in-evernote-3-5/' rel='bookmark' title='Users Report Fuzzy Fonts In Evernote 3.5'>Users Report Fuzzy Fonts In Evernote 3.5</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p></p><p>If Google isn&#8217;t going to take web fonts seriously, they should stay away. Slapping on a &#8220;Beta&#8221; label doesn&#8217;t excuse sloppiness or, worse, pursuing a hidden competitive agenda at the expense of users and developers. Now, I can&#8217;t know if Google Fonts is shortchanging IE users intentionally, but in light of the controversy over, say, <a href="http://blog.lizardwrangler.com/2009/09/28/browser-soup-and-chrome-frame/">Chrome Frame</a>, you have to wonder.</p>
<p>Here&#8217;s what&#8217;s going on:</p>
<p>Jerrold Maddox, art professor, <a href="https://www.sova.psu.edu/faculty_staff/faculty_directory/jerrold_maddox/jerrold_maddox">teacher of new media design</a> at Penn State University, and a fellow member of <a href="http://www.atypi.org/">ATYPI</a>, sent me an email last Friday asking why an italic font &#8211; being served by Google &#8211; wasn&#8217;t showing up on his iPad.<br />(&thinsp;Jerry&#8217;s heavily into HTML as a platform for ebooks. The book that prompted his question, <a href="http://www.personal.psu.edu/jxm22/genji/paulownia_court.html">is here</a>.)</p>
<p>The font is <strong>OFL Sorts Mills Goudy TT</strong> which comes in a Regular and an Italic. First, I looked in Internet Explorer. (IE users are still, conservatively, 60% of browser users. And yes, I am one of the great unwashed.)<br />Well, the italic wasn&#8217;t showing up in IE, either. IE was <em>synthesizing</em> the italic. In fact, on the <a href="http://code.google.com/webfonts/family?family=OFL+Sorts+Mill+Goudy+TT&#038;subset=latin#variants">specimen page for the font</a> at Google, IE synthesizes it there, too. You can take a look.<br /> What&#8217;s going on?</p>
<p>As it turns out, if you specify both regular and italic members of a font-family, Google doesn&#8217;t send more than the first one, the Regular, to IE. This is by design, not a malfunction. A quick test of two other fonts &#8211; Droid Serif and Tinos &#8211; gave the same result. And you can <em>see</em> it on the specimen pages.</p>
<p>You can test this by inserting this line into your style sheet:</p>
<p><code>@import url(http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT:regular,italic);</code></p>
<p>Alternatively, keying the URL into the address bar will show you the CSS being inserted by the @import declaration for the particular browser you are using.</p>
<p>Google fonts <em>does not</em> insert the CSS for the italic when it sniffs Internet Explorer. In fairness, I scoured the Google Fonts API <a href="http://code.google.com/apis/webfonts/docs/technical_considerations.html">documentation</a> for any description of this behavior but there was nothing.<br />
Internet Explorer has supported the use of font-families for over ten years. It&#8217;s well documented at <a href="http://eotfast.com">EOTFAST</a>. I know because I wrote it. (BTW &#8211; EOTFAST will soon be upgraded to include an EOTFAST 2.0. Plus additional tools and expanded tips and documentation. Stay tuned.)</p>
<h3>Beta Not Use Google Fonts, Because There&#8217;s More Wrong</h3>
<p>I wish this was the only defect in Google&#8217;s font effort. It isn&#8217;t.</p>
<ul>
<li><strong>Ordinary characters may be missing from the font</strong>:<br />
For example, the font Tinos is missing something as basic as a semi-colon. And yet, the <a href="http://code.google.com/webfonts/family?family=Tinos&#038;subset=latin#set">character list</a> leads you to believe that it&#8217;s there. (If you look at the character list closely, you can see that the style of the colon and semi-colon are different. It&#8217;s probably the fallback font peeking through.)<br />
Here are screenshots:<br />
<img src="/images/missingsemicolon.jpg">&emsp;FontLab shows the missing glyph.<br />
<img src="/images/missingsemicolon2.jpg">&emsp;See the difference?
</li>
<li><strong>Google&#8217;s CSS Syntax Can Mess You Up:</strong><br />
Best practices are being ignored. See Jonathan Snook&#8217;s post <a href="http://snook.ca/archives/html_and_css/font-face-in-chrome/">here</a>, and this Typophile thread <a href="http://www.typophile.com/node/63992">here</a> for an in-depth explanation of why the local() descriptor should <strong>not</strong> be used to specify a locally installed font except in very special circumstances. (Normally, it&#8217;s used as <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">a mask to prevent unwanted http requests</a> in IE.) The Tinos font is the <em>perfect example</em> of why this is so.<br />
<strong>Scenario:</strong> Maybe the developer wants to make some complimentary images in Photoshop using Tinos and installs this version of the font  &#8211; without the semi-colon &#8211; in the operating system. Well, unless you&#8217;ve figured out a way to push down font updates from the browser into the Windows fonts folder, with the CSS syntax as it&#8217;s now being delivered, forevermore on <em>that</em> developer&#8217;s machine, Tinos <em>will continue to appear without a semi-colon</em>. It will not have been updated with the fix.<br />Message to Google Fonts: if you&#8217;re going to take a &#8220;we&#8217;ll fix it later&#8221; approach, please think through how and to whom those later fixes will be delivered. And if delivery is even possible except by Federal Express.</li>
<li><strong>The font may contain unhinted glyphs:</strong> For example, the ASCII characters in Sort&#8217;s Mill Goudy are all hinted and look OK in the Windows GDI rasterizer. But many, many of the non-English glyphs and all of the Small-Caps apparently, are not hinted. If your web site is in French or Spanish you may be in for a whole lot of ugly.</li>
</ul>
<h3>It&#8217;s A Matter Of Trust.</h3>
<p>This is Google, not a font services start-up out of nowhere. Developers are still very much strangers to using web fonts and @font-face and when Google brands an effort with their name, that creates expectations.  Dabbling &#8211; just dipping a toe in the water &#8211; without the seriousness of at least some minimal quality control or, in the absence of that, some additional caveats and added transparency, is not a contribution. It&#8217;s just messing with people&#8217;s heads. And some fine-print disclaimer somewhere doesn&#8217;t change that.<br />
I trust Google for Analytics and all kinds of other things. I am a great admirer of the Google Books project. And Google, the company, in general. But for web fonts today? Fuggedaboutit!</p>
<p>And, oh, BTW &#8211; the italic wasn&#8217;t showing up on Jerry&#8217;s iPad because he hadn&#8217;t as yet upgraded to the new OS with support for web fonts in the TrueType format.</p>
<p>Case closed.</p>
<p>Related posts:<ol>
<li><a href='http://readableweb.com/extensis-brings-google-web-fonts-straight-to-photoshop/' rel='bookmark' title='Extensis Brings Google Web Fonts Straight Into Photoshop'>Extensis Brings Google Web Fonts Straight Into Photoshop</a></li>
<li><a href='http://readableweb.com/google-starts-hosting-font-face-web-fonts/' rel='bookmark' title='Google Starts Hosting @Font-Face Web Fonts'>Google Starts Hosting @Font-Face Web Fonts</a></li>
<li><a href='http://readableweb.com/users-report-fuzzy-fonts-in-evernote-3-5/' rel='bookmark' title='Users Report Fuzzy Fonts In Evernote 3.5'>Users Report Fuzzy Fonts In Evernote 3.5</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://readableweb.com/google-fonts-failing-for-internet-explorer-users/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
	</channel>
</rss>

