Typography and Information

Matthew Standage speaking at Milton Keynes Geek Night in January, 2017
Great talks, fired to your inbox 👌

About this talk

Typography is much more than choosing typefaces and the visual appearance of a page. Typography is the primary medium by which we communicate information to our users on the web. In this talk, Matthew Standage will look briefly at ways in which we can use typographic design to support people’s understanding and improve their chances of finding content that is of interest to them.


Thank you. So, just as a bit of a background to why I'm talking about typography, so prior to working at Oxford Computer Consultants I spent four years studying at the University of Reading. The University of Reading is one of the preeminent places in the world to study typography. They've got typeface design courses and things like that. And this is kind of a bit about why people should care a bit about good typography, but it's not about choosing typefaces and it's not really about these minor typographic details or rules. It's more about thinking about typography as a way of communicating information and, I guess, thinking about it as an information designer. So, back in 2006, Oliver Reichenstein, who's the director of a design consultancy called Information Architects, said that 95% of the web is typography. And I'm not really sure what he thinks the other 5% of the web is, but maybe it's things like this. So, I'm just going to turn that off. But I think what he really meant by this statement is that 95% of the web, and the information on the web, is written language. And he argues, within this blog post, that it's only logical that a designer that's producing content for the web should have a good training in the main discipline for shaping the written language, and that's typography. And he says this is because typography is much more than just the visual look and feel of the page. He goes on to illustrate this point with a quote from the famous Swiss typographer Emil Ruder, who, in 1969, said that, "It's the typographer's task to divide up, and organize and interpret this mass of printed matter in a way in which readers have a good chance of finding what's interesting to them." And I think this statement sounds quite similar to what you could consider something that maybe an information architect, a UX designer does today, give or take a few phrases. And therefore, I think typography is too important to the experience of your website, or even documents that you're producing, to ignore it. But how can we really use typography to guide readers to the content that they're looking for? So, I think the first principle behind guiding people to things they're looking for is hierarchy, and this is about identifying what are the most important pieces of information to the reader. And most of us are probably familiar with this, we've talked already today about h1, h2, and h3, and HTML, etc., etc. However, it's important that this visual hierarchy matches the importance of each piece of information to the user, and sometimes the page title isn't the most important piece of information to the user. For example, on gov.uk, there the most important piece of information to a lot of users that come to this site is, "When's the next bank holiday? When am I next going to get a day off work?" But actually, the h1 tag is this, "U. K. Bank Holidays." And that makes sense for that page, but it's important that we think about, "What is the user actually looking for in this instance?" And then, obviously, they're using different sizes for other headings, different accessory pieces of information. And I think this is something we're probably all familiar with. The next tool that we can use is proximity, and this is about how we can group information together. And if we draw on the principles of Gestalt psychology, this tells us that objects which are closely related to each other will appear to form groups. And I think, with this in mind, white space is probably the most powerful tool that we have when we're using typography. And we can do this... I divide up the page into various chunks of information. So, this is taken from the design blog, <i>A List Apart.</i> Throughout this page, they're using different bits of spacing between different elements to really divide up the content and associate different pieces. And this becomes particularly useful when you've got a device like a block quote here, where they're using less space here, before the block quote, and more space after the block quote to associate this block quote with that paragraph. And the use of a list of details, like associating the header with the preceding paragraph, really help to aid clarity when a user's skimming down a page and looking for information. And we can do this with different spacing between this, and we can also do this not just vertically but horizontally. And, I guess, the last thing that I think you really have to consider is differentiation. And this is, I guess, thinking about what the different types of information are on the page and how we can divide these up into different units for the reader. And we can use these things that we call, perhaps, micro-typographic variables, such as italics, small caps, different font styles to kind of divide up this information. So, you take a look at a site like <i>The New York Times.</i> If I get rid of the image content on this page, you can see that there's lots of different typographic treatments throughout this page to divide up the different pieces of content. So, you've got things like headers, menus, links, authors, image captions, and these different types of information is divided up by the reader. <i>The New York Times</i> takes this to a sort of extreme level in the sense that it's designed to look very much like a newspaper, and we wouldn't necessarily need this much differentiation in a less complicated website. But why does this all matter? And, I mean, surely, if the reader can read the content then the typography's okay. Well, if we draw on research into reading patterns on the web, such as stuff that's been done by Nielsen Norman Group, this tells us that users won't really read through our text in a word-by-word manner. And I think this is what makes good typography even more important, because it helps aid this scanning idea that users scan content, that they skim down the page. And if we can draw out the important pieces of information to the reader by using some of these techniques, such as differentiation, hierarchy and proximity, we can really help them find the content they're looking for. So I end on this, which is the quote I started with, and I think this is what you should think about whenever you're handling any kind of text, is, "How can we interpret this text?" We can divide it up and organize it, and help to organize the information. There's lots of tools we can use, typographically, to do this but that's probably the topic for another talk. So, thank you. ♪ [music] ♪