Responsive Typography: The Foundation of Great Performance and Design

Jason Pamental (Fresh Tilled Soil)
9:00am–10:30am Monday, 04/20/2015
Interface and experience design
Location: Salon 12/13/14/15
Average rating: ***..
(3.61, 18 ratings)
Slides:   external link

THIS TUTORIAL HAS REQUIREMENTS AND INSTRUCTIONS LISTED BELOW

Typography is the single most present element of your design when screen size changes, and has the greatest influence on readability and retention. Learn how to use web fonts to amplify the message and voice of your design without sacrificing performance, how to scale your typography based on screen size, and how little details layered together make a good experience become a great one.

This workshop will cover a number of topics, with exercises to work through each one. We’ll work through how to implement web fonts properly for best performance and progressive enhancement, whether self-hosting fonts or using a service. We’ll also look at how screen size impacts typographic scale, with sample code that includes a modular scale to start with. Finally we’ll cover a number of ideas to leverage such as OpenType Features, CSS equivalents of typographic techniques, and troubleshooting tips all pulled together in a sample redesign of a magazine layout and typographic system.

TUTORIAL REQUIREMENTS AND INSTRUCTIONS FOR ATTENDEES

Attendees should have basic familiarity with HTML and CSS, but do not need to be experts.

Likewise it is not required that they have in-depth knowledge of typography, but basic knowledge of design and use of type is helpful.

The workshop is geared towards helping those who know typography bring that knowledge to bear on the web, and to help those who may know HTML and CSS but want to learn how to use type more effectively.

Attendees should bring a laptop with one or more web browser, their favorite code editor, and for best results should have a web server installed (Mac users often use MAMP; there are plenty of alternatives for Windows and *nix users). All workshop code is posted on Github.

Photo of Jason Pamental

Jason Pamental

Fresh Tilled Soil

Jason Pamental is the Lead UX Strategist at Fresh Tilled Soil, author of Responsive Typography from O’Reilly, overall web & typography nerd who specializes in being a generalist. He’s worked on the web since 1994 in a range of capacities, having led creative and technical efforts for major universities, NFL and America’s Cup teams, Fortune 25 corporations and others. He also teachers workshops on Responsive Web Design and Typography, speaks about design at conferences around the world (or pretty much anywhere people will listen), and follows @aProperCollie around Turner Reservoir in the morning, posting photos on Instagram.

Comments on this page are now closed.

Comments

Picture of Jason Pamental
Jason Pamental
04/21/2015 4:32pm PDT

Slides are posted here: http://slideshare.net/jpamental and code from the day is at http://github.com/jpamental/rwt-fluent

Krishna Santhanam
04/21/2015 10:37am PDT

Hi Jason:

Could you upload the slides for this presentation? Thanks!

Picture of Jason Pamental
Jason Pamental
04/20/2015 9:10am PDT

Hi Simon – we just spoke about this but for the benefit of anyone else finding your question I wanted to summarize. In general I think you get better results by leveraging OpenType features such as kerning, ligatures, fractions. Support is pretty broad (any browser that supports the WOFF format) and rendering is quite good. I don’t think font rendering within SVG is quite as good overall, even if you can then reach in and tweak things like letterspacing. It’s just not quite as good as the general font handing by the browser.

Simon Tsvilik
04/20/2015 3:01am PDT

Does the use of SVG container ever becomes a consideration to gain better control over font typography?