Tuesday, June 7, 2011

Typography 1.0

   We're going to take a quick break from strict architecture to take a look at the intimately related field of graphic design! You see, it's a common misconception that architects build buildings. In fact, what architects do is draw pretty pretty pictures of imaginary structures to help instruct the construction trades and to seduce reticent city development commissions into signing permits. If you've ever bought from Ikea or Lego, you know where i'm driving.
   What? You've never seen the instruction manuals on how to build Lego sets? Heresy!
   Go out and buy one of those little $10 sets, i'll wait. Ok, ready to continue?
   Those sorts of graphic instructions are fantastic for describing complicated relationships of objects. Imagine Lego sets that read this way:
          1) Locate the flat rectangular blue lego piece with circular top joiners in a two by four pattern. Attach this piece vertically between the joiners of a similar             red piece. This construction will be referred to as L-1.
   That would be terrible.
   But today isn't going to focus on graphic instructions, no! Today the topic of interest is the way the written information is conveyed. We'll investigate the use of color and layout another time. That's right, it's time to dissect a few typefaces.
   Just like your junior high biology class, we're going to ignore the real technical parts of what the point of a spleen is, because the test only cares if you can differentiate the spleen from the eyes. If you want to get into the meat of typographic design, i recommend you check out ilovetypography and this fantastic graphic hosted over at graphikhaus. If that stuff isn't your cup of tea, don't fret, this article is going to focus on the application of typography instead of the lexicon.
   Enough introduction, let's jump in and take a look-see at the first font on today's menu.

   That is some attractive lettering, don't you think?  It looks a little bit like the typeface this blog uses (Philosopher).  Nyala is based on Sylfaen, both of which ship with Windows and/or Microsoft Office.
   The "Lorem ipsum..." phrase is a commonly used placeholder text used to demonstrate the visual qualities of a layout or other graphic design.  Although the original phrasing might be attributed to a text by Cicero, the words have been intentionally jumbled to make the paragraph nonsensical.  The point is to illustrate how a paragraph written in the typeface would read, which can be difficult to focus on when there are meaning-loaded words to be read.
  Nyala has a stately quality to it that's just a little bit playful.  The lettering is fairly complex and bold, though, making it somewhat unsuitable for large masses of text.
Appropriate Uses: Business Cards, Resume Titles
Inappropriate Uses: Books

   Yeah, you knew it was coming.  Look, Papyrus is a fantastic font.  It's distinct, slender and appears worn and aged, like writing on the parchment that gives Papyrus its name.  It's one of a very few calligraphic, hand drawn typefaces that are shipped with most Windows computers.  It's also legible, which puts it a big step ahead of Parchment or (perish the thought) Wingdings.
   But here's the thing -- Papyrus is EVERYWHERE.  You've probably seen it on those framed prints of crepuscular rays streaming through clouds with Bible quotes in the foreground.  Or on your favorite "organic" foodstuffs.  Or in the subtitles of the "Prince of Persia" movie.  The logo for the mysteriously-still-in-business company "Edible Arrangements" and for the movie "Serenity" aren't quite Papyrus, but they're awfully close.  I love Firefly, but that still bugs me.
   For better or worse, Papyrus has developed this association with organic, natural, and/or Middle Eastern stuff.  If that's what you're selling, at least you're advertising yourself accurately.  But you've given up your ability to control your image, which might cost you business down the road.  If you look at the companies that sell an image, almost all of them have uniquely designed logos.  Coke and Apple spring to mind, although the latter has opted to lean more heavily on their graphic logo than the written name, which uses an older typeface reminiscent of what those old 80s printers with the tear-off edges could handle...which is appropriate for the company that made those possible.
Appropriate Uses: ...
Inappropriate Uses: Everything.

   How many papers did you write in 12 point Arial with 1 inch margins?  Or maybe you used...
   Helvetica won't make an appearance in this post.  I can't say anything about it that hasn't already been said in the movie of the same name.  Arial is pretty darn similar anyway.
   I was a Times New Roman writer all through grade school.  It seemed a bit more professional looking to me than Arial, which i believed (and still do) would improve the grade i got on my paper.  Some people like to boost the size of their font to make their paper look longer, but this just makes it look like you never switched from standard rule to college ruled paper.  Standard rule is the one with maybe 10 lines on a typical 8.5x11 leaf.  You don't want your teacher to think you're still in kindergarten.  Of course, using a smaller font does mean you need to write more, but that's probably a good thing.
   Both Arial and Times New Roman are eminently legible, which is great for your poor teachers' eyes who've read one hundred papers before yours, all written at the last minute and with worked cited of Wikipedia only. Most of the indecision between them stems from the argument of serif vs. sans-serif (without serifs).  If you looked at those links up at the top of the page, you already know the difference, but basically serifs are those little bits of decoration on the edges of letters that Times has and Arial doesn't.
   There are conflicting studies as to whether serif or sans-serif fonts are easier to read, but the arguments goes something like this.  Serifs guide the eyes horizontally and provide clear terminal points to each letter which makes the letters more recognizable based on individual characteristics of each letter.  Sans-serif fonts are cleaner.  This argument isn't likely to end anytime soon, but there's some evidence to suggest serif fonts are better in print, whereas sans-serif fonts are easier to read on the computer.  This is because until recently, computer monitor resolutions were insufficient to render the detail of very small type, and serifs are an additional level of complexity that ends up as an indistinguishable blur.
   You'll notice i'm using a serif font here.  That's because i'm confident my awesome readership is tech-savvy enough to have a monitor with a decent resolution.
   One point about the uses here -- a LOT of businesses use Helvetica for their logo.  It's not as heinously annoying as Papyrus because it's just so plain, so it focuses the attention on the name of the business rather than the design.
Appropriate Uses: Term Papers, Office Memos
Inappropriate Uses: Wedding Invitations, Comic Books

   Ok, along with my all-time favorite typeface, Papyrus, Comic Sans gets a lot of flak.  The difference is that most people seem to get it with Comic Sans.  The name gives away the origin -- it's supposed to look like the writing in comic books, and it doesn't have serifs (sans)...most of the time.  It's a sort of childish, playful font, and people recognize that that isn't the quality you want when you're coming up with a sign for your business.  If you're a teenager on AIM, it's forgivable to use Comic Sans (Do teens still use AIM?  Oh man, i'm dating myself), but for the rest of us, leave the comic lettering to the comic book artists, who ink the letters by hand.
Appropriate Uses: AIM, amateur comic books
Inappropriate Uses: This

   See, isn't this better than Comic Sans?  This being an architecture blog, i can't help but point out that the Frank of this Frank the Architect typeface is our good friend Francis D.K. Ching, the author of those great design drawing textbooks.  This typeface is best in all caps, or "cruise control" for the web forum-inclined.
Appropriate Uses: Architectural Notation
Inappropriate Uses: Term Papers

   This is just another example of a playful font that you could use instead of Comic Sans.  Of course, you could also create your own typeface with the Font Generator, which is pretty groovy.  You might have noticed that throughout this post i've been avoiding using the term "font" in favor of "typeface".  This is because a typeface includes the family of whole font family; bold, italic, and other variations on a font are all part of one typeface.
Appropriate Uses: Entomology Notebooks
Inappropriate Uses: Government Buildings

   Georgia is like the Apple of the typography world.  It's not necessarily a better typeface than any of the other standard web fonts, but it gets fewer viruses because it isn't as popular.  Wait, no.  You get the idea.  It's gaining popularity very quickly around the 'net, though, so we'll see how long that lasts.
   It's ok to be a typography hipster.  It really was cooler before it got popular.

   This is getting to be a really long post, so i'm going to split it up into two posts!  Typography 2.0 will hit your computer like a sledgehammer sometime later this week (regular Tuesday posts won't be interrupted) and we'll look at some of my favorite unusual and programmatic typefaces that really carry a lot of weight.
   Not really like a sledgehammer though, i have terrible aim with those things.


  1. Huh, I never really knew the difference b/w font and typeface. Now I know

  2. My understanding is that Ariel was/is Microsoft Office's way to avoid paying the royalties on Helvetica, so the two are nearly identical.

    Also, of all the typefaces in this post, the smaller, Latin text paragraphs of Times New Roman and Georgia look the worst (noticeable pixels) on my monitor. Your default serif Philosopher looks better, counter-intuitively.

  3. That's an interesting point. All of these blocks of text are at the same point size, but typed in Photoshop rather than Word or Illustrator. I know Photoshop does some processing to convert the vector text into raster images, which might account for the pixelation to some extent.

    As an addendum to the comment about Papyrus, it appears that there are in fact a number of different variations on the larger font family. Serenity and Edible Arrangments are Papyrus Standard, which is apparently slightly different than the Papyrus which ships with Windows/Word.

  4. Optima. That is all.