Bram Pitoyo, Etc., Interlude, Read Better

Upcoming Speaking Engagements

Make Your Blog Read Better, at Blog World Expo 2009 -- Transmedia and Social Change, at Henry Jenkins' JOUR499

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.

Bram Pitoyo, Etc., typography

@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.)

Bram Pitoyo, COLABORATORY Round Up, Etc., Portland Creative/Tech Event Review

COLABORATORY 2009 Reporting Starts On July 10th

PAF Colaboratory Logo

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?

Bram Pitoyo, Etc.

More Evidence Of Text Rendering Issue In

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 medium font smoothing, light text on dark backgrounds appears 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.

Under Standard font smoothing, light text on dark background looks optically correct

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

OS X Font Smoothing style preference panel

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

Under Medium font smoothing, highlighted text on mailbox menu should look chunkier than normal text

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

When text rendering bug kicks in, highlighted text no longer look chunky

It seems that, for a brief moment, 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?

Bram Pitoyo, Etc.

OS X 10.5.7 Text Rendering Issue On

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

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

OS X 10.5.7 Text Rendering at 100%

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?

OS X 10.5.7 Text Rendering at 500% zoom level

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.

The bottom set of word is rendered too loosely

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 user, try reproducing this problem by writing several lines of new mail on 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.

Bram Pitoyo, Etc., Links

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.

Safari 4 Reverts Back To Bottom Tabs

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.

Safari 4 Tab Bar Is, Not Surprisingly, Similar To Firefox 3.6's

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

More Change Comes In The Form Of A New RSS Button

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.

Safari 4 Loading Indicator Actually Says Loading

When The Page Almost Completes, The Loading Indicator Turns White

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

Safari 4 Default Set For Its Toolbar Now Contains Less Tools

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.

Safari 4's Customize Toolbar Menu Brings One Click Access To Web Inspector

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 Has A Progress Bar While You Download A PDF File

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