View Site Navigation

Primary Content

Technical Web Typography

Typography is a design element that has always fascinated me, when done well it instantly impresses and makes communicating the message appear effortless. Good typography is something I have always strived for, but is often the element that I am least satisfied with in my designs; no matter how hard I work at it I never seem to be able to get it quite right.

An example of technical typography

Being a skill that I have wanted to improve upon for some time I was excited by the recent Technical Web Typography: Guidelines and Techniques article on Smashing Magazine and decided to put the techniques covered into practice.

I found this very informative and extremely easy to follow; it has certainly filled a few gaps in my typography knowledge. I would recommend reading this article to anyone looking to improve on their typography and I am looking forward forward to applying the results to this site. You can view the demo I created whilst following this article below.

View Demo

Clichés and Idea Generation

When I first started out designing I often found myself looking at the work of others with admiration and wondering where their good ideas come from. To a certain degree I subscribed to the genius theory, believing that creativity is a gift people are born with. Fast forward several years and I have learnt that the art of good design is not passed down to a select few by the gods of design; but is a skill like any other that can be learned, taught and practiced.

Cliché stock image of a centre employee
Cliché stock image of a call centre employee, Photo credit

This excellent article on Examining The Design Process: Clichés and Idea Generation from Smashing Magazine explores this train of thought and suggests techniques to help work towards the path of good and meaningful design whilst avoiding clichés. Along similar lines, this article on the basics of designing from Web Soulz explores the fundamental concepts of designing for the web.

Negative Space in Design

Negative space, or whitespace, is a powerful design element which impacts both the aesthetics and usability of a website; too little and the design feels cramped, too much and related page elements can become disconnected.

8 Fish logo which makes clever use of negative space
8 Fish Logo image credit

The 8 Fish logo above is an example of clever use of what negative space can achieve, an attractive design providing additional depth that rewards the viewer for the taking time to think about the logo and in turn the company it represents. The four orange fish stand out, whilst closer inspection of the negative space reveals four more fish swimming in the opposite direction.

This article titled Negative Space in Webpage Layouts: A Guide explores the fundamentals of negative space, looks into how to improve the use of negative space in layout design and is well worth a read.