Andy Cooke

Attention to detail No.1: Type

Good typographic practice makes digital designs better

1. 1,177 words
2. 6 minute read

Call me old fashioned, but proper typographic practice remains high on the list of topics that all types of designers should be knowledgable about. Matters of the straight vs. curly apostrophe, optimal line length, hanging punctuation, even the most basic of typesetting knowledge such as widows and orphans — and don’t even get me started on correct dash usage — are just some examples of things that I see falling by the wayside in design for screen today all around the internet.

If you’re a visually-led designer and you don’t have a foundation of type knowledge… then get to know, and quick. If you come from a research or psychology background and have wound up in UX, then educating yourself on these topics will only mean you create better, more meaningful work right down to the smallest of scales.

There are many pathways into design, and by having a formal design education to build upon, I was fortunate enough to have a dedicated typography tutor in Jim Williams. Jim is a typographer by trade, and went onto write the internationally recognised and multi-translated Type Matters! in 2012. Others aren’t that lucky to have had dedicated type tutors, while others weren’t in a position to go to school for design at all. So, I get why some designers out there don’t have this knowledge. But here’s why you should start to brush up.

Good typographic practice equals a good user experience

For over 1000 years, since the Chinese invented the concept of movable type, countless typographers have been refining and developing the best ways for letters and words to be displayed on a page, so people can then consume the most necessary information in the most efficient way possible. It’s why these topics were even birthed into existence in the first place: they’ve all been designed, then designed again, to aid reading, so people have a greater understanding of the content at hand. Iteration over centuries, my friend.

The first step in design thinking is centred around understanding. Building empathy with a user to cater for their needs later on. Pretty standard. When it comes to visualising in service to these needs, focusing on these small details will help to ensure the message is understood efficiently. They may seem insignificant and perhaps superfluous, but with enough details left un-crafted, users can quickly feel irritated without knowing the reason why. That’s not very empathetic now is it? Newsflash: one reason is that it doesn’t read right. It doesn’t sit right. It doesn’t flow right.

Content hierarchy is one thing. Content design is another.

Digital limitations

Now, being old fashioned, I cut my teeth in the industry when the only term that used to exist for those designing websites and products was ‘Web Designer’. I’ve been through the mill as times have changed, and I understand that there many limitations designing for screen, and huge differences between designing for print. For instance, in modern digital design, one doesn’t have full control of the canvas (like one does when designing for print), as we never know how the user will interact with the site based on browser, device, connection et al.

But that’s no excuse to be lazy.

It doesn’t mean, that even in our Sketch and Figma files, we should endure a typographic mess, designs littered with widows and orphans because “that’s how it could end up looking on someone’s screen”. Take some pride in your work and make it the best it can be even at every stage. When it comes to displaying the work in your portfolio, don’t you want it to be the best possible representation? Do the work necessary here, and reap the benefits later.

Don’t forget that many of those early Web Designers are the ones that started their careers in the offline world, where proper typographic practice was a prerequisite to getting any design job. They are also the ones who largely had to design and develop at the same time — meaning there are workarounds, scripts and plugins to ensure that we always have solutions to difficult things to control such as curly apostrophes, hanging punctuation and the avoidance of windows and orphans — all through the magic of code.

Go that extra mile and ensure that these areas are covered.

Get those quotation marks right

Hang it!

Widows and orphans. Loneliness all round

Amongst the tiniest of details to get right

Font choice

Ahh, fonts. Typeface choice is an entirely different notion to typographic nuance, of which many designers pour over for hours. It’s more understandable as fonts are more visually apparent than those pesky details. I did once work with a freelancer who “didn’t see the point in using different fonts”, and he insisted on using Gotham for everything. Gotham is a great typeface, but even after a conversation on how the personality of the design of lettering has an impact on how an overall design is perceived, I took a look back at his portfolio now and… it’s full of Gotham. Deaf ears.

Capable designers understand that typeface design often carries multiple semiotic messages. It’s amongst the only communicative tool that does. It can say one thing, yet read another. This is the power of letters. Appropriate choice is one thing (i.e. the adage of choosing a rounded typeface over blackletter for a clown’s business card), but considered decisions when doubling down on the finer details of typographic character is another.

For instance, Frank Chimero has gone to the trouble of really diving to the deep end in terms of typeface comparison for his new site redesign; analysing the performance of letters at different scales for various areas of content. Thomas Byttebier has also gone to some depth on the importance of how crucial typeface choice is, especially when considering scale.

This is the kind of analysis digital designers should be undertaking about when the discussion of picking typeface crops up in the team.

Informed decisions around typefaces aren’t just for the ones leading the branding initiative. I should know, it’s the area I work in most. But these days (God, I sound old again), a brand seldom exists only in the offline world, so any choice should always include digital designers who understand the importance of how a font behaves in the online space. Get your voice heard in the process. Ensure suitable typefaces for the digital medium are being discussed at the brand level.

All of this isn’t news, either. Oliver Reichenstein was talking about this topic way back in 2006. It goes to show, an acute awareness of the various nuances of typographic techniques is often a factor to whether a digital design is truly successful or not. Good design is invisible, as it works to inform, inspire or direct a person—without them having to work harder than they should.

The details within successful designs are what makes the invisibility feasible or not. So go ahead. Design those buttons. Create the most beautiful forms ever. Lay the shit out of that content. But don’t ignore the typography.