Upcoming Speaking Engagements

This Friday, I will be speaking at Blog World Expo 2009 on How To Make Your Blog Read Better. You’ve probably seen an earlier version of this presentation at Portland’s Beer And Blog, presented a year and-four-days ago—the weekend after my bike was stolen. This one will view practical steps to better legibility and readability of website text in light of what developments have occurred this past year.

Next Wednesday, I will be lecturing at Henry Jenkins’ Transmedia Storytelling and Entertainment class at USC on the topic of Transmedia and Social Change. I’ll talk about principles we can learn from disparate fields of study—specifically: video game, user interface design and architecture—to craft, design and built spaces that encourage players, users and inhabitants to do the right and ethical thing.

I will let you know if any of these two events will be made available via a live streaming channel or video recording.

Good night.

@font-face Brings An Interesting Consequence To The Way You Read On The Web: An Editorial

“It Reads Like Butter” For The Web

Call me a purist, but in my line of work as a typographer (and rarely, type designer), I usually cling tightly to the most conservative of rules: readers will read best under the condition that they’re most used to. Here, I’m concerned about legibility and readability that impact the speed of reading. I often said that the more “it reads like butter” and the more the text can deliver the information within lucidly, the better I’ve done my job.

The nascent of @font-face—epitomized by the release of Firefox 3.5 that most of the web use and will upgrade to—means that designers and developers will take advantage of the many new CSS rules available to them, including @font-face. They will shortly embed more typefaces—those outside the Core Web Fonts collection—for reading.

However, all Core Web Fonts have been hinted for on screen reading, while many type families out there have, but not very completely. Hinting is a type design process that some have the skills to handle, and even fewer have to handle well. Most chose a scripted algorithm inside their font design program to hint: essentially autohinting.

There Is Hope

There are several good examples, by the way, of superbly hinted faces: Luc(as) de Groot’s Thesis Office, FontFont’s Axel and Mark Simonson’s Anonymous—but these are exceptions rather than a rule. There is also Microsoft ClearType Font Collection that comes bundled with Windows Vista, the upcoming Windows 7, Microsoft Office 2007 and Office:mac 2008.

If you’re setting type as headlines. Hinting instructions only apply at small sizes (usually between 8–12 px). In bigger ones, the characters render well enough because the pixel isn’t as constraining, so hinting isn’t needed. This means that type will always set well on bigger sizes.

It’s Inevitable

But the fact is, web readers have always used to reading onscreen texts set in Verdana, Georgia, Arial, Helvetica and Lucida Grande (the last two are if you’re on a Mac); so the question still remains:
When we’re faced with new font families, will we still read as well as we have been with Core Web Fonts?

Caveat: on the web, readers do tend to be more savvy at reading various type variations (sizes, weights, families.)

COLABORATORY 2009 Reporting Starts On July 10th

Take 10 of the most driven advertising students in the country. Give them three different roles. Put them in an agency for two week for an extensive internship. Then repeat this process two more times.

I’m very excited to have another opportunity to cover PAF’s month-and-a-half experimental summer internship program, COLABORATORY. And like last year, I will be meeting some of the most amazing, hard working talents in the industry (propensity for drawing funny diagrams optional.)

Daily round ups will be served, reports will be written, interviews recorded and meetings live tweeted. Snarky commentary will be added whenever appropriate.

Are you ready?

More Evidence Of Text Rendering Issue In Mail.app

If you’re a stickler for pixel-level details, you may notice that, under Light, Medium and Strong font smoothing setting in OS X, light-colored text set on dark-colored backgrounds will look thicker than dark text on light background.

On the contrary, if you set your font smoothing to “Standard – best for CRT”, you’ll notice that both text settings look optically even.

(You can try out these settings by going to System Preferences → Appearances → Font smoothing style.)

So under Medium font smoothing, highlighted text on Mail.app mailbox menu should look thicker than normal text, like this:

But when Mail.app text rendering bug kicks in, the thickening no longer occurs. Note how both texts now look optically even.

It seems that, for a brief moment, Mail.app decides to switch to “Standard – Best for CRT” text rendering and make the text look optically correct, but behaviorally inconsistent with the rest of the operating system.

I may be wrong in this issue, but have anyone else had this problem?

OS X 10.5.7 Text Rendering Issue On Mail.app

A strange thing happened to me every time I composed a piece of text on my OS X 10.5.7-powered Mail.app.

(My text setting is Lucida Grande at 12pt. size)

On random occasions, the rendered text would look the exact same way, yet somehow kerned loosely. It’s as if the line of text loses its spacing information entirely. See it?

Note how the text “I just saw” on the second line and the one on the fourth is spaced differently. Let’s juxtapose the two directly below each other to make it clearer.

I noted that the kerning between the letters j–u, s–t and s–a shifted to the right by 1 pixel, yet these minor changes are enough to make the spacing between the word “just” and “saw” appear larger, thus distracting the eye from the normal pace of reading.

If you’re an OS X 10.5.7 and Mail.app user, try reproducing this problem by writing several lines of new mail on Mail.app. See how, from time to time, the spacing of the letters would shift.

Have anyone else had this problem?

PS. Despite the pixel shift, the anti-aliasing method used to draw these letters remains unchanged. Note how the ‘fringes’ around the alphabets are actually of the same color—except for the leftmost stroke of the letter ‘u’ which lightened considerably.

What’s New In Safari 4’s UI

The tab bar on the top (that, by the way, had inconsistent window color with the rest of OS X Leopard’s UI and doesn’t look good in Tiger, either) is replaced by one on the bottom.

Note the inclusion of the plus button on the right hand side of the bar to add a new tab.

Also note how similar it looks when compared to Firefox’s.

The RSS icon is updated to a bluish-grey color and matte look not dissimilar to OS X’s Graphite theme.

The loading indicator has taken a new look (it actually says “loading”). When the page first loads, it takes a dark blue appearance. This color fades to white when the page almost completes.

The default toolbar now changes to a minimalist set of tools: navigational (back and forward), spatial (address bar, add bookmark) and inquirial (search.)

The Customize Toolbar menu itself (accessible through the View option) carries several new tools: show/hide Bookmarks bar, show/hide Downloads, and, most notably, one-click Web Inspector access.

Did I Overlook Anything?

I probably did, because there are many other subtle changes in Safari 4 (smooth transitions on the loading indicator is one easily overlooked) so let me know if you found them!

Update: Here’s Something Else New

Safari 4 now features a transparent progress bar that overlays while you’re waiting to view a PDF file.

Learn How The Sans Serif Letterforms Came To Be In 3 Minutes

Presented by yours truly at Interesting Portland.

If this bores you to tears, see videos from all presenter that night.

If You Spent Most Of Your Workday Staring At The Terminal Window

—then it’s probably worth to make the letters you see in that window more legible, and the text more readable.

I’ll be doing a bring-your-own-laptop workshop at Open Source Bridge about this subject.

(And the best thing is, if this session sounds boring, there are seventy-some more interesting ones.)

Open Source Bridge is the first ever volunteer run, open source technology conference—based in the lovely Portland, Oregon. I am proud to have been a supporter (and helper at times) to this exciting initiative. You can be a supporter as well, by registering and/or booking a room, and donating (you can’t lose with a $2 minimum, in my opinion)

Buck back to the font business. What do you mean by making letters and text read better? you ask. You can read more about it here, but I’d rather give you more explanation here.

Legibility and readability is two different, but interrelated subjects. One concerns itself with how easy it is to distinguish individual letter. What makes an ‘a’ an ‘a,’ for instance? We claim that our eyes will instinctively know it when we see it, and know it when something looks wrong, but, really, what’s in an ‘a’ that makes it look like a proper ‘a’?

This will be addressed with many pretty pictures of alphabets and history.

Readability concerns the character set as a whole. For instance, a font that may possess legible characters—where every alphabet looks proper and distinguishable—may not be as readable because the reader can’t read it well, or fast enough. What’s the problem, then? Reductivist beware: it turns out that our eyes don’t read individual letters, but scan over the 1) letter’s top half, and 2) space between and inside the letters. This means that things like line length, work spacing, letterspacing (tracking), leading (line-height) and color all plays a role in deciding how effective you can read a piece of code.

This will be addressed with slightly less pretty pictures.

Finally, now that you know the principles behind what makes something read better, I will introduce you to tools to experiment and make your own. But making a whole font from scratch is tricky, you said, and I don’t really mind the current type that I’m using, except for a few characters. Not to worry, there is a trick to easily do this.

Oh, did you say that you want to make an entire pixel-based programming monospace font from scratch? That’s possible, too. This type of font is a good place to start designing from.

And we’re going to use open source software and free tools to do this. Bring your laptop. I’ll see you there.

A Brief PDF Typesetting Tip

When you release a PDF document, make sure you know what its intended purpose is. Was it designed for on-screen reading or printing? Most readers expect the ability to do both, but most designers only optimize for the latter.

And whenever you can, design both.

Side Project Spotlight: Weeeble

UPDATE: this afternoon, Brennan sent me a refreshed Weeeble page that contains ideas closer to the vision presented in this article. A screenshot of this can be found on the bottom of this page. Check your Weeeble status at http://weeeble.com/YourTwitterName.

Brennan Novak’s avatar of him dressed in fake moustache may be the first good indicator as to exactly when and where I first met him: at a Makerlab Sunday Hack Session at the IGLOO gallery; so when he tweeted me several weeks ago and said to test a side project of his out, I was sure that it’s going to be something delightfully unexpected.

This was exactly what Weeeble, now in development, had demonstrated. The app was born out of a series of observations: Twitter user uses speech pattern to speak to one another (for example: feel good, drinking green tea, eating portobello sandwich, listening to The Police.) Weeeble sought to look for these keywords, parse them, store them, then display them as part of your profile.

But isn’t this an old idea, you ask? You’re right. Role Playing Games have been using such concepts from its inception in the form of status screen.

If you’re not familiar with this concept, a status screen shows you the current standing of the character you’re currently playing with: her strength, defense, equipped weapon, and so on. Sounds a little bit like a social network’s profile page, doesn’t it?

Except that informations on a profile page are classically thought of, and are usually designed to be static. This isn’t wrong. After all, static information helps determine credibility.

But another metric of the same that we often forget is the dynamics of information. We all know, for instance, that blogs that are updated very often (ie. not Link En Fuego) tends to be more reputable than those that are not.

Of course, there’s also a problem with consuming dynamic information: they don’t have a universal standard. Well, duh, you said, isn’t that exactly the point of having a dynamic information? You’re right. But this means that consuming dynamic information is going to require significantly more effort on your end.

For example: on a profile page, you would have constantly recurring fields like username, full name, bio, email address and telephone number. On a blog, you’re free to have whatever tags and categories you want. All the feed going to give your RSS reader is the post title, content, categories and publication date.

Now, wouldn’t it would be nifty if we could combine the recurring fields of one, and the dynamic contents of the other?

You know, just like a game’s status screen, where the value of items change all the time (ie. strength +2, dexterity +4.) but the properties of the value itself doesn’t?

This is where Weeeble comes in:

Weeeble [...] parses your Twitter feed and looks for the usage of certain keywords [...] then saves all your Tweets into nice categories…

Weeeble currently indexes things like feeling, music, food, drink, location and Twitter users you’re currently with:

But I Don’t See All The Features You’re Talking About Yet!

Weeeble is still in a very early stage of development, and this article looks more like a dissection and feature wishlist for it rather than a proper review (Weeble-Shizzow integration, anyone?) I hope that its developer could benefit from early exposure, use and suggestion that I and others will provide.

Here’s how it looks like at the moment.

Want Your Side Project Covered?

I believe that Portland’s abundance of little side projects that developers do because they love it, is part of what makes our creative/tech scene unique. To this end, I’m always on the lookout for your ideas. Bother me at brampitoyo@gmail.com, and let’s set something up.