Typography is an ancient craft, defined as the art and technique of arranging type to form language (from Greek, if anyone is interested). When Gutenberg invented his historical printing press back in the early 1400s, creating usable type for mass production has been at the forefront of our industrial development and social communication.
As we continue to propel ourselves headlong in to the digital age of the 21st Century, type for digital screens is the next step in the development of typography. It is ubiquitous in our culture. This new age in typography is a big one as the factors of the paper and printer are replaced by screen resolution and browser versions. Thankfully, the web has caught up with the change and a whole new world has opened up to the designer.
Being originally a print designer, my move to digital has been a bit unnerving, despite growing up in the burgeoning digital world. The main difference being that in print the dimensions are set – the reader can’t change the size of the page they are reading and so the type is fixed. On the web, the display is much more under the control of the reader. It’s a new game, but the fundamentals remain. Knowledge and understanding of setting type is still at the core of web typography and CSS allows much control over letter spacing, line height etc. So often a good website design is let down by poorly set type. Choosing an uncomfortable measure (number of characters in a single line in a column of text) is the usual culprit and makes the information difficult to read easily. Whilst reading an article recently about UI design, one quote stood out to me: “Remove the question marks”. Poorly set type creates question marks – unnecessary barriers for the viewer to overcome. The main aim of any piece of writing, whether printed or online, is to communicate a message – if it’s difficult to read then the first hurdle has been well and truly stumbled over. Getting elements such as letter spacing, leading, rhythm, quotes, hyphens, punctuation etc. correct should be considered a part of this task.
Choosing decent typefaces is key too – reflecting the brand and being readable are two major considerations, along with being appropriate for the task. For example, a display font should not really be used for body copy as it has not been designed that way. A wide range of weights is useful too.
Services such as Typekit or Google’s free Google Fonts deliver fonts to the browser online rather than the old way of relying on “web safe” fonts (fonts that come pre-installed on computers) to guarantee what you design is what the end user will see. Services like these have opened up the digital world to some beautiful fonts that would otherwise have remained on the printed page. Stripping out weights, character sets and languages that are not used in your design can help reduce the load time of web fonts, which is an important consideration when using fonts from these services.
These are just some basic things which, to many I’m sure, may seem overly fastidious but, as the presence of digital screens become ever more prevalent, a few simple steps can create clear, readable text which, ultimately, is the main way our apps and web sites communicate their message. In this new digital world of pixel perfection and semantic code, spare a thought for the humble letter.
Further reading: There are countless articles and resources on the web on this subject but a useful resource for applying typographic style to the web can be found at web typography.net (http://webtypography.net)
