typography is ia / ia summit 2013

Typography is information architectureHow a little understanding goes a long way

Boon Yew ChewIA Summit 2013

@boonych

Saturday, 6 April 13

Hi, I’m Boon.

@boonych


My name is Boon. I’m an informa1on architect / interac1on designer at SapientNitro in London. Some of you may have recognized me from my sketchnotes, and this is a sample of a piece of work I did for a book called the sketchnote handbook, which we’re giving away at this conference to people who will be uploading their photos to the IA Summit sketchnotes Flickr group. If you want to know more about that, come find me aGer the talk.

#TypographyIsIA


But today’s talk is on typography, not sketchnotes.Oh and if you want to tweet about stuff -‐ the hashtag is #typographyisia.

Why typography?

@boonychhttp://www.flickr.com/photos/atomicshed/5600284969


So, The reason I wanted to share this is because I’m really fascinated by the topic, and it’s something we don’t really discuss in IA circles.And the more I researched about it and spent 1me at typography events, the more I realised this was really relevant to our work. I started thinking of typography as informa1on architecture, and I have a few reasons why.

http://www.flickr.com/photos/atomicshed/5600284969

http://www.flickr.com/photos/atomicshed/5600284969

Information building blocks

http://www.flickr.com/photos/44124367235@N01/3698270/ @boonych


Firstly, typefaces provide the building blocks for making informa1on visible. Without it, it would be really hard to have things like road signs, websites, books, posters so widely available. We depend on it to do a lot of things for us.

http://www.flickr.com/photos/44124367235@N01/3698270/


An older form of IA

http://www.flickr.com/photos/calsidyrose/7043554105 @boonych


Secondly, typography has been around for hundreds of years, and before the age of the computer, many people who prac1ced typography were focused on things like communica1ng informa1on, dealing with complexity, and facilita1ng understanding. In many ways it s1ll does today. That’s also what we aim to achieve as informa1on architects.

http://www.flickr.com/photos/calsidyrose/7043554105

http://www.flickr.com/photos/calsidyrose/7043554105

Communication

http://www.flickr.com/photos/30555049@N07/8088011895 @boonych


Finally, typography deals with the way people communicate with one another. And although we can all understand content regardless of what font is being used, we also want to be able to communicate ourselves appropriately as people do and typography allows us to do that.

http://www.flickr.com/photos/30555049@N07/8088011895

http://www.flickr.com/photos/30555049@N07/8088011895

@boonych

eySaturday, 6 April 13

My goal for this talk is to explain how beOer understanding of typography helps our work in informa1on architecture. But I don’t want to focus on the actual doing of typography, because I think there’s a lot of stuff out there that just focuses on the how-‐tos but doesn’t explain the WHY. And I think the why is important.

@boonych

eyRelationships

Systems Perception

Patterns


So, I’m going to frame typography in four different ways -‐ systems, percep1on, paOerns and rela1onships -‐-‐ which will help you understand typography a bit beOer as a craG.

1439

@boonych


So in 1439, Johannes Gutenberg revolu1onised the publishing industry by inven1ng a system that could mass-‐produce printed material prac1cally and economically.


The system he devised involved two parts: the first part was a manufacturing process, which was a unique way to producing individual pieces of leOers, called type.

@boonychhttp://www.flickr.com/photos/wilhei/109404349/


and the second part was a methodology -‐-‐ the specific way you went about assembling type together to form words, sentences, paragraphs and so on.Today’s system isn’t any different -‐ all these individual pieces just happen to be in digital form instead of metal type.

http://www.flickr.com/photos/wilhei/109404349/

http://www.flickr.com/photos/wilhei/109404349/


The professionals who specialised in type se[ng at the 1me were called compositors. In a sense, this is what we do as IAs -‐ like compositors, we use our understanding of systems as well as the human condi1on to organise informa1on in an appropriate way.

By the way I’ll be using the word “typefaces” a lot -‐ that’s just another word for “font” but is more technically correct because “typeface” refers to the way the thing “looks”.

@boonych


Typography involves many people with different skills. Compositors had to understand the work done by other people such as type designers, type manufacturers, printers, and paper manufacturers so that the printed material came out just right. Today, it’s actually not that different -‐ type designers, visual designers, developers, informa1on architects -‐ everyone influences how typography is applied and affects the user experience. It’s not the job of one person.

@boonych

Typography is the result of many systems combined.


This is what I mean by thinking of typography in terms of systems. It’s this way of ge[ng away from just the visual representa1on of the typeface.

@boonych


And today, this is even more important, because there are more mediums and channels in which type is used to communicate informa1on. It’s important is because you want the typeface to look the way it’s intended to look, and if it’s not doing that, then that’s a problem and you need to know where to go to fix it.

Perception

@boonychRalf Herrmann, opentype.info (image used with permission)


A lot of this obsession in typography has to do with percep1on -‐ if the user has perceived an L to look like the leOer I, then the design has failed. And similarly, if the reader perceives a word or sentence to mean the wrong thing, the design has failed. These are basic problems typography aims to avoid.

@boonychhttp://circusredickuless.com/king-james-bible-comic-sans-edition.html


But percep1on goes beyond what we see and read. Percep1on is also about how we feel, and that some1mes influences what we understand when we read. And so typography becomes a tool to design for what readers will perceive. And yes there actually an en1re bible set in comic sans, it was apparently created for people who have trouble understanding the Bible.

http://circusredickuless.com/king-james-bible-comic-sans-edition.html

http://circusredickuless.com/king-james-bible-comic-sans-edition.html

http://www.flickr.com/photos/nicksherman/8257578912/


Human percep1on is complex because there are so many factors influencing it. Some1mes a designer will place more emphasis on the ability to create harmonious word shapes to support reading.





Some1mes the emphasis is on legibility, which is appropriate for condi1ons such as highway signs where word recogni1on is crucial.



Ralf Herrmann, opentype.info (image used with permission)

Transport typefaceJock Kinnear & Margaret Calvert


By the way, the typeface you see here is the Transport typeface, which is the official typeface used across all highway signs across the UK. This is a list of typefaces used by different countries, and Transport is the 3rd one on the list.I’ll be talking about this a bit later so keep that in mind.1. USA 2. USA 3. UK 4. Sweden 5. Spain / Italy 6. Norway 7. Germany 8. Netherlands


Some1mes the differences are so subtle, it’s hard to know if they’ll make any difference to the user experience, so it’s worth understanding why certain typefaces have been designed a certain way. Thankfully, there are quite a lot of resources out there and healthy discussion around so you should definitely take advantage of that.

Pattern matching

http://www.flickr.com/photos/29461743@N00/5327827657/http://www.flickr.com/photos/31252318@N08/5152625601 @boonych


So the idea of percep1on is really about designing for basic needs, and once we’ve got that covered, we want to make it effec1ve and efficient for users to find and understand informa1on, which usually involves reading or scanning. You can also think of reading and scanning as a paOern matching ac1vity, but you can never be quite sure what exactly the reader is expec1ng to see -‐ it could be a word, a list of numbers, the crossbar of the leOer t -‐ no one really knows. But the point is this -‐-‐ it’s good to think of typography as a way of helping users iden1fy and recognize paOerns.

http://www.domusweb.it/en/design/states-of-design-06-in-your-face-/




Saccades

@boonych


This is a paOern of how reading takes place across a long form ar1cle. It involves a series of brief movements known as saccades, and it happens very very quickly -‐ at about 1/5ths of a second. The eye doesn’t actually see everything in focus -‐-‐ as it moves, the focal point jumps from part of a word to part of another word, piecing together those parts like a jigsaw puzzle to visualise the full words and sentences.

@boonych

1. words and sentences2. content types3. information organisation


When interfaces get more complex, it becomes harder to scan informa1on -‐-‐ because the eye now needs to iden1fy at least three types of paOerns -‐-‐ words and sentences -‐-‐ different content types -‐-‐ and how informa1on is organized on a page. Ideally, you want this to be as natural and implicit as possible, so the goal of typography is to make those different paOerns easier to iden1fy without having to use explicit means of instruc1on.

They@boonych

Chapter 4

People moved slowly then. They ambled across the square, shuffled in and out of the stores around it, took their time about everything. A day was twenty-four hours long but seemed longer. There was no hurry, for there was nowhere to go, nothing to buy and no money to buy it with, nothing to see outside the boundaries of Maycomb County. But it was a time of vague optimism for some of the people: Maycomb County had recently been told that it had nothing to fear but fear itself.

We lived on the main residential street in town—Atticus, Jem and I, plus Calpurnia our cook. Jem and I found our father satisfactory: he played with us, read to us, and treated us with courteous detachment.

Calpurnia was something else again. She was all angles and bones; she was nearsighted; she squinted; her hand was wide as a bed slat and twice as hard. She was always ordering me out of the kitchen, asking me why I couldn’t behave as well as Jem when she knew he was older, and calling me home when I wasn’t ready to come. Our battles were epic and one-sided. Calpurnia always won, mainly because Atticus always took her side.

When he was nearly thirteen, my brother Jem got his arm badly broken at the elbow. When it healed, and Jem's fears of never being able to play football were assuaged, he was seldom self-conscious about his injury. His left arm was somewhat shorter than his right; when he stood or walked, the back of his hand was at right angles to his body, his thumb parallel to his thigh. He couldn't have cared less, so long as he could pass and punt. When enough years had gone by to enable us to look back on them, we sometimes discussed the events leading to his accident. I maintain that the Ewells started it all, but Jem, who was four years my senior, said it started long before that. He said it began the summer Dill came to us, when Dill first gave us the idea of making Boo Radley come out.I said if be wanted to take a broad view of the thing, it really began with Andrew Jackson. If General Jackson hadn't run the Creeks up the creek, Simon Finch would never have paddled up the Alabama, and where would we be if he hadn't? We were far too old to settle an argument with a fist-fight, so we consulted Atticus. Our father said we were both right.Being Southerners, it was a source of shame to some members of the family that we had no recorded ancestors on either side of the Battle of Hastings. All we had was Simon Finch, a fur-trapping apothecary from Cornwall whose piety was exceeded only by his stinginess. In England, Simon was irritated by the persecution of those who called themselves Methodists at the hands of their more liberal brethren, and as Simon called himself a Methodist, he worked his way across the Atlantic to Philadelphia, thence to Jamaica, thence to Mobile, and up the Saint Stephens. Mindful of John Wesley's strictures on the use of many words in buying and selling, Simon made a pile practicing medicine, but in this pursuit he was unhappy lest he be tempted into doing what he knew was not for the glory of God, as the putting on of gold and costly apparel. So Simon, having forgotten his teacher's dictum on the possession of human chattels, bought three slaves and with their aid established a homestead on the banks of the Alabama River some forty miles above Saint Stephens. He returned to Saint Stephens only once, to find a wife, and with her established a line that ran high to daughters. Simon lived to an impressive age and died rich.It was customary for the men in the family to remain on Simon's homestead, Finch's Landing, and make their living from cotton. The place was self-sufficient: modest in comparison with the empires around it, the Landing nevertheless produced everything required to sustain life except ice, wheat flour, and articles of clothing, supplied by river-boats from Mobile.Simon would have regarded with impotent fury the disturbance between the North and the South, as it left his descendants stripped of everything but their land, yet the tradition of living on the land remained unbroken until well into the twentieth century, when my father, Atticus Finch, went to Montgomery to read law, 8 9 and his younger brother went to Boston to study medicine. Their sister Alexandra was the Finch who remained at the Landing: she married a taciturn man who spent most of his time lying in a hammock by the river wondering if his trot-lines were full. When my father was admitted to the bar, he returned to Maycomb and began his practice. Mayeomb, some twenty miles east of Finch's Landing, was the county seat of Maycomb County. Atticus's office in the courthouse contained little more than a hat rack, a spittoon, a checkerboard and an unsullied Code of Alabama. His first two clients were the last two persons hanged in the Maycomb County jail. Atticus had urged them to accept the state's generosity in allowing them to plead Guilty to second-degree murder and escape with their lives, but they were Haverfords, in Maycomb County a name synonymous with jackass. The Haverfords had dispatched Maycomb's leading blacksmith in a misunderstanding arising from the alleged wrongful detention of a mare, were imprudent enough to do it in the presence of three witnesses, and insisted that the-son-of-a-bitch-had-itcoming-to-him was a good enough defense for anybody. They persisted in pleading Not Guilty to first-degree murder, so there was nothing much Atticus could do for his clients except be present at their departure, an occasion that was probably the beginning of my father's profound distaste for the practice of criminal law.During his first five years in Maycomb, Atticus practiced economy more than anything; for several years thereafter he invested his earnings in his brother's education. John Hale Finch was ten years younger than my father, and chose to study medicine at a time when cotton was not worth growing; but after getting Uncle Jack started, Atticus derived areasonable income from the law. He liked Maycomb, he was Maycomb County born and bred; he knew his people, they knew him, and because of Simon Finch's industry, Atticus was related by blood or marriage to nearly every family in the town. Maycomb was an old town, but it was a tired old town when I first knew it. In rainy weather the streets turned to red slop; grass grew on the sidewalks, the courthouse sagged in the square. Somehow, it was hotter then: a black dog suffered on a summer's day; bony mules hitched to Hoover carts flicked flies in the sweltering shade of the live oaks on the square. Men's stiff collars wilted by nine in the morning. Ladies bathed before noon, after their three-o'clock naps, and by nightfall were like soft teacakes with frostings of sweat and sweet talcum.People moved slowly then. They ambled across the square, shuffled in and out of the stores around it, took their time about everything. A day was twenty-four hours long but seemed longer. There was no hurry, for there was nowhere to go, nothing to buy and no money to buy it with, nothing to see outside the boundaries of Maycomb County. But it was a time of vague optimism for some of the people: Maycomb County had recently been told that it had nothing to fear but fear itself.We lived on the main residential street in town-Atticus, Jem and I, plus Ca1purnia our cook. Jem and I found our father satisfactory: he played with us, read to us, and treated us with courteous detachment. Calpurnia was something else again. She was all angles and bones; she was nearsighted; she squinted; her hand was wide as a bed slat and twice as hard. She was always ordering me out of the kitchen, asking me why I couldn't behave as well as Jem when she knew he was older, and calling me home when I wasn't ready to come. Our battles were epic and one-sided. Calpurnia always won, mainly because Atticus always took her side. She had been with us ever since Jem was born, and I had felt her tyrannical presence as long as I could remember.

They ambled across the square


The way typography aids the paOern matching process is by establishing healthy rela1onships between all these elements in ques1on. A good rule of thumb is to look at the nega1ve space, that is the spaces that appear around shapes and elements, and make sure that there’s balance in everything -‐-‐ so things like leOers don’t get squished together, words can be easily read, and that the content looks organized as a whole.

@boonych

http://www.flickr.com/photos/grahamhibbert/7623343090http://www.flickr.com/photos/jlt/2889726705/http://www.flickr.com/photos/zokuga/5818734490http://www.flickr.com/photos/mshades/4287009210


Ul1mately, all we want is to be able to avoid establishing poor rela1onships in our content. Things like misused fonts make things harder to read, and some1mes we can create uninten1onal paOerns that hinder the reading experience. All this stuff is what I call typographic hygiene, and you prac1ce that so that the intent of your design is clear, and not ge[ng in the way of the user.

http://www.flickr.com/photos/grahamhibbert/7623343090








@boonych


There are many good guidelines and rules on how these rela1onships should be established, such as how far apart characters should be and how much spacing we should put between sentences, but blindly following these things without an understanding of the fundamental concepts is a bit like taking a standardized test to qualify as a doctor.

@boonych

eyRelationships

Systems Perception

Patterns


The guidelines and rules make a lot of sense when you apply them through these four perspec1ves. They’re not complete, but they’re good ways to ground the prac1ce so that we can produce beOer informa1on architecture.

@boonych

Case studies


Now that we’ve got the basics aside, there are some case studies I want to share with you to bring this more to life.

Verdana - a typeface for digital displays

http://www.flickr.com/photos/maddi/173564896/ @boonych


The first case study I want to share is about typefaces for the screen. Our work tends to involve screens a lot, and the story of Verdana is interes1ng because typographers didn’t start out designing typefaces for the screen. Verdana is one excep1on -‐ it was designed in 1996 by MaOhew Carter for MicrosoG, and the way he went about it is very interes1ng.

http://www.flickr.com/photos/maddi/173564896/

http://www.flickr.com/photos/maddi/173564896/

http://www.domusweb.it/en/design/states-of-design-06-in-your-face-/ @boonych


One of the challenges with using type on screens is that everything has to be made up of 1ny square pixels, and if the pixels aren’t small enough, the characters end up looking like lego blocks rather than nicely drawn characters. In order to take advantage of the pixels, what Carter did was to start with the pixels first before designing the glyphs -‐-‐ these intricate lines that define the characters of the typeface.



@boonychhttp://karlstolley.com/dissertation/chapter4/systemfonts.htmhttp://www.yevol.com/en/windows/Lesson09.htmhttp://www.microsoft.com/typography/web/fonts/verdana/default.htm


This made Verdana a suitable font for displaying content in a small size that didn’t feel uncomfortable to read.

http://karlstolley.com/dissertation/chapter4/systemfonts.htm






@boonych

People moved slowly then.

They ambled across the square, shuffled in and out...

A day was twenty-four hours long but seemed longer.

People moved slowly then.

They ambled across the square, shuffled in and out...

A day was twenty-four hours long but seemed longer.

Verdana 18 pt

24 pt

36 pt

Georgia 18 pt

24 pt

36 pt


This was great when in the earlier days of the web when you had a monitors with a resolu1on of 600 x 800 pixels, but it’s not as elegant when you use it on higher fidelity screens or at larger sizes. Because of technological improvements in screens, there’s a lot more you can do with typography now.

@boonych


Also, since 2009, more typefaces has become available for use due to beOer browser support and font services like Typekit and Fontdeck. This is generally a good thing, because it allows us more ways to express informa1on on the web.

@boonych


There’s this growing trend of using web fonts to create sites that are really bold and drama1c. This is the New Republic, an online-‐only magazine that launched recently last year. This aesthe1c is partly necessary because the fine detail of many typefaces will not render as well at small sizes due to pixels.It’s something we have to live with for now, but it means that we have to make trade-‐offs about what typefaces to use for crea1ng an impression versus the ones we use for body text and so on.

@boonych


However, some sites have taken a step back to ques1on the role of big headlines and web typography. This is the new “A List Apart” site, which was redesigned a few months ago. The bold headline, which is created with this drama1c typeface, is merely a way to introduce the page. The focus here is clearly on the content -‐-‐ which has also been given typographic considera1on. And this is what it looks like when you scroll all the way up to the top -‐ the effect is inten1onal. In fact, the focus on content is so much that all of the content that used to be in the sidebar has been pushed down.

@boonych

New Transport typefaceHenrik Kubel & Margaret Calvert


Some typefaces have been found to work very well on screens, and some sites are star1ng to use this extensively as their primary typeface. This is gov.uk, the official government portal for the United Kingdom. It uses the New Transport typeface across all of their pages -‐-‐ Remember the one I showed you earlier? New Transport is an updated version of this typeface. And because Transport had tested extensively for legibility and accessibility at high speeds and low light situa1ons, and many of those benefits are s1ll present in the new typeface. It works really well as a standard font for headlines, interac1ve copy, small text, and so on.


Another area that’s seen provided some interes1ng opportuni1es for typography use with new soGware applica1ons, some of which have been used as opportuni1es to break away from legacy applica1ons that have been around for decades. One example is Adobe Lightroom, which was designed from the ground up as a focused applica1on for photographers.

If you compare Lightroom to its symbolic parent, Adobe Photoshop, you can see the subtle but effec1ve difference typography has made to denote interface structure, modes, hierarchy, order, state and so on -‐ all into one compact space.


In a similar vein, mobile applica1ons have also provided similar opportuni1es for designers to start afresh. Both of these examples here, the iPad app and the mobile site of the Guardian, one of UK’s leading news publica1ons, has been designed to support mobile-‐centric ac1vi1es of intermiOent content snacking and in1mate reading. The execu1on you see here shows how strong typography can both make the content browsable and comfortably readable at the same 1me, without the interface ge[ng in the way.

Treat text as UI”

Cameron MollDesigner, author, and speaker

“


Cameron Moll, author of CSS Mastery and Mobile Web Design, has been credited with the saying “treat text as UI”

as one of the aOributes of great designers. We’re so used to crea1ng our wireframes with out of the box components, that we almost never explore the possibility of doing more with text other than labels and represen1ng content.

@boonych

2008 2013


As a result of this shiG of thinking, a lot of the chrome began to fade away, in order for the content itself to do the work of the interface and interac1on.

2008

2013


Sites like kayak.com have improved their informa1on architecture over 1me by removing a lot of noise and allowing the typeface and content itself to do the heavy liGing. So rather than thinking about interac1on as a system of components, widgets and panels that contain the content, the content itself and its rela1onship to the things around it is what creates the interface. Skip all of the technical scaffolding to meet the user’s expecta1ons.

Typography is what language looks like”

Ellen LuptonThinking with Type

“


I’d like to summarize with a quote from Ellen Lupton from her book “Thinking with Type” -‐ and she says “Typography is what language looks like”. I’d like to think the reality we live in now isn’t just about the languages we speak and use, but the languages we use in addi1on to that -‐-‐ on social networks, interac1ve systems, workplaces, and so on, some of which are equally as complex if not more. And oGen 1mes, typography forms a core part of these experiences.

Thanks.

Resources: bit.ly/typographyisia

get in touch: @boonych
