Responsive Web Typography Workshop with Jason Pamental

Lead UX Strategist at Fresh Tilled Soil, Jason Pamental is passionate about bringing digital products to life with typography. He has written books about responsive web principles and this years TYPO attendees were lucky enough to get the low-down as to how these principles can be applied.

Filled to the last chair: Jason Pamental’s responsive typography workshop, photo: Sebastian Weiß (Monotype)

 

Like many young, budding designers, Typography and I got off to a rocky start. Not understanding the difference between readability and legibility, I drove myself crazy until Type wanted to be my friend as badly as I wanted to be Type’s.

When it came to the Web, we got on like a house on fire and our loving relationship continues to this day. It’s a platform, a tool, a resource and well let’s be real, a place for all your crazy housemate’s cat videos. We’ve all had one. The internet is a big place, and while some areas are very familiar, there is also a dark void of things I personally don’t understand.

 Web-Ligatures_Jason PamentalThe workshop covered many aspects of web typography, including how ligatures make a difference …

Web-Ligatures-Code_Jason Pamental

… and the CSS coding needed to realize opentype features in web fonts.

But what about the relationship between Type and Web? One-on-one equals two as company, but then there is the user … is three a crowd?
Jason Pamental aimed to address the connections within this triad, problem solving ways to turn good website experiences into great ones.

The workshop covered topics like performance, screen scaling, styling tricks and how nailing the basic primitive of the design is the best way to create layouts from the content out. Starting designs by properly defining the humble <p> will likely save future you a lot of pain and frustration. Jason took the group through each of these with structured examples and clear explanation. As a non-coder I certainly appreciated his clear thought process and colloquial references to ‘dropping it like a drop cap’ and ‘linking it, linking it real good’.

  

The Recorder responsive online version

Finaly Jason showed on the example of Monotype’s recorder magazine how combined typographic web measures can result in an almost one to one transformance of a print magazine into a web site.

Recorder-Print-IssueOriginal recorder magazine used as an example on how to transform a printed layout into the corresponding web layout 

With over 50% of interaction being on a mobile devices, responsible web typography is more important than ever as that number continues to increase. Jason’s workshop was a lovely balance between form and function, advocating for a smarter and simultaneously more beautiful online experience. After all, if Typography is “the clothes which words wear”, we can’t leave the Web naked now, can we?

LINKS:

Responsive Typography: workshop homepage with slides and resources.

GitHub: Source code from Responsive Typography workshop at TYPO Berlin.

The Recorder online version: Responsive website where web fonts and corrections can be switched on and off.

 

Jason Pamental

Jason Pamental

Designer, Strategist, Web Typographer, and Tinkerer (USA)

Jason is the Senior Director of Design and Technical Strategy at Isovera. There he leads the design and development team, runs workshops, and works with clients establishing their digital strategy. A seasoned design and user experience strategy leader with over 20 years’ experience on the web in both creative and technical roles. Projects range from Ivy League and High Tech to the NFL and America’s Cup. He also researches and writes on typography for the web: he’s author of Responsive Typography from O’Reilly, articles for .Net Magazine, PRINT Magazine, HOW, Typecast Blog, Fonts.com, and frequent podcast guest. He’s an experienced speaker and workshop leader, having presented at over 50 national and international conferences. The real story: mainly he just follows Tristan and Tillie around Turner Reservoir, posting photos on Instagram.

AR