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.

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

Standard
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?

Standard
Bram Pitoyo, Etc.

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 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 Mail.app mailbox menu should look thicker than normal text, like this:

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

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

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

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?

Standard
Bram Pitoyo, Etc.

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)

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

Standard
Bram Pitoyo, Portland Creative/Tech Event Review

Dorkbot Lecture Series 0×03: An Event Review

Every six months or so, the Dorkbot group (self described as “people doing strange things with electricity”) that usually meets every other Monday at Backspace gathered around for a lecture series.

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

    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.

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

Standard