Laura’s book on (Sustainable) Typographic Web Design

I’ve said elsewhere that type-based interfaces are one way to Sustainable Web Design. In the past, web designers have tended to ignore type as a design element, which meant that interfaces were built out of images and interaction. But there’s 400 years worth of wisdom on how to communicate effectively, based on effective type-based design. A letter from a well-designed font like Verdana has a huge amount of design and User Experience (UX) thinking going into it. The rising interest in type-based interfaces is being fueled by Windows 8, with its type-ish “Metro” design language. Also, support for webfonts means that we can make web apps look better than native apps!

My guess (though I’m not aware of quantitative studies on user interaction design) is that typographic interfaces will be easier to use than our current “icon attic” approach to imagery in layout.

In terms of sustainability, font files are very similar to “CSS Sprites“. When you chose a character from a font, you are essentially doing the same thing as ratcheting a CSS sprite to a specific image.A font file is essentially a sprite file that uses vector, instead of bitmap graphics, and we can send hundreds of these vector graphics in a single webfont file. This in turn means that a typographic interface may be constructed with fewer HTTP requests.

Could there be a reason for creating font-like files that weren’t just outlines? Imagine a TrueType variant that stored images with internal features, color, and shading. We could store a big collection of vector graphics like SVG, giving a very compact way to download and use resolution-independent graphics. In fact, Webfonts under Apple iOS are SVG graphics, so we have a format. All that’s missing is a way to put more complex shapes that aren’t restricted to outlines into the file.

If there’s a format that does this, I’d love to hear about it!

I recently f0und an awesome book on Web-based typographic theory, Laura Franz’s

Typographic Web Design by Laura Franz on Amazon

Typographic Web Design: How to Think Like a Typographer in HTML and CSS

I’d recommend this bookanyone who does web design plow through the book – and don’t ignore the type theory!

On the education level (I’m a teacher) it is a way to have web design students learn type for their medium. Often, Typography is taught by graphic designers with an exclusively print background. Reports from my students over the years indicate that said instructors often ignore the web entirely, or are contemptuous of it as a medium for hacks. I’ve had more than one student insulted, in class, by one of these instructors.

It’s hardly the right way to move the accumulated wisdom of graphic design into a new medium! But, until now, all the good examles of typographic design were confined to print.

So, Franz’s book may be the solution to this problem in web design. Franz is clearly knows her stuff, and in my opinion the book could be used for an introductory typography class with no problems. In between the practical examples showing how to apply typographic thinking in CSS, she goes over theory neglected by many web designers and instructors; e.g., how to chose fonts according to content (Information Design!), a theory of why some type (e.g. Georgia) is more readable onscreen than others (e.g. Times). She also covers constructing a grid (with paper prototyping, another plus!), critical font analysis, and type choices for casual “grasshopper” web-ivore-ing, versus sustained e-book “long form” reading.

So, my Sustainable Virtual Design summary for today might be:

  • Learn to use webfonts!
  • Learn typography by getting a copy of Typographic Web Design
  • Someone should invent a general file format, based on font file formats like TrueType, for storing general vector graphics, so we will have the vector equivalent of CSS sprites.
  • Make sure web design students are taught type as an essential component of their medium in a positive and supportive way

About pindiespace

See for more

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s