Web Typographic Demos

Added a new section to demo typographic techniques using CSS. This is my own way of learning the latest features of CSS. The demos so far include first-line indent, drop cap, ligatures, multi-columns and flexbox. Bookmark the page for more demos in the near future.

Graphic Design: A New History

Unlike Meggs’ History of Graphic Design, which begins with the invention of writing, Stephen J. Eskilson’s Graphic Design: A New History, skips right to the development of type and typography starting from Gutenberg to Bodoni. The introduction started off promising, but Eskilson doesn’t delve into typography as much as Megg in the rest of the chapters.

As far as I could tell, the only ‘new’ information on the history of graphic design is in chapter 10. Although I am glad to see Eskilson covering web design, I am disappointed to find out that only Flash and motion graphic go down as part of graphic design history. Who really care about the Flash-based promotional web site for Snakes on a Plane?

I have to read this book for my class on graphic design history, but I definitely recommend Meggs’ over it for clearer references and much more engaging reading experience.

Book

Writing Content For Usability

The following note is taken from an UIE seminar presented by Steph Hay.

Three elements of compelling contents

  • Focus
  • Credibility
  • Consistency

Focus

  • Audience
  • Medium
  • Network

Audience

  • Don’t: consider everyone
  • Do: Focus on one ideal person, then speak directly to her
Examples

Medium

  • Don’t: think in isolation
  • Do: capitalize on other communication channels to tell your story
Examples

Network

  • Don’t: forget others’ messages
  • Do: consider how your network will describe you—and influence your target audience
Examples
  • RTI: Promote other network such as public research

Credibility

  • Meaningful
  • Helpful
  • Results-oriented
  • Confident

Meaningful

  • Don’t: fill space
  • Do: take the time to ensure your writing says something
Example

Helpful

  • Don’t: assume users know what to do
  • Do: tell users what you want them to do
Examples

Results-Oriented

  • Don’t: just list what you do
  • Do: explain what awesome things users will get from you
Examples

Confident

  • Don’t: over promote
  • Do: showcase confidence while being humble
Examples

Consistency

  • Structure
  • Voice
  • Style

Structure

  • Lead with the meat: Tell users what they need immediately
  • Include what’s relevant: What’s the most relevant things right now
  • Use keywords throughout: Users won’t be lost

Voice

  • Write in a genuine tone
  • Avoid bloated statements
  • Rewrite anything that sounds ridiculous when read out loud

Style

  • To end (or not) lists with full-stops
  • Capitalization, punctuation in headings
  • Website/web site, log in, sign up
Examples
  • Woot
  • Geico: They branded the result of save time and money in everything they write

How Do I Start

  1. Write
  2. Choose
  3. Rewrite
  4. Prioritize

The Process

  1. Write with abandon: Brain dump of one liners. Think of that person you want her to do
  2. Highlight the meatiest stuff: Just important words, not sentences
  3. Rewrite using the meat only: Rewrite the sentences with only the highlighted words
  4. Prioritize: Move from message to motivation to goal

A Vietnamese Reference Grammar

A comprehensive guide for mastering the nuances of Vietnamese language. Thompson’s deep knowledge of Vietnamese is testified through his clear explanation of the differences in pronunciation between the north, central and south regions and his visual illustration of the complexity of the Vietnamese family relationships. The book’s rich contents and the brief history of Vietnamese writing system are just what I needed to move forward with my final graduate project, which should be done in 2015.

Book

CSS3 Layout Modules, Second Edition

Reading Rachel Andrew’s pocket guide is quickest way to catch up on the latest CSS layout techniques. The second edition comes with new examples to demonstrate the new CSS properties in action. Although they are still not ready for client projects, I’ll definitely use flexbox for this site in 2015.

Book

Design is One: Lella & Massimo Vignelli

A brilliant documentary of the renowned designer couple Lella and Massimo Vignelli. Beyond their expansive portfolio ranging from corporate identities to furnitures to interior designs, what stood out are the two advices from Mr. Vignelli. First, never work with bad clients because you’ll get worse ones. If you work with good clients, you’ll find better ones. Second, it’s not about the size of the project, but the size of effort you put into it. Thank you Mr. Vignelli.

Film

Type on Screen

Researched and written by graduate students at MICA and edited by Ellen Lupton, Type On Screen is a good overview of typography for the web, digital publishing and other screen-based technologies. With concise writing and compelling visual examples, you’ll learn a bit about the history of web fonts, hinting and designing for screen reading. The book is beautifully designed, but sadly set in chunky Akzidenz Grotesk as body text.

Book

Inside Paragraphs: Typographic Fundamentals

Miles Davis used to tell his musicians: “Don’t play what’s there. Play what’s not there.” In other word, pay attention to the space in between the notes. In similar concept, Cyrus Highsmith advises designers to look at the typographic space (such as glyph, counter, letter and line) rather than the text in a paragraph. The purpose is to understand what’s happening behind the scenes when setting body copy. It’s a great little book to have for quick reference.

Book

Detail in Typography

In a concise but insightful guide, Jost Hochuli exams the elements of micro-typography including letters, words, lines and their spacing. His brief explanation of saccades is easy to grasp. Hochuli designed the book himself using Adobe Minion for body text and Futura Bold for headings. Needless to say, it’s a beautiful little book.

Book