At Least It's Not My Writing...

Some things you're just happier not knowing. I recently read an article about using typefaces. Most people probably know them as "fonts"...the various styles of the characters on your computer keyboard such as Arial, Lucida Grande, Trebuchet, or Verdana.

The article is entitled "Avoiding Typeface Terrors" by Kathleen Burke Yoshida. It is interesting material. (Well, it is if you create documentation for a living.) And, I found it very helpful. But it also put me in the position of having to make a change to my documentation approach.
Righting a Wrong
You see, it seems as though I've been using the wrong typeface for my policies and procedures and training documentation for years. I like Arial. It's clean. No fuss. Just like I try to write my documentation.

However, according to the article, Arial's lack of "serif" - or the little feet or protrusions from the lines as highlighted on the "T" to the right - makes it harder for the reader to follow the text; the reader finds it difficult to continue through the many lines of words without the little feet to lead the way.

So, where does that leave me? You might say it's easy. Just use the Microsoft default - Times New Roman. The problem is a little print related PTSD. Times New Roman and the lighter, wider Courier bring with them the baggage from my beginning years in banking.

It was in the early Reagan years and I unexpectedly found myself in an office job where I had to type...using a typewriter! Now, I took typing in high school so I could type my own college term papers. I didn't do well in the class - too slow with too many mistakes. But I could get by well enough to pull together a legible (if not smudged) paper on an old 1940s manual typewriter.

My job, however, had me typing legal documents - Notes and Mortgages - and mistakes were not permitted. The worst was the Mortgages. Each Mortgage includes a property description which basically defines the perimeter of the property. A nice rectangular property can be a short five lines. But an odd shaped property, especially in a rural area where landmarks are tree stumps and the intersections of neighbors' lots, can go on for pages. I could spend hours on one Mortgage.
Times New Roman and many of the other "with serif" typefaces remind me too much of the typeface used on the typewriter. I have my own "emotional" response to the little feet. Plus, I think it looks cluttered.
The Search
I want to do right by my readers so I'm in search of a new typeface. Normally, I really enjoy selecting typeface...when I have the opportunity. It's usually for a flyer or other material related to my volunteer activities. I can actually spend more time selecting the typeface than drafting the text. It can be fun. There are so many options. I recently discovered that there's quite a business in creating and selling typefaces. One site I came across (http://www.veer.com/) sells some amazing, interesting typefaces for $40 to $100. Not that I'm interested in spending $40 on a new typeface.
This search, though, leaves me with little opportunity for fun and creativity. There are rules and limitations.

• First, it must be readily available in Microsoft Office.
• Second, it must be legible.
• Third, it must be readable.
• Fourth, any "personality" it has must be professional.

After scrolling through the selections in Microsoft Word, I think I'm going to give Century a try. Here's what I like about Century:

• It's open and round. The letters are not pressed together.
• It's not heavy. There aren't a lot of thick lines.
• Of the typefaces with serifs, Century is one of the cleanest. The feet are more like size 6 rather than size 9.

The down side to the openness is that it might take up more space potentially adding additional pages to each document.

Testing the Typeface

The question is, does it pass the tests outlined above?

• Available in Microsoft Office: I found this in the list of available fonts and I have not added any to my computer. I also know it's available on my computer at work. Pass.
• Legible: To test legibility, Ms. Yoshida suggests that you "place a piece of paper over the top or bottom half of a word or sentence. If you can read the word or sentence easily by just looking at half of the letters, then the typeface is likely to be perceived as legible." Pass.

• 
  
  Readability: The type size is easy to read and it has the obligatory serifs. Ms. Yoshida says to look for a large "x-height" meaning the body of the characters (the portion above the line that does not extend above the top of a lower case "x") is larger than the "ascenders" (the parts above the top of the "x") and the "descenders" (the parts below the line). Pass.

• 
  
  Personality: The personality of Century is not quite as formal as some of the other serif typefaces. But it's not casual. Because this typeface will be used for documentation that must be viewed as credible and must be taken seriously, it's important that it is not too informal. My opinion is that it passes but I think it requires a test drive from some discerning eyes.

Wish me luck!

Made Ya' Look!

Design! Sigh...a personal confession here. I lust after the skills of a graphic artist. Sure, I can draw a picture of a house and it looks like a house. And not just a child-like representation - there's perspective and scale and detail that's representational. But the level of creativity involved in graphic art eludes me. I guess I'm just a literal kind of gal. When I draw a picture, I feel compelled to put the image on paper just as I see the subject. I have difficulty with distortion, vagueness, and illusion. It's sad.

There is, however, hope for me with graphic design. During my educational journey at NJIT, I am looking forward to developing my skills in graphic design. I doubt I'll ever be ready for the MOMA or Madison Avenue, but I hope to conquer the art of creating a visually appealing page...actually, many visually appealing pages. So, it's with considerable interest that I explore the elements and language of design through the use of typography.

Organic Letters

The following video is an interesting example of typography in design. It uses text, which is manufactured or mechanical, to create an image of something organic. Take a minute (okay, a little more than a minute) to view the video.



Elements of Design

There are several interesting aspects to this design. The format is very simple. It starts with a blank white screen with no borders (other than the edge of your screen and the control bar at the bottom). A row of text floats to the top and off of the screen as a guide or introduction of things to come. An asymmetrical design is then built from the bottom. It doesn't just shoot straight up. It moves up and across, drawing your eyes toward the top of the page and to one side or the other. Some of the text floats horizontally up in rows while other text climbs in columns that fall slightly into a lower position in a sinewy form as it collapses.

As the text compresses, drops, and fades, it morphs into the form of a tree. As would be appropriate for a tree, the figure is grounded at the bottom of the screen. Were it in the middle of the screen, or even a few centimeters from the bottom, it would look like it was floating in mid-air - an unnatural state for a tree. The lack of borders on the sides or top reflects the natural world; it creates a sense of openness.

The tree figure is created in a form described as "incomplete closure". The lines insinuate the form of a tree. Not every line is connected. Not every shape is fully formed. The contrast in the image comes mostly from the text against the white background.

The content of the text seems to be secondary to the overall design of the image. It's difficult to read as it moves across the screen and compresses; and, in parts, it's blurred. It appears to be a list of authors or artists. The theme could be growth through art. I was unable to find an interpretation from the artist. It would be interesting to know what he had in mind.

Language of Design

The design "speaks" to us using a vocabulary of visual elements. As I noted earlier, the image is asymmetrical. It's organic or natural, not controlled. Outside of an arboretum, deciduous trees, like the one depicted in the video, are rarely symmetrical. The colors are earth tones - mostly green and brown with some yellow and just a hint of red to create the contrast of complementary colors.

More organic elements are found in the lines. As the columns of text rise, twist, collapse, and fall, they morph into sinewy lines representing branches. Rows of text rise horizontally and stay straight across. As the image builds, the straight lines of text create the leaves. The random lengths of each line and the position of the text as it stacks one line on another define the crown of the tree. The text creates an edge, separating the tree from the sky, without drawing lines. It might be counterintuitive to have straight lines (something that appears mechanical) in an organic design. But the rhythm of the text creates an organic feel. Had the video continued, the negative space could have helped define volume for the crown of the tree.

Next Steps

Good design draws you in for a closer look. When you're creating any form of visual communication, it's imperative to capture your reader's attention. On a website or blog, good design is critical. There's so much out there whetting the reader's visual appetite. The competition is strong. I need to step things up a bit on this blog. I would like to take the things I'm learning (and relearning) about design and apply them here.

Ah, but first I have to figure out how to use the tools. This is when I yearn for a big paper user's manual. I know...blasphemy!

“Trix Are for Kids…”

I remember the hyperactive cartoon rabbit bouncing around the television screen of my youth like it was yesterday. The happy, colorful commercials appealed to the younger set and convinced them to beg for sugary breakfast cereal.

I also remember Yule Gibbons. (He reminded me of my mother's eccentric uncle who "lived off the land" eating weeds and any small crop that would grow amongst the weeds.) Mr. Gibbons was hawking Grape Nuts. His commercials were more sedate, sometimes clever, appealing to the adults in the audience. Website designers may also take the different approaches when designing content to appeal to different age groups. We can take a look at two examples: The Cancer Project and PBS Kids.

The Cancer Project

The Cancer Project is an informational site sponsored by the Physicians Committee for Responsible Medicine (PCRM). It’s part of an educational project to promote dietary changes to prevent cancer.

The site is clean and well organized. The colors are reserved with just a pop of primary colors here and there on the home page. Graphics are limited. The design choices are appropriate considering the serious nature of the topic. Some visitors to this site may be dealing with the illness personally or through someone close to them. The content appears to be generally geared toward the lay person interested in cancer and prevention. Medical terms are simple but assume some knowledge of health issues. PCRM has another website targeted more at the medical community so there is little need to address them on this site.

Pictures and simple menus help the user navigate through the site easily. This is good for the visual and sequential learners among us. While primarily in English, there is one link that directs the user in Spanish to Spanish language material.

The Diet and Cancer page of the site provides categories of information related to research. The development of this page most likely included a compilation (through surveys or focus groups) of common questions regarding cancer and diet. Those questions where then grouped into categories that represent a common theme in the questions. For instance, basic information about cancer and its relationship to diet are grouped under Cancer Facts.


Selecting a topic from the category brings up a short article explaining the research and findings.



There is very little for the action oriented person to do on this site. There are drop down menus for a little bit of movement. And, for off-line adventures, there are recipes.
Overall, this is a very verbal website – mostly text – which could cost them some readers who are more visually inclined and like graphics. No accommodations are made here for the visually impaired; the addition of audio options would be useful.

PBS Kids

PBS Kids is a blast of color when you first enter. Content on the home page is heavy on graphics with minimal text. From the design, I assume that they are accommodating the youngest visitors who may not know how to read yet. They may not be able to make out the words on the screen but they can certainly recognize their favorite PBS characters.


And you can’t hear this here but, when you move the cursor over the child-oriented links on the page, an enthusiastic child announces the option. This is yet another way to allow non-readers to navigate the sight. Clicking on the arrows spins the wheel in the center like a wheel of chance on the Boardwalk! It’s a very fun, active site which appeals to young children. Interestingly, the links for parents and teachers do not come with the same, excited audio announcements.

I happen to like Mr. Rogers so I selected his show from the wheel. His page is also bright and simple. There’s no audio on this page (or, as it turns out, on the Sesame Street page). So, those non-readers may need a little help if they don’t understand what the icons at the top stand for.



But, when you enter Mr. Rogers’ house, the fun starts again with moving doors and simple sounds as you move the cursor around. The primary elements on the screen, like the bag on the table or the trolley, link to new pages with activities kids can do off-line or even more moving elements triggered by your cursor and clicks.




Children learn quickly by doing. And there’s lots to do on the PBS Kids site. Surprisingly, I did not notice any links to material in languages other than English. This limits the audience to English speakers. And, there is little here for the visually impaired child.

To reach the widest range of viewers, a website should have a variety of elements to appeal to people with different learning styles and abilities. It’s a difficult thing to balance. And, with both sites being funded by non-profit organizations, there are budgetary limitations. Both sites, however, do a great job of making the material accessible to the targeted age groups.