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.

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

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?

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?

(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.

Also, do you know that their first lecture, 0×01, was the fifth tech event I attended in Portland? But this is besides the point. Let’s move on to the review.

The evening brought three presenters:

• Data and the physical world, presented by Andrew S. Parnell, a digital artist whose work deals with physical manifestation of digital codes.
• Altering a space via physical and web-based interfaces, presented by Michael Bunsen, Caley Feeney and Taryn Tomasello (not present), an art collective whose mission is to use the computer to get people off the computer.
• Sculptures and installations from 2005–09 by Dan Gilsdorf, a Portland-based sculptor and installation artist who uses video, sound and mechanics extensively.

Data and the physical world

Andrew S. Parnell – blog

Data, in general, is meaningless. Graphs are a valiant attempt to give data meaning, but often, they don’t really work well. What really becomes essential is bringing data back into the real world.

Currently, I focus on human-generated output. This includes email, position/movement and social media.

• Semaphorebot, for example, translates junk email into flag code.
• Tangólumen, translates the position of people in a space into varying concentration of light.
• Tweetolumen watches Twitter for the world “light,” then based its luminosity on that.
• Cardiolumen takes a characteristic of the viewer’s heart beat.

While these objects exist and interact with the physical world, you not notice they they actually leave no physical artifacts. Today, we live in a digital world, so data becomes energy. I simply translate this energy into different forms, like light.

SPACES DAY: A newly recognized inter-dimensional holiday

Michael Bunsen and Caley Feeney (Taryn Tomasello is the other artist that was not present)

Michael

A couple of months ago, me, Kayley and a friend got art installation, music, and did electronics and software along with it.

Caley

initially, I knew that I have an interestst in the concept of spaces: all kinds of spaces, and want to explore it playfully and make it interactive. We had at first great ideas about revolving projection and live, interactive video streams. Due to time constraints, we ended up doing different things. So what we ended up doing was (we thought we wanted to have this event in a space that’s something like a dome, because it gets to get you thinking about your physical environment. We included two projections: one remote and locally controlled. In addition to this, we covered the dome in a soft of transparent plastic, because what we were wrking is sixteen feet in diameter and eight feet high.

Michael

I’m not a computer science guy, but we were able to throw something together with development tools like Arduino, and web development tools like Rails and Arduino. So in a few nights, we were able to throw together something that works. It wasn’t ideal code or anything.

Caley

At the same time, it’s not really about achieving a specific goal, but rather, to experiment with the process of creating it. In addition to having this physical event where you can dialog with this physical space with both the web and local control.

Michael

The first route was building a knob box with Arduino as a method to control the exhibition locally. You can use this knob box (with three knobs on it) to manipulate the RGB value of light projected. Really simple. PureData then takes this output and translate it properly. This kit is so light, we had to tape a rock in it so that it has some substance [laughs]

We mentioned earlier that there are two projectors. This is because the other way that you can control it is through the web interface. We use much of the same process to digitize it, except that every color would be assigned to a username and an ID. I used python script on the local machine. This is being fed from a Web API that I made myself with a database (pylons, sql alchemy and sqlite.) Finally, on the front end, the system manifest in a publicly accessible web interface, built in JavaScript & XHTML, where you could selectcolor to be projected in the dome, then your color would get queued.

What’s the reward for the web user, then? Well, we also installed a webcam inside this structure, so users can actually see what their manipulation entails. I think that it’s cool to give users the ability to control another space.

Caley

When we finally get started from concept to construction, it took a few week—most of it was actually spent constructing and covering the domes. The actual controlling application took about a week.

Sculptures and installations from 2005–09

Dan Gilsdorf

I’m going to go through a selection of artworks on the last five years or so.

Let’s start out with a project called “The Consensus,” done at Umpqua Community College in Roseburg between 2006–07. The form that it takes is a roomful filled with hats that nodding (or shakes left and right) in succession. Most of the previous projects I did was physical. A lot of it was mechanical (it moved.) But I’m pretty new in the electronic side of the project.

This is a piece called “Small Price,” done between 2004–05. It’s a robotic hand scratching the blackboard in half-circle motion.

There’s another piece called “The Behemoth”, which simulates the oil well drilling activity. I have several ways: one is to make a fairly small materials, using shadow and projection, create the perception of making an object more landscape or epic.

The other way is to make linear, repetitive motion that changes the object itself. This piece is called Centurium, 2005.

Another piece in the same exhibition projects the appearance of endless electric poles.

Another piece is called “Rails,” which depicts a model train moving around and around a small circle that was projecting on the wall with a security camera, creating a much larger projection of endless train moving. Coincidentally, with this piece, the one thing that has happened whenever I put it up is that it is always gets destroyed by the viewers. The problem with security camera is that you can see yourself in the projection, so pepole started destroying it.

The next piece is a lightbulb rotating in its axis where half of its side has been painted black. The interesting space formed by gallery walls, which was built very far away from this exhibit, was explored by the light refraction.

The next one is “Look, See.” It’s very simple in construction: two television faced against each other with two cameras on top of them, taking the output from the television facing it as input, thus creating a feedback-powered loop.

The next piece is called “Witness Witness”, it is a monitor that rotates clockwise, with a camera that attaches to the back of it, filming the wall, that rotates counter-clockwise.

The last project is a seven-storey stack of 16 televisions that project different parts of a tree slowly burning, from the bottom to the top.

Where can I see more?

Besides going to dorkbotpdx.org, The Dorkbot Lecture Series happens roughly every six months, but if you’re just curious, stop by their every-other-Monday meeting at Backspace (conveniently located Downtown at NW 5th and Couch St.) Their next meeting is Monday, June 22, 2009 at 7 pm.

For schedule information, subscribe to the DorkbotPDX-announce mailing list.

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.

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

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.

And whenever you can, design both.