Refresh LX - The Art of Typography

The Art of Typography The Standardistas @standardistas Refresh LX, Lisbon,
2012 j.mp/speakerdeckstandardistas • A very brief introduction. Who we are and what we’re talking about. • Thank you to the Bruno, the Refresh LX maestro, for being such a generous host.

@standardistas Enjoying this? @standardistas #artoftypography • Follow us on Twitter
and we’ll happily hook up for a chat over a beer later. • Our #hashtag for the day is #artoftypography, or in Portuguese on the next slide…

@standardistas Enjoying this? @standardistas #artedatipograﬁa • Should you prefer Portuguese:
#artedatipograﬁa. Thanks Paulo!

@standardistas Really enjoying this? #standardistastotallyawesomekeynote • Long hashtags anyone? They’re
de rigueur.

@standardistas What we’ll be covering… • Type Has Purpose •
The Past Shapes the Future • The Semiotics of Typography • When Type Sings • So, what will we be covering? • Before we get started on the main content we’d like to recommend a little light reading.

@standardistas j.mp/requiredreading • In addition to our role as The
Standardistas and as practicing designers, we’re academics, so you won’t be surprised to see a list of key texts that inform our thinking.

@standardistas • Ellen Lupton’s ‘Thinking With Type’ is an excellent
overview of the world of typography. Now in its second edition it’s well worth owning if you don’t already have a copy. http://j.mp/thinkwithtype

@standardistas • Robert Bringhurst’s classic ‘The Elements of Typographic Style’
is an exhaustive overview and a bible you can continue to regularly. Though its focus is primarily the printed page, it still harbours a great many secrets applicable to the web. • Richard Rutter, of Fontdeck, used it as the basis for the ‘The Elements of Typographic Style Applied to the Web’ (http://webtypography.net). http://j.mp/typographicstyle

@standardistas • Jost Hochuli's excellent ‘Detail in Typography’, exhaustively catalogues
the ﬁner points of setting text, exploring the wealth of typographic details at our disposal. http://j.mp/detailintypography

@standardistas Type Has Purpose • The typographic choices we make
colour the messages we shape.

@standardistas Type Ampliﬁes Meaning • Type conveys and ampliﬁes meaning.
• We can turn the dial to 1, or we can turn it to 11. • Where we turn the dial to, is determined by the content we’re shaping.

@standardistas • Turning the dial… courtesy of ‘Spinal Tap’.

@standardistas These go to eleven….” “ • We take a
message and we shape it as designers. Sometimes we opt for loud, sometimes we opt for quiet. The choices we make are critical to the messages we shape.

@standardistas This type is vocal, it kicks you in the
balls… • A poster is intended to capture your attention, it’s vociferous. • Carving words into your chest isn’t quiet; this is type that’s going to eleven, it’s loud. • The letterforms capture your attention - forcefully - they grip you, they pull you in.

@standardistas This type is vocal, it kicks you in the
balls… • A book, on the other hand, requires typography of a different nature. • It needs type that recedes, that’s quiet, that disappears; this is type that’s going to one, it’s almost silent.

@standardistas • Typography exists on a continuum. • You can
go to eleven or dial down to one, the bottom line is to make your choice appropriate to your content. • Content and form should be inseparable.

@standardistas The Crystal Goblet • Beatrice Warde’s ‘The Crystal Goblet’
is rich with metaphors. The title itself is a reference to a clear vessel holding wine, where the vessel (the printed word) gives no obstruction to the presentation of its content (the text). • Warde states: “The man who ﬁrst chose glass instead of metal to hold his wine was a ‘modernist’…. That is, the ﬁrst he asked of this particular object was not, ‘How should it look?’ but, ‘What must it do?’ and to that extent all good typography is modernist.”

@standardistas “Two goblets: one of solid gold, wrought in the
most exquisite patterns and one of crystal-clear glass.” —Beatrice Warde, ‘The Crystal Goblet’ • Warde poses a choice between two wine glasses that serve different purposes.

@standardistas “Believing we can deliver when message and form aren’t
intimately bound betrays the promise of design as a communication practice.” —Robbie Manson, ‘Content Is the Fuel’ • Robbie Manson: “Content is the fuel. Design is the vehicle.”

@standardistas What is your purpose? • Ask yourself: What purpose
does your type serve? What is its intention?

@standardistas • Is it intended to delight, like Robert Massin’s
exuberant typography for Ionesco's play 'The Bald Soprano'?

@standardistas • Is it intended to confound, like David Carson’s
intentionally oblique typography for an article on Bryan Ferry he found to be “banal and predictable,” and so set in Zapf Dingbats to save readers the pain of reading it?

@standardistas • Or is it intended to disappear, like Mitchell
and Wightman’s restrained typography for their excellent book on ‘Book Typography’?

@standardistas Purpose Shapes Form • Know the purpose and understand
the intention – the typographic choices should ﬂow down from that. • Bringhurst offers solid advice here…

@standardistas 1.1.1 Typography exists to honour content. • Bringhurst: “[Typography]
is a craft by which the meanings of a text (or its absense of meaning) can be clariﬁed, honored and shared, or knowingly disguised.”

@standardistas 1.1.3 There is a style beyond style. • Bringhurst:
“Typography is to literature as musical performance is to composition: an essential act of interpretation.”

@standardistas 1.2.1 Read the text before designing it. • This
is critical. As designers working on the web, we can add meaning to the words we work with. The ﬁrst stage of this process is through well-chosen markup which ampliﬁes meaning.

@standardistas Read and Understand • It sounds obvious, but if
we are to design appropriately we must insist on content ﬁrst, otherwise all we create as designers is window dressing, at the most banal and superﬁcial level. • We owe our readers (and our writers) the very best we can do. That involves a combination of markup, carefully measured; coupled with form, appropriately tailored.

@standardistas Analyse, Map, Design • Text – Foundation • Markup
– Structure • CSS (Typographic Choices) – Ampliﬁcation • A three stage process: • The text is the foundation on which we build; • The markup we choose to clothe the text in, further reveals, clarifying the underlying message; • The typographic choices we make, applied via CSS, amplify the text’s purpose even further.

@standardistas Creative Non-Interference • Bringhurst calls this ‘Creative Non-Interference’: “Simple
as it may sound, the task of creative non-interference… is a rewarding and difficult calling. In ideal conditions, it is all that typographers are really asked to do – and it is enough.” • The challenge - for the truly mature professional – is to take a step back and know when to let go. Your personality is not necessarily what the text needs. Don’t lose sight of that.

@standardistas Do Your Work, Then Disappear • There was a
time when a designer’s role was to shape meaning, amplifying a message to the best of their ability. They served content. • In an age of ‘designer celebrities’ – all eager to stamp their mark on the underlying content at hand, in an effort to further gild their designer’s lily – the challenge, for the true typographer – to ‘disappear’ – is one we might best rediscover.

@standardistas The Past Shapes the Future • Typography is bound
to time. We can learn from the past, indeed, the best designers do. • Many typographic problems have already been solved, elegantly. We can build on this knowledge.

@standardistas • Time and technology shape typography. • All typefaces
are a product of their time; understanding this will make you a better typographer. • A super-condensed history of typographic shifts, every one has impacted upon what we can do as typographers.

@standardistas • Renaissance typography of the 15th and 16th centuries
signalled the hand of the scribe, the cursive forms of the pen, characterising letterforms. • The echoes of the scribe, labouring to spread the word of god.

@standardistas • Without advances in metallurgy the ultra-ﬁne serifs of
Didot and Bodoni would not have been possible. • This typography - and the forms of its letterforms - represented the pinnacle of technological achievement. A rationalist, vertical axis that reﬂected the Age of Enlightenment’s fascination with science and rationalism.

@standardistas • The rationalist forms of Paul Renner’s Futura, of
the early twentieth century, wear their machine credentials proudly on their utilitarian sleeves, suggesting a social sentiment, utopian in outlook and of the people. • Born of the factory, they eschewed needless ornament.

@standardistas • OCR A – Optical Character Recognition A –
could only have existed in the late 60s, a time characterised by the rise of the computer and machine readable typography. • Its letterforms capture the essence of the 60s, a time of moon landings and cold war tensions.

@standardistas • By the 80s, say hello to Chicago, heralded
in by Steve Jobs and Andy Hertzfeld, a cornerstone of the desktop publishing revolution with letterforms deﬁned by the pixel grid of the Macintosh.

@standardistas • Bello, by the obsessive and supremely talented team
at Underware, encapsulates what is possible when OpenType is pushed to its absolute limits. It’s a product resolutely of the OpenType era. • Years in the making - in no small part due to a considerable array of typographic alternates enabled by OpenType - Bello offers a multitude of forms to the discerning designer, far, far more than any previous era might imagine. All enabled by the humble computer.

@standardistas • Through these forms we see the march of
time and the progress of history - through a very selective lens - the forms we clothe language in change, shaped by time.

@standardistas Know Your History • Understanding your type’s heritage improves
your ability as a designer. • If there’s one word of advice we can offer, it is to travel down the pathways of the past, discovering the typographic journey that has shaped the letterforms we use today.

@standardistas The Semiotics of Typography • The type you choose
acts as a signiﬁer, communicating meaning and shaping your message.

@standardistas • This scene encapsulates an era, of pin stripe
suits, loud ties and competitive business cards.

@standardistas Technology, Politics and Fashion • All shape typography.

@standardistas • Technology shapes type. Two times, two types of
type, enabled by what was possible at the time. In the ﬁrst instance, the quill; in the second instance, the computer.

@standardistas • Politics shapes our world view and it shapes
typography too. In the 20s, to embrace modernity was to embrace the sans-serif, in the 60s the aesthetic of the Offset Duplicator, the typewriter and hand-painted protest signs, heralded a revolutionary spirit.

@standardistas • Fashion also shapes typography. Two different ages, two
different typographic fashions, both counter-culture. When choosing a typeface you also choose the context in which it was created, and everything that came since.

@standardistas When Type Sings • By marrying timeless design principles
with the semantics we have at our disposal, we can create beautifully designed typographic experiences that captivate.

@standardistas • Dialled to almost zero, Frank Chimero’s site for
‘The Shape of Design’ tells its story in a timeless and elegant manner. • The type lets the words do the talking.

@standardistas • Mule Design’s ‘Evening Edition’, dialled a little louder,
is an interesting re-imagining of how news might be delivered, that echoes the semantics of newspaper design.

@standardistas • A cornucopia of type, Swedish ad agency SWE
turns the dial a little louder still, with a bombastic display of typographic expression. And all this with no colour at all.

@standardistas • The site for XOXO – by our Portuguese
friend, Paulo Pereira – is expressive, yet restrained. Colour and type, hand in hand in harmony.

@standardistas • Tim Brown’s typographic samples, this one in particular,
are a showcase of dialling to eleven, pushing type as far as it can go in an exuberant and experimental manner.

@standardistas Choose Your Type Carefully • Spend time on the
typographic choices you make.

@standardistas Choose It to Last • Choose your type to
last.

@standardistas “Typography is the craft of endowing human language with
a durable visual form.” —Robert Bringhurst • You have a responsibility as a designer: to craft your typography and clothe language in a durable visual form.

@standardistas Thank You @standardistas #artoftypography Talk to us over a
beer… • Thank you.

Refresh LX - The Art of Typography

Refresh LX - The Art of Typography

More Decks by The Standardistas

Other Decks in Design

Featured

Transcript