陳 Jon Tan

SkillSwap Goes Typographic

Jon 陳 — Mon, 9 Mar 2009 17:45:36 GMT

Right. I’m blitzing this. Two posts in one day. It’s unheard of! I’ve finally managed to put up my slides together from SkillSwap Goes Typographic:

Web Type: 80% Science, 20% Art on SlideShare

Also available as a PDF (8.9MB)

The night was fun and informal — heaps of people thinking, talking, and asking about web typography; a treat! The Clearlefties were great hosts in the day, and a special thank you goes to James Box for looking after and inviting me, and to Natalie Downe for helping James organise a fun, relaxed night. The pub inevitably followed with more type talk, and Señor Richard Rutter generously gave me a bed for the night in his fantastic house. The walk to the office in the next morning along the seafront was also a treat. Almost as good in fact as riding the travellators at Gatwick when changing trains on the way there and back.

Rich’s Facing up to Fonts talk had a lot of very well-researched detail about the technical aspects of web typography. I recommend downloading the slides. Mine had some food for thought and a bit on technical legibility. Between us we seemed to cover quite a lot of ground. Thanks for all the kind feedback both on and offline. Hopefully, I’ll make it back sometime and share a few drinks with the fantastic Brightonians again.

Coming up on Saturday at SxSW, there’ll be more typographic musings from Richard Rutter and nefarious others including myself at Quit Bitchin’ and Get Your Glyph On. I tagged them good in the previous post. If you’re going to be in Austin, say hi!

Seven Things

Jon 陳 — Mon, 9 Mar 2009 11:55:57 GMT

Meme is a funny word. I remember interrogating the hive mind of Google to understand what it meant not that long ago. Participating in one (or rather, perpetuating one) is something that always escaped me, but it seems I’ve been stitched up by my mate, Chris Shiflett, and new colleague, Rob Treat. When infected with this meme, you post seven things people might not already know about you. There’s no penalty for not doing it, but apparently you get props for passing it on to seven other people after you’ve done your bit. I’m going to pick on designers!

Meme: ‘A cultural item that is transmitted by repetition in a manner analogous to the biological transmission of genes’ — a term created by Richard Dawkins in his 1976 book, The Selfish Gene.

An Internet meme is an evolved term. Cough — neologism — cough.

Before I get to picking on anyone, I’d better get to the meat of this memetical sandwich:

I once had a farm in Af-ree-ka. No, well, sort-of. I once helped to run a guest house and restaurant in The Seychelles. We did grow things. We used the radical method of throwing papaya seeds out of the kitchen door and being swamped by saplings a few weeks later. There were no lions. The guest house was in a place called Anse Volbert or the Cote D’Or (gold coast) — a seven kilometre strip of white coral sand on the island of Praslin.
I once MCd with drum and bass DJs at a full moon party in Haad Rin, on Ko Pha Ngan in Thailand. It was an accident. The DJ box was open, Sang Som (sugarcane whiskey) was flowing freely, and Bob’s your uncle (or Jon’s your MC). The DJs were happy to oblige after cresting the anxiety curve and realising the dude who looks at least partly farang wasn’t completely awful. It was fun. I think.
Wellington harbour in New Zealand has a shipping lane. You can hire Kayaks, too. When hiring a kayak they warn you explicitly not wander into the shipping lane because the ships will not stop (and probably can’t). The problem is that Wellington harbour is so stunning that it’s easy to spend your time rubber-necking rather than looking out for ferries. The shipping lane is not marked. The slightly-less-than-ambient signifiers that one might be doing it all wrong is a fog horn and the sight of a large ship’s bow heading towards you. I once did a cartoon-style, arm-flailing kayak-sprint in Wellington harbour.
I love the water. I dream of living on a boat one day. For a while, I hunted octopus for food and trade. I’d go out with fins, mask, and the masters of Indian Ocean small boat fishing. While they practiced their craft with mercenary grace, I would flounder, spike in hand, barely making the bottom to chase the octopods before bursting to the surface gulping air. The best bit was hunting in the dive areas. While we hunted, the tourists observed, often slightly wild-eyed and with a disapproving air. Tenderise octopi by boiling them for three hours. The skin falls off and all rubberiness evaporates. Chop, mix with salad and a classic dressing and it’s heavenly grub.
Once upon a time I wrote a book. It was never published, but had fans who used to sit at my mother’s kitchen table and read the lastest chapter. It was a tale of dashing up and down motorways in the dark from weekend to weekend, and occassionally from gig to gig, DJing. An autobiographical coming-of-age story, wrapped in a raw dose of youthful mischief and carnage. Sometimes I revisit it, smile indulgently at the sparse, brutal journalistic prose, and really wish it was indeed an improvement on the style of Ernest Hemingway, or Dale A Dye in Citadel, rather than a bad facsimile.
My father is Singaporean Chinese. My mother is a bit of a mixture. You may have guessed this already. I love all sides of my heritage equally which may also be an obvious thing to say, but it’s not: When I grew up in what felt like a deeply racist place during the 70s and 80s my tendency was to fight the bigots with an exaggerated pride in my Chinese heritage. Things have changed since then. Now I’m just quietly proud of both. I like being from Blighty just as much as I like eating eating Singaporean food. I could sum it up in a sentence: Keep calm and carry on eating prawn sambal on toast.
Eating a Granny Smith apple makes unmentioned parts of my anatomy itch. True story. I have no idea why. Some things are beyond explanation. If that reads like too much information, you have a dirty mind. :)

I’m done! Ah, now who to tag? Well, as promised, some erudites from the design community. I’m late to the party as usual (the meme is dying if not dead) but what the hell. These guys are appearing on the SxSW panel, Quit Bitchin’ and Get Your Glyph On with me this coming Saturday, so finding out more about them if they have time would be great:

Ian Coyle because I heard he’s a super hero
Rich Rutter because still waters run deep
Elliot Jay Stocks for the secret to his mighty barnet
Samantha Warren because she has badass ideas

Do your best, guys! Also being tagged are a few folks from around my way (type and geography):

John D. Boardley because he loves typography and lives in Japan
Rick Hurst who skates and rides, but what does he do when he arrives?
Joe Leech for his UX super brain and tales of adventure

Oh yeah, and last but not least I’m supposed to post the rules:

Link your original tagger(s), and list these rules on your blog.
Share seven facts about yourself in the post — some random, some weird.
Tag seven people at the end of your post by leaving their names and the links to their blogs.
Let them know they’ve been tagged by leaving a comment on their blogs and/or Twitter. (JT note: Referrer stings do this for you mister rule-writer.)

So, that’s the lot. A random post, I realise, but I hope it gave a little insight into yours truly. In mitigation I should say I have been threatening to write it for something like two months. If anyone has a spare day a week to lend me I’d be very grateful!

Growing OmniTI

Jon 陳 — Sun, 21 Dec 2008 16:55:48 GMT

’Twas the week before Christmas, and all was hectic in the house.  Or, at least, that’s how it seems! The last few weeks have been a little wild, culminating in one big event: I’m excited to announce that I’m the new Creative Director at OmniTI.

One reason it’s such big news for me is because this is the first time I’ve been employed for many years. I’ve spent a long time in the fertile fields of freedom, or so it seems looking back. Before the turn of the new millennium, I spent most of my time skipping around the country and the world trying life on for size — finding amazing moments to punctuate the scrapes and mischief. Since then I’ve spent most of my time working with like-minded people from within Grow Collective. So, this event was a long time coming — over a year in fact — and all the better for it!

The truth be told, I doubted if I would ever take a ‘proper job’ again. It may sound dramatic, but it was true! The ability to measure my actions by my own standards, decide what jobs I took, and report only to myself was too precious to me; I thought I’d be unemployable. It had to be something extraordinary to turn my head, and OmniTI is. In my view, it is the most important web company you’ve never heard of (especially if you’re a designer). If you’re a sysadmin, developer, or involved with the open source community, you’ll probably know that there’s hardly a single significant technology deployed on the Web today that someone at OmniTI hasn’t contributed to. If you use Apache, PHP, Perl, PostgreSQL (to name but a few), or frameworks like Cake and Solar, you’re probably reading books, using code or documentation that people at OmniTI have written, or helped create. They also have an awesome client list, featuring the likes of National Geographic, Digg, Facebook, Friendster and Ning. All that is exceptional, but not enough to pry me away from Grow Collective. The thing that tipped the balance was the culture.

How I work is equally as important to me as what I work on, as anyone familiar with Grow will know. OmniTI started life as a family-run Internet and web operations company. It was founded by Theo, one of the world’s foremost authorities on Internet architectures, scalability and performance. Also there from the start were Theo’s equally talented brother, George, and mother Sherry. Since 1997, a lot of people I admire — like Chris — have found a home at OmniTI. They’ve grown in almost the exact opposite direction to most other companies: from operations, to data management, to web application development, and now to interface design and user experience. It means OmniTI can create and build complex web applications, but also deploy the infrastructure to support the hundreds of millions of people who might use them. They have a special approach to their work with an engineering rigor to what they create and manage. They’re a family-orientated and collaborative culture, with one of the lowest staff turnaround rates in the industry. I think it’s exceptional.

So, when my equally exceptional friend, Chris, asked me if I’d consider joining them, I had to give it serious thought. A year or so later, and here we are. I’m stoked! Chris has also shared his generous thoughts on behalf of the company in the official article.

A few people have asked about Grow. Up ’til now I’ve been unable to talk about it, but now I’m happy to also announce that Jon Gibbins is joining me at OmniTI! He’ll be a core component of the interface design team. Officially, he’ll be an accessibility engineer. A posh-sounding title that basically means he’ll be doing what he does best: accessibility consulting and training, interface development and quality assurance. So, that effectively means that we’ve ported ourselves to OmniTI; the core of our small interface design team at Grow has been acquired!

Our ambition, for a long time, was to expand the co-op to take on larger, more meaty projects, and work with more amazing people. However, being so busy with client work always made managing that problematic. We had some notable successes like Alan, who’s going to continue to practice his outstanding user experience design skills from Ezyas. However, there were a couple of disappointing experiences. It became obvious that some people were not suited to working within a co-op. Especially one with such a rigorous ethical and qualitative bias. The ambitions remained, though. As the deal with OmniTI was being fleshed out, it also became obvious that we could skip the pain of growing organically, and jump straight into an organisation that already had exactly the kind of people we wanted to work with, and the kind of projects we love to work on. Not only that, but the culture had strong similarities to the one we wished to create. So, effective from now, Grow is no more. The domain and the organisation is in stasis from this point. My emotions are mixed. Looking back, I’m proud of what was accomplished over the last six or seven years, and a little sad to see Grow Collective retire. Looking forward, I’m already engaged with fantastic projects, and thrilled to be working with such great people. I have a feeling that we’ll be working with Alan again soon, as well. The best is definitely yet to come, and I’m excited to be part of OmniTI — 2009 is going to be a great year!

PHP Advent Seasoning

Jon 陳 — Tue, 16 Dec 2008 09:39:43 GMT

Ladies and gentlefolk, I give you the two-thousand and eight PHP Advent Calendar!

As an aside in a season that gets rudely interrupted every year with a huge, great party, the PHP Advent Calendar is adding to the fray. Some of the denizens of PHP are sharing their wisdom from a beat-up old soap box in our quiet, geeky corner of the Web.

The entire project was launched in a mad, two-day rush, which featured the guys with real talent setting up the server, propagating the DNS, and gathering the initial content. A couple of days after the first article, for my sins, I applied some style to the interface. Twenty-four hours of key-smacking later — and with a good dose of help from the indomitable Jon Gibbins — it was done.

The project is edited by Chris and Sean with nuts and bolts help from Jon. It is kindly sponsored by OmniTI. I have to tell you, with almost no time to get it done, deadlines looming, colleagues sweating, and the world in general turning far too fast, I’m pretty pleased with the result.

A single typeface is used throughout. It changes depending on availability, but this seemed like a good opportunity to stretch a face or two. (Writing that made me smile.)

Although we would have loved to license and use various typefaces not currently available in operating systems, there just wasn’t the time. Without knowing the full range of glyphs the content might need, the faces currently licensed for @font-face linking (many with slightly abridged character sets) might not have had the range we need. So, I chose Baskerville as the primary face with various fall-backs from there. Hopefully the epidemic of the Baskerville italic ampersand will ebb soon, but there are many worse things in life to see on an almost daily basis.

You might notice the use of the golden ratio, and an attempt to coerce our awkwardly independent browsers into rendering a baseline grid.

As always, the content was king, queen, barkeep and god: I veered away from images as decoration, considering them unnecessary. I hope nothing overshadows the reading experience. With that in mind the interface is fluid, with a minimum width to stop it all collapsing into a narrow abyss. Most significantly though, the content is genuinely interesting. There are some choice pieces over there, and if you’re interested in PHP at all, swing by, grab the feed, or follow ‘phpadvent’ Twitter for fast updates.

Display Type & the Raster Wars

Jon 陳 — Thu, 6 Nov 2008 15:26:05 GMT

ClearType is 10 years old this Autumn. For most of that time it lay hidden until Vista brought it to the fore by default. Font rendering in Internet Explorer using ClearType is good for body copy at smaller sizes; it’s a huge improvement on the Standard rendering that preceded it. However, larger display text is badly rendered. I don’t say it lightly, but every time I load a page for testing in IE7, I wince at the jaggies. What makes this worse is that Standard rendering is better at display size anti-aliasing. I used to compose scales and size headers to take advantage of smoother Standard rendering at larger sizes.

The context in which I view the text has the most influence over my reaction: Apple. I use a Mac. My browser of choice is Safari which uses OS X’s native ATSUI font rasterisation engine. Text is as beautiful as it can be on the Web right now. If text rendering in Firefox is disappointing in comparison because of the added weight, rendering in IE on Windows is positively distressing.

The quality of the rendering is dependent on various factors like the display type (LCD or CRT), the display resolution that has limited pixel density, the rendering engine itself, and the quality of the font file — specifically the hinting of the typeface.

ClearType was launched in 1998 at COMDEX by a celebratory Bill Gates. In a press release, the director responsible for the ClearType project, Dick Brass, was quoted as saying:

ClearType makes inexpensive screens look as good as the finest displays, and it makes the finest displays look almost as good as paper.

If only that were true. OK, it’s a press release, so we assume a degree of hyperbole from exaggerateers, AKA marketeers, writing the copy. But still. Let’s look at the evidence. I built a quick test suite using Georgia, Verdana and Arial because they’re some of the more commonly used Core Web Fonts. Here are screenshots of a heading set in Arial at 36px in different browsers:

IE7 with ClearType on XP Pro:
IE7 with ClearType on Vista:

Sample thanks to Ryan Brill (he was the first of many kind replies via Twitter). Thanks, all!
IE6 with Standard on XP Pro:
Firefox 3 OS X:
Opera 9 OS X:
Safari 3 OS X:

Compare the jaggies and dire anti-aliasing in IE7 using ClearType with the Standard Windows rendering of IE6. Also compare the heavier weight of Firefox using its own platform-independent engine with that of Safari using ATSUI.

Factual insights about the differences from professional font, browser, or raster engine developers would be welcome in the .

One of the reasons for the glaring difference between IE and Safari is a fundamentally different approach to web typography from Apple and Microsoft. Apple tries to render type as true to the original typeface design as possible, Microsoft uses grid-fitting when rasterising a font. There’s more in a previous article for those interested. Studies have shown ClearType to be more legible than Standard rendering, but they only compared the two. Expanding the study to test Macs and Linux-based PCs, as well as ensuring the test group was populated equally by people who use machines other than Windows PCs, would have all helped the results be more interesting.

Type rendering anomalies are a serious issue for web design. Designers and clients with an eye for detail want typefaces to render accurately and smoothly. Shaun Inman is right:

Until anti-aliasing discrepancies between platforms can be resolved I don’t see even a standardized approach being accepted by discerning designers.

ClearType fails to deliver good anti-aliasing. In my view it is a backward step from the old Windows Standard rendering. I am at a complete loss to explain why it is allowed to persist. Especially because Microsoft Typography seems packed full of experts in the field. Surely they’ve noticed?

Typography on the Web should at least equal the sophistication of print typography, if not enrich it. To do so, type needs to be rasterised correctly, and web designers need the ability to set it with much of the same subtlety and detail available in print. Until that time, technologies like Flash, PDF, and hacks like embedding type in images, will continue to thrive. Designers will use them not just because they ‘do type better’, but because they won’t have to deal with painful inconsistencies between user agents; the bane of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars.

Happy Birthday, Son!

Jon 陳 — Wed, 5 Nov 2008 11:08:11 GMT

Dear Xen, you’re five today. Five years old! You left for school this morning and I was reminded, without the prompting of sentiment, but by the eloquence of your words, and the agility of your thoughts, and the serenity of your actions at such a young age, of why I am so proud of you and the young person that you are becoming.

Every time a birthday passes I think back to how much has changed since you were born, and I look forward to how much will change in your lifetime, and hope I will be around long enough to give you the tools you need to navigate the world and grow into yourself. So, it seems apt that on the day that Guy Fawkes tried to spark a revolution in 1605, and on the day that Barack Obama won an election in 2008 to become the first black president of the United States, I share some of his words with you in the hope that when you’re ready to read them they might be useful:

Re-affirm that fundamental truth: Out of many we are one, that while we breathe, we hope, and where we are met with cynicism and doubt and those who tell us that we can’t, we will respond with that timeless creed that sums up the spirit of a people: Yes we can.

Happy birthday, son. I love you.

@font-face in IE: Making Web Fonts Work

Jon 陳 — Fri, 31 Oct 2008 17:35:10 GMT

All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:

@font-face test with Fontin by Jos Buivenga

See the full size Safari 3 screenshot, IE7 with ClearType, and IE6 without ClearType screenshot on Flickr.

Before we get into the nitty-gritty of making this work, which you can if you wish, I thought a little history and a brief summary of the current status of the web fonts debate might be useful.

Web Fonts: Then & Now

Web fonts have been with us for a decade. They were an original part of the CSS2 recommendation in 1998. Recently, the godfather of CSS, Håkon Wium Lie, brought them sharply into focus with articles in CNet and A List Apart. The ironic thing is, IE has supported web fonts using the Embedded Open Type (EOT) format since 1997. The problem was that EOT was a proprietary format, belonging to Microsoft. Not for much longer: it’s been submitted to the W3C and is going through the process towards becoming a web standard.

Since the debate opened up, the web and type communities have both been busy discussing how the future will unfold. More collaboration between the disciplines would be beneficial to both, and I’d encourage any interested designers or developers to get involved with organisations like the Association Typographique International (ATypI).

Recently, Bert Bos of the W3C paid a visit to the ATypI Conference in St Petersburg to meet with type designers face to face. His summary of the current situation is essential reading. The debate has continued apace on the ATypI mailing list, which unfortunately has no public archives. However, if you are member of the ATypI, you can see this summary about the conference panel on web fonts by Nadine Chahine that started the debate in earnest. Simply put, type designers seem anxious about @font-face linking making it too easy to steal a font. Both Microsoft’s EOT format and direct font linking are under consideration with EOT a favourite with many. However, rather than paraphrase a wide-ranging set of opinions, I’d encourage you to join the ATypI yourselves as designers and developers to participate or observe.

If you have other favourite comments or posts about the future of web fonts, please .

As a designer, I want a straightforward way of licensing and including fonts for my work. I will pay, respect the rights of type designers as I expect mine to be respected, then get on with the glorious business of merging content with type. It’s not as simple as it sounds, though. The licensing of fonts, and the protection of the rights of smaller designers in particular, is a sticky issue. DRM does not work, so what then? Richard Rutter has shared thoughtful insights which are very much worth a read. My view is that I would be perfectly prepared to pay a separate or extra licence fee to use quality fonts on the Web. I would have no problem selling this to my clients. Embedding or linking to fonts has to be straightforward though. I get paid to think about, plan and implement design, not grapple with obstructive software (more on that later). If fonts were delivered through a third-party web service as Richard suggests, the one proviso must be that it would have to be done by someone who knows exactly what it means to scale a service for millions of users. Like most designers though, I have very little knowledge of the real security and scalability issues, but hope to see a comment from a real security expert, shortly.

User agents are currently taking divergent routes. Bert Bos’ summary reports:

Mozilla has stated that they don’t want EOT. But they are not opposed to letting the browser check the license, as evidenced by the proposal to let HTTP headers carry license data.

Microsoft has said that it is impossible for them to support linking to native OpenType as long as font vendors oppose it.

Apple’s Safari has implemented font download with no checking of licenses. They said they are against EOT, but would not be against browsers checking licenses, e.g., using Mozilla’s proposal.

Opera remarked that there are more existing and announced implementations for downloading native OpenType than for EOT. They conclude that the market apparently doesn’t need EOT and thus they see no need to support it themselves either. W3C’s limited resources should be spend on more important standards.

That means that designers and developers have the same perennial problem: Two different implementations to achieve the same result. Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon. Only IE 4 to IE 7 support Embedded Open Type (.eot) files. IE8 does not, but will at some point. So, to see Fontin display in standards complaint browsers like Safari 3 and IE, we need to provide two separate fonts.

@font-face Example

The @font-face example uses Fontin Regular by Jos Buivenga — a free face kindly provided by Jos with a licensing permitting embedding with attribution. Jos also has many other fine faces available via his foundry site, Exljbris. The example is a quick one using a traditional scale, with all of the CSS available in the <head> of the file.

Set the basic font-family:
```
h1, h2, h3, p, td{
font-family:'Fontin-Regular', georgia, serif;
}
```
Notice the 'Fontin-Regular' name — this is an arbitrary name that can be whatever you like. All it does is tell the browser when to apply the font file referenced in the @font-face rule.
@font-face and .otf for standards compliant browsers:

Ed: White space inserted for clarity.
```
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
```
Note the 'Fontin-Regular' name, again. This rules basically tells the browser, when the @font-face is set to 'Fontin-Regular', use the font found at this URL.

Screen sample of Fontin Regular in Safari 3 set at 16px with 24px line height from the example:

When Safari renders the page, it will look for the font file, then render the text accordingly. There’s a slight delay as WebKit works. In the example you might notice that the text not requiring the loading of a font file renders quickly, but the rest is blank until the browser catches up. For reference, the Fontin-Regular.otf file is 32KB in size. Some font files can be much larger.
Create the .eot file with WEFT:

To do this you will need to download and install WEFT3, a Microsoft application for creating EOT files from TT fonts. WEFT is not able to create EOT files from an OTF. It must be converted to a TrueType file, first. WEFT is the only tool for this as far as I’m aware, although I believe there is an open source one in development. If it wasn’t for WEFT, embedding EOT files would be easy. What I want WEFT to do is convert the font to EOT, and allow me to create a subset if required. It does that, but in a nightmarish, frighteningly over-complicated way. Perfect for an All Hallows’ Eve entry. Here are a few tips I learnt the hard way:
1. WEFT requires the URL of the page or site where the EOT font will be used. It will then ‘scan’ the pages by crawling the site to see what glyphs are used and try and create a subset of the EOT file accordingly. If it refuses to analyse a valid URL as it did for me, get granular and specify pages or sub-directories in your information architecture.
2. If you’re using WEFT via Parallels and XP Pro, it may refuse to add some fonts in your windows/fonts directory to its database of available fonts. Try using a standalone PC if you can. I haven’t tested in any other virtual machine.
3. Use the wizard to set up your project, but after that try it manually using the View menu item to see what fonts are available to convert, and the Tools menu item to convert them.
4. WEFT will try to save the EOT file to a remote location. You can over-ride this manually to save the file wherever you please for you to upload yourself.
5. Disable your original OTF fonts on your system before testing (obvious but worth a prompt).
Be warned, WEFT is awful to use, in every way. ~~It did not work for me running Parallels with XP Pro on a Mac.~~ 7th Nov: After more experiments, Weft will accept TrueType (.ttf) files in Parallels. It also worked with the gracious help of Jon Gibbins and his standalone PC running XP Pro. Because it is so painful, I cannot give support for WEFT. You can try the Microsoft WEFT user community, but I can’t comment as to its usefulness, and I could not find any other support avenues.

Hopefully, you now have an .eot file to use.
@font-face and .eot for IE using conditional comments:

Ed: White space inserted for clarity.
```

```
These are screen samples from IE:

Screen sample of Fontin Regular in IE6 set at 16px with 24px line height from the example:

Notice the bar missing from the capital ‘A’ towards the end of the second line. The tyepface designer, Jos Buivenga is currently looking into the font hinting, with input from John Boardley.

IE7 sample:

See a full size Safari 3 screenshot, and IE6 screenshot on Flickr.

That’s all! Try the example in different browsers to see how it works for yourself (but please don’t blame me for ClearType’s poor anti-alias at larger font sizes).

Summary

We have only a few web fonts with a EULA that permits embedding right now, unless they are free. Please respect the EULAs of any typefaces you try out until the type community resolves the issue for all commercial fonts.

My feeling after doing this is that EOT has potential advantages in file size over OTF, but OTF files could always be edited (as far as I’m aware) to create subsets just like EOT. Although EOT is not a DRM solution per se, it feels like one. If it achieves widespread acceptance, no doubt some clever soul will be reverse-engineering an OTF file from EOT before too long.

What we need to encourage designers and developers to use EOT today is a good tool to create EOT files in the first place. Perhaps even one hosted remotely, where we can buy a licence, convert the font to EOT, grab the same OTF subset for complaint browsers, and get the work using the typefaces we’ve always dreamed of. WEFT is not the tool right now to enable EOT usage. In fact it discourages it.

Regardless of what security is implemented, the font file will have to be on the audience’s machine somewhere, even temporarily. ‘Defense in depth’ is a term used by web app security experts. It would seem that the question is how much depth will satisfy foundries and type designers, and what form that depth will take.

As a designer, I can only speak for myself to say that if OTF and TTF were supported, regardless of how easy it was to steal the file, I would still pay as required by the EULA. I have a strong feeling the vast majority of my colleagues feel exactly the same.

Flipped Types

Jon 陳 — Wed, 15 Oct 2008 10:45:44 GMT

Sometimes, flipping things around can be a useful mental exercise. It can raise a wry smile. An idle comparison between print and web typography was one of those times.

Imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. With the help of a rendering expert, you specify precisely what device, screen, operating system, colour profile and browser the finished work will be viewed with. You test your work in that environment and make necessary adjustments. It’s distributed to the audience who see it exactly as you expect. That’s print typography.

Now imagine this: A client gives you a detailed brief and the content to go with it. You choose the type and design the layout, applying all of your craft and skill to every last detail of the work. Two files are given to the audience: one with content, the other with detailed design instructions. They pass both files to their printer. The instructions ask for a specific typeface to be used. The printer may or may not have it, but will never tell anyone, so you specify a few alternatives, just in case. The audience chooses the kind of paper to use, and what size it will be. They also tell the printer what personal preferences they want applied to the design, like making the text size smaller or larger. Your work is printed for them. You never see it. You’ve already resigned yourself to the fact that it will look different for different people. By testing your work in a broad range of environments before you sent it to the printer, you’d like to believe it will look good for most people, and adjust itself gracefully. Not to worry though, someone will probably tell you in no uncertain terms if you get it wrong. That’s web typography.

Image courtesy of the New York Public Library digital gallery, entitled Typesetting-Printing Office from Working with the hands : being a sequel to ‘Up from slavery’, covering the author’s experiences in industrial training at Tuskegee (1904) by Booker T. Washington.

Twitter :focus

Jon 陳 — Mon, 6 Oct 2008 15:42:04 GMT

The preceeding image contains words formed from some of the letters in, ‘Twitter’. They’re not anagrams because not all the letters are used in every word, but it was fun. It’s a seamless tile. If you have a use for it, please feel free under the usual licence. Just out of interest, the typeface seems to be a bespoke variant of Chickens by David Buck (SparkyType).

I like Twitter because…

It reminds me is that human beings are still tribal. As an example, if you check your own address book, or think about your family and friends, they probably number no more than two hundred people. We may have more in the book, but it’s rare for our intimates to be greater than two hundred people. Our networks are geographically dispersed these days. Even if your network is mostly in one location, people are so busy living that it can be difficult to stay in touch. Twitter is a facsimile of living and working in proximity for me, and provides something unique, too:

Friends: It may often be prosaic, but I like reading about the daily lives of people I know. The small details of peoples’ lives are often the most poignant. The ambient intimacy is priceless. Working alone in my office, mild doses of cabin fever are inevitable. I miss being around people. I miss being around people I like even more. Twitter brings them to me. If we like people for their good qualities, but love them for their frailties, Twitter helps us do both. Everyday it adds texture to the picture I have of my friends.
Acquaintances: It also introduces people to me I would not have met, and enriches relationships with people I’ve only met briefly. This can’t be understated in developing relationships with people. In many ways, it’s even better than geographic intimacy because I can turn it on and off. Rather than subjecting my followers to every detail of my day which would be painful if we were in the same room, I can moderate what I share. The same is true in reverse. If used judiciously, Twitter is priceless for getting to know people without being intrusive.
Discourse: Information comes my way that I’d otherwise miss. The things that are fascinating or important to people I care about or respect are delivered in short bursts. I can’t count how many interesting snippets have come my way through the fingers of those I’m following or followers’ direct replies. It’s akin to hearing people think out loud. There’s a freedom I think we all feel using Twitter that enables us to throw random thoughts and links out to the world. The fact they don’t impose unless the recipient wants them to might be something to do with it. It’s unobtrusive soap-boxing at its best.
Narrowcasting: If people have taken the time to follow a person or organisation, the chances are they are interested in what they have to say. However, the intent behind the content is important: There’s a fine balance between self-promotion and self-aggrandisement. One is the personal delight we take in sharing what we’ve done, the other is giving it the ‘big Billy Graham’ to encourage obeisance or be commercially manipulative. I appreciate it when people make announcements or share links that are relevant to me, or a delight to them. The same goes for organisations. But, if it feels like they wish to use me as a witness to their greatness, I always shy away.

I’d like it more if it had…

UK inbound SMS, again. The recent loss of SMS notifications was a blow. Like many people, I only used inbound SMS for direct message notifications. In the UK, the sender pays for SMS delivery, not the sender and the recipient like in the USA. Twitter had to bear the brunt of all charges; UK companies were too short-sighted to give a decent deal to a service that was extending SMS usage. Hey, it’s not like SMS is their most profitable service, or anything. Consider the amount of data in a single text message and how much they charge for it. For the same cost you probably get about a minute of call time transferring much more data. See what I mean? SMS equals huge profits.
Friend filters. I’d like to be able to add many more people to my list of friends if I could. The truth is, when I’m head down with work, I struggle to keep up with those I follow right now. Allowing me to asign friends to groups and filter groups would enable me to track colleagues and close friends when I’m swamped but also dip into the lives of acquaintances better when I have a spare moment. Another filter in a similar vein is one all Twitter users miss: followers filters to be able to organise follows alphabetically, or chronologically, if nothing else.
Hashtag filters. Hashtags are supremely useful in tracking topics — automatic linking would be good — but they could also be useful in ignoring them, too. Especially around conference time when the chatter can get overwhelming as people organise social stuff and live-tweet the talks. This is not rudeness, just signal versus noise filtering when I’m tethered to my desk.
Link filters. I admit it, sometimes I’m only interested in the links people share. That would make me the hyperlink version of a gold digger, or you could say I love some people for their brain, more than their breakfast.
Full archiving: I use Twitter like a narrowcast journal. The events and moments are worth remembering. Recently the archive got extended to 820 tweets, or 41 pages, but I’m pretty certain the rest are in the database; we just need a way of getting at them.
(Last but not least:) Better use of :focus. Currently, the improved interface has no styles on :focus, and much more seriously, the reply, favourite and delete icons for each tweet are not available at all via the keyboard.

Today and everyday

I get more from Twitter than any other social web service. Take today for instance: I found out that Chris broke his toe playing football, Tim got clotted-cream fudge from a colleague, Paulo posted about his transsiberian journey, and Paul and John were spammed. ‘Eureka!’ moments they are not, and I’ve only met two of those folks in the flesh, but that’s exactly why the tweets are so valuable. I feel like I already know a little about people I’ve never met because of Twitter. Everyday life happens all the time, not just in the momentous or unique moments you remember to blog about. Perhaps that’s what Twitter is: the everyday social network.

With a lot of help from Jon Gibbins my tweets also appear in the asides.

I use it to watch friends’ lives unfold, and share the events of the day with colleagues. I guess I should say I’m jontangerine on Twitter. Feel free to follow, but I can’t promise to always give you the perfect signal. That’s the beautiful imperfection of Twitter posts though. If nothing else, they’re very honest, and everyone has a different voice. If you haven’t already, you should try it! If you’ve come across it already, how do you find it?

Quotation Marks & Texture

Jon 陳 — Mon, 22 Sep 2008 16:58:34 GMT

In the last entry, I stopped using double quotation marks and started using the single version. Some super-observant folks may have noticed but if you didn’t that’s also a good thing. Permit me to explain:

The final test for running text is legibility, so failing to notice would mean the style was not imposing on the text. The texture was good. When they occur, stylistic interruptions provide me with food for thought. If the punctuation interrupts the meaning, it demands fresh scrutiny. Double quotation marks seemed to interrupt by emphasising too heavily. Emphasis is sometimes required, but to my mind, with my style of writing, it seemed to impose on the text, altering the meaning by changing the silent voice in my head reading the text.

Legibility is subjective, and typographers can debate the nuances of style to achieve the best form until the end of time. However, context, typeface, and content are such varied beasts that trying to style them with one set of rules is unnatural, no matter how attractive it can seem. Whatever rules we follow, being consistent is a rule that’s truly universal. Knowing why we use a particular form is another. If we can’t justify a particular usage, the chances are we’ve probably not considered it enough.

Context is important here. American English is the lingua franca of web design, from the properties of CSS, to the majority of text we read. The best-selling handbook of American writing style, The Elements of Style by Strunk and White, only provides examples with double quotation marks followed by singles for quotations within quotations:

“This is a quotation with ‘another quotation’ inside it in the American style.”

However, I’m British. I live and work in the UK. In the UK, double quotation marks are also used, but there’s also a tradition of single inverted commas being used as the primary, with double inverted commas contained within them as needed:

‘This is a quotation with “another quotation” inside it in the British style.’

To my mind the latter imposes much less and suits me much better. I agree with book designer Jost Hochuli in Detail in Typography:

‘A more attractive appearance is achieved by using single quotation marks for the more frequently occurring quotations, and the double version for the less frequent occurrence of quotations within quotations.’

Robert Bringhurst advises us to:

‘Consider the face as well as the text when deciding which convention to follow in marking quotations.’

I agree with him but on the Web a face can change dramatically depending on the browser and operating system that’s rendering it. To my mind, we have to choose an optimal version — Safari in my case — and accept degradation after that. That’s also the case with other punctuation like spacing. I’ve just used hair spaces around the em dashes in the sentence before last, but you will see regular spaces unless you’re reading this using Safari — the only browser I know of that substitutes a hair space from the system fonts if one is not available from the specified face.

Different languages also have different quotation marks like guillemets («»), and baseline inverted commas used as left quotation marks („); they are in common use in Germany, Russia, and Poland as Piotr Fedorczyk showed me recently. Punctuation within (or without) quotation marks is another topic altogether with a set of rules that depends on context and form. For example, American English puts commas inside. British English puts them outside depending on whether or not the comma (or full stop [period], or exclamation mark) is part of the quoted text.

My view is, whatever style we choose, we should know why, and be prepared change it if necessary. Any rules we apply should aid legibility. Web typography is immature; the constraints and opportunities of the medium may take us down many different paths but the goal of legible, beautiful text is constant.

Good typography in running text is subtle and ambient. It enhances the text without interrupting it. It delivers meaning with clarity. In books, speech is mainly quoted in single marks. It’s a light touch. The typography removes itself from the picture being painted in our minds, and by doing so, allows it to shine. I’d like to achieve the same kind of light touch, here. I doubt my text will shine, but at least the typography will not distract you from my thorny prose.