Tuesday, September 29, 2009

Examining Garamond

There are now about as many different varieties of letters as there are different kinds of fools.


- Eric Gill


I once worked on a manual for a new product called Journalist. The Vice President of the company (it was a small start-up) told me he wanted me to use the typefaces Garamond and Gill Sans in the document. Okay, I thought, whatever you want. I had never worked with these fonts before, so who was I to argue?




Turns out, Garamond is a very nice, legible serif font. Why do I say it’s legible? Well, let’s look at a test of legibility as described by Kathleen Burke Yoshida in her article “Avoiding Typeface Terrors.” As Burke Yoshida puts it, if you can cover the top half or the bottom half of the letters and still read the word, then the font is legible. So let’s take a look at Garamond from that perspective.





I’d say that, with either the bottom or the top half of the letters covered, you can still pretty accurately read the word. In that sense, then, Garamond is a legible font. But what else can we say about Garamond?




Well, because it’s a serif font, it tends to be more readable in a printed body of text. Why? The serifs help guide your eye along the text. Also, the x-height in Garamond (the height of the letter body, not including ascenders or descenders) is large; the ascender of the letter d is shorter than the body height or x-height. That helps enhance the readability of the typeface as well. And because the strokes of the letters are relatively light, Garamond gives the impression of lighter (as opposed to darker, thicker) text on a page.


So why did the Vice President of the company tell me to use Garamond for the body text of his product’s documentation? Obviously, there was something about the personality of the Garamond typeface that matched the image he wanted to convey. (Yes, typefaces do have personalities.) He selected a serif typeface to increase readability, but why not Times New Roman or one of the other, more common serif typefaces? If you look at Garamond, it has a formal feel. The serifs add a sense of formality, but so does the variable stroke weight (how the letter’s thickness varies). Because the stroke weight is light overall (meaning that there is more white space within each letter), the printed page has a brighter appearance. You could say that Garamond is formal without being pretentious, it’s reserved but airy.

Tuesday, September 22, 2009

Blogging for the Ages

Women are the real architects of society.


- Harriet Beecher Stowe


This posting gets back to my interest of women in technology, and especially encouraging young women to pursue technical careers. To that purpose, let's examine two websites that specifically address females in technology: Engineer Girl and Women in Technology. In examining these two websites, I'm going to focus on a few of the important elements that the website designers used to make the websites appeal to their specific target audiences.


First, let's look at the role of the website user. Who visits these websites? Is it the person who is going to use the information, or some other decision maker, or maybe someone who is going to advise another person based on the information they get from the website?


Well, in the case of Engineer Girl, it's pretty apparent from the design of the website that it's really intended for young girls who might be interested in technological careers. It makes use of bold, bright colors, decorative flourishes and playful fonts. There's not even a link provided on the main page for parents or educators - the site is completely geared to young girls interested in engineering.




On the other hand, the Women in Technology website is very professional, with an understated blue/green color scheme and a clean professional font. Their website is designed to appeal not only to the women who belong to the organization, but also to women who might be considering joining.




So what are the goals of each of these sites? What do they want to accomplish?



The Engineer Girl website has a very basic yet critical mission. It wants to encourage girls to pursue engineering careers by educating them about the exciting opportunities available in various fields. The site provides a suggested reading list, a list of what courses the girls should take in high school to better prepare them, and even questions and answers with women engineers to get the girls excited about opportunities. Just look at some of these links (and of course note the smiling girl in the background).



What about the goal of Women In Technology? Their primary goal is to help women in technology connect to other women through events and networking so that they can encourage each other in their professional growth. They focus not on general tasks to help women in technological fields, but instead on what their organization offers. This is evident from the links on their homepage: Event Calendar, Special Interest Groups, Committees, Special Programs, and so on.


What about knowledge? What does each website assume about the knowledge of its visitors?


Engineer Girl assumes that the girl who comes to its site is curious about pursuing a technical career. The website provides a lot of information - starting salaries for engineers, links to other sites appropriate for girls interested in engineering, suggested reading materials, and a lot more. The website tells girls about upcoming contests, camps, and other opportunities for them to get involved. In general, the website assumes that the girls visiting it are looking for information.


On the other hand, the Women in Technology website assumes that its visitors are already involved in a technical field, so it doesn't provide that type of information. Instead, it lets its members know about upcoming events, awards, and special projects that require volunteers. The website also describes the parent organization in case anyone is interested in joining.


But what I like best about these two websites is that their designers share a similar culture - one of inspiring women (and girls) to advance in technology. In that respect, Engineer Girl and Women in Technology both get an A+ in my book.

Wednesday, September 16, 2009

Typography as Design?

Faces of type are like men’s faces. They have their own expression; their complexion and peculiar twists and turns of line identify them immediately to friends, to whom each is full of identity.


— J.L. Frazier


Okay, so I know I'm a WOMAN in technology and the above quote is very male-centric. It's not my quote, but it does present an interesting view of typography. Have you ever really looked at the fonts used in the printed materials you look at?


As a technical writer, I typically look at typography only in terms of selecting fonts for my documentation. Obviously, in choosing fonts for printed material, I look for something easy to read and pleasing to the eye with a nice balance of white space and text.


But from a designer's point of view, typography can be so much more. Take, for example, this short YouTube video entitled Typography Animation - Il Segno Animato by Simonetti. He takes typography and really does make it look like "men's faces," as J. L. Frazier so accurately phrased it. How does he do it? We'll discuss some of the design elements Simonetti uses after you view the video.




One of the first things that struck me after I watched this video was Simonetti's frequent use of rhythm and space to make you notice not so much the type but the empty space created by the type. Rhythm as a design element is defined as the alternating occurrence of form and space that causes your eye to move and focus on different parts of the visual, and space is defined as any area that is activated by visual elements, whether as a form or empty space.


Let's think about Simonetti's use of the letter A in the video. When it first appears, your eye immediately sees a large, bold A that fills the screen. However, as the hand starts pouring wine from the bottle into the empty space, suddenly your eyes focus on that space instead of the letter. Through the effective use of rhythm and space, Simonetti causes you to stop seeing the letter A and instead see a wine glass full of red wine.


Simonetti also makes effective use of variety by using vivid contrasts - bright colors, movement, and elements all composed of letters but representing images instead of words. Similarly, he frequently uses texture in his backgrounds to make the type elements really stand out. Although the music adds to the viewing experience, even with the sound muted this video is a fascinating exploration of using type as a design element without having it actually act as text.

Wednesday, September 9, 2009

Blogging at Female-Friendly Companies

As someone who is interested in encouraging women to succeed in technical fields, I believe that an important part of that task is the support of the workplace. This is an important issue for any employee, but it is crucial for working mothers. The magazine Working Mother performs a survey each year and ranks companies according to their support of working parents. Let’s look at the corporate blogs of two of those companies, Johnson & Johnson and GlaxoSmithKline. Both of these companies are in Pharmaceuticals, which is a major business in New Jersey.


Johnson & Johnson has a corporate blog called JNJ BTW. As they so adeptly put it in their About JNJ BTW page, “Everyone else is talking about our company, so why can’t we?” The page’s author, Marc Monseau, explains that through the blog, he hopes to “find a voice that often gets lost in formal communications.” While he mentions the fact that there will be issues that can’t be discussed in the blog, he says that they will do what they can to “talk openly, directly and to the best of our knowledge.” Obviously, the Johnson & Johnson blog writers are writing not just for fellow employees but for us, the consumer masses.


Most of the entries on the Johnson & Johnson blog are not too intimidating – they are a single screen or less in length. Some are more formal in their writing styles, and some are more casual and conversational. Each entry allows blog readers to post comments with a simple click, although many of the recent postings don't have any comments. While some postings are text-based, many entries use YouTube videos and images to supplement the postings.


In general, the Johnson & Johnson blog presents a very professional, corporate image to us as its readers. The colors used in the blog are muted natural colors (greens and browns with use of red for text), and the visual on the blog page is an open medicine cabinet filled with Johnson & Johnson products and other health related items.


Despite the fact that some of the entries are written in a very informal style, the entire site exudes an atmosphere of professionalism, knowledge and experience. Which is just what you want to see from a company that provides products ranging from Clean & Clear to Concerta.


GlaxoSmithKline’s corporate blog is called More Than Medicine. According to their About This Blog page, their intended audience is any US resident, and their goal is to discuss “a range of topics related to the US healthcare system and how it can be improved.” That’s a pretty broad topic – much broader than Johnson & Johnson’s goal of talking about their company and its products. And the website is true to its word – categories include Chronic Diseases and Healthcare Reform.


Most entries in the GlaxoSmithKline blog are less than one screen in length, and the tone varies from conversational to somewhat formal, depending on the poster and the topic. Although comments are welcomed, many posts don’t have any comments, although there is a section on the page that highlights Recent Comments so that you can quickly scan them and read the ones of interest to you.


The visual design of GlaxoSmithKline’s blog portrays a more fun and informal feel than that of Johnson & Johnson’s blog because of their use of bright colors and bold headings.




However, the posts on the GlaxoSmithKline blog tend to be more visually conservative, using only some images and very few videos. It feels like Johnson & Johnson should take blog design lessons from GlaxoSmithKline, who should turn around and take blogging lessons from the Johnson & Johnson team.

Tuesday, September 1, 2009

My Blog's Mission Statement


"If you can't explain it simply, you don't understand it well enough."

Albert Einstein must have been thinking of technical communicators when he made that statement. In technical communication, it's not quantity but quality that matters. I have been in the field of technical communication for over 20 years, and Einstein was absolutely right: if I don't understand something, there's no way I can explain it to someone else. So being a technical communicator means you have to be a Renaissance person - you need to have the interest to learn new things and then figure out how to present that information to others in the most user-friendly, effective way possible.

Through this blog, I hope to explore the issues facing technical communicators as knowledge becomes more and more specialized. Do you have to have a computer science degree to be a software documentation specialist? It sure helps to have at least a basic understanding of how applications work. What is a variable? What about a parameter? How does a database work? Furthermore, what is the best way to describe a database? Should I use images or tables? If I am creating online documentation, should I use animations or static images?

In addition to examining these issues, I also feel compelled to examine how we can use documentation to make technology less intimidating and more appealing to young girls today so that they might consider pursuing careers in technical fields. When I attended a technical university back in the 1980s, the undergraduate student body was only 20% female. Surprisingly, that statistic is still the same in 2009. How can we use technical communication to make technology something to be understood and created by girls, instead of just used?

(image reprinted without permission from www.sandia.gov)