Back To The Future- Classic Typography Is The Key To A New Web Design

Back To The Future: Classic Typography Is The Key To A New Web Design

Originally posted on WOMMA’s All Things WOMM blog

There is an urgent need for Web designers to focus on crafting great content and features, rather than on devising unusual ways to navigate their websites, or adding excessive visual accouterments. People no longer have the patience or appetite for such novelty items

When so many users prefer to strip our design and view the content using apps like Readability, or the iOS-supplied “Reader” button, we have a problem. If a portion of our audience insists on artificially removing our website’s look and feel, why not pay attention and give them a simpler design in the first place?

Smartphone- and tablet-optimized websites have demonstrated that they are easier to use than their current bloated desktop versions—they tend to feature smartly curated content served lightning-fast via simpler navigation schemas.

What if we could mix the robust simplicity of the original Web with the rich functionality of Web 2.0, and the speed and beauty we enjoy today in our digital experiences, all in one common package, so that even the need for elaborate responsive design would be reduced?

Step one to achieve this goal is to embrace a design principle that isn’t new. Oliver Reichestein and others were talking about it back in 2006, but it’s an idea whose time has finally come: Typography IS the interface.

Type and pictograms feature high semantic value. Other graphic elements used to establish an interface’s look and feel (think Photoshop effects and other “bling”) have low meaning and usefulness. Furthermore, text is the most malleable design element, and can help us ensure that Web layouts adapt to the myriad screen resolutions out there. These are reasons why we should consider typography and pictograms as the cornerstone of our UI design. Photography and illustration also incorporate much meaning, but we should use them to further elucidate—rather just pretty-up—the content.

To apply this principle we could look to modernist designers and typographers such. Otl Aicher, Josef Müller-Brockmann, or Armin Hoffman. Their still-relevant design approach established clarity and elegant simplicity as the paragon of good visual communication.

Using typography the way they did it means bringing clear contrast, modularity and a sense of proportion, tension and scale to the composition of our Web pages. It means removing excessive visual containers and other trinkets. We can instead employ color, size, and relative placement to establish visual hierarchy. By letting text grow outside of boxes, and by simplifying our layouts, we improve legibility and reduce clutter.

New Web custom fonts are now available, so we can break away from rigid system fonts. Finally, let’s set our type large: the beauty of the letterforms is more evident at higher point sizes—even for body copy. Larger type also helps everyone to read, no matter their age or screen resolution.

Consider Microsoft’s latest typography- and pictogram-based rebranding, among many examples: it shows that we have outgrown that pervasive tendency in digital design to apply a hyper-real style to interfaces. This approach resulted in a real world tangible feel called skeumorphism and which is not strictly necessary or, arguably, even appealing: just because interfaces run on devices doesn’t mean they themselves must look like devices.

Users are ready to be liberated from unnecessary visual noise, confining layouts, and navigation roundabouts. To this end, designers should apply their creativity and craft where it matters most: to concepts and their elegant execution. Good typography is where we should start.