This course has been updated! We now recommend you take the Responsive Web Typography v2 course.
Table of Contents
Responsive Typography: An Introduction
Course Introduction
Jason Pamental gives a little background about what he will be covering in this course. He also provides a link to the Github repository that contains course files and sample code.
Art & Technology
Jason will be discussing how type can be a major supporting element with our design efforts on the web. He will be defining what Responsive Typography really means and how to implement it correctly. It’s a combination of art and technology.
A Make-Believe Place
For many years, we have operated under assumptions of optimal screen resolutions and pixel-perfect designs. Freeing ourselves from these misconceptions is the first step in understanding what we can and can’t control. Responsive Typography is about Performance, Progressive Enhancement, Proportion, and Polish.
Performance
Each font has a performance cost. You want to make sure you are only loading what you need. Proper implementation and performance will help avoid a FOUT (Flash of Unstyled Text). Jason explains how the Google Web Font loader can alleviate issues.
Progressive Enhancement
Jason walks through a code snippet that uses the Google Web Font loader. He shows that while there’s a subtle change in the look of the page when the font loads, the overall experience is much better to the user. The key to the Google Web Font loader is setting “async” equal to “true” to unblock the loading of the page.
Proportion
On the desktop, header copy is typically 2x or 3x the size of body copy. This doesn’t translate well to mobile, though. Smaller screens require more subtle differences in proportion. To illustrate this, Jason show a table he created as as starting point for selecting font sizes.
Polish
Opentype fonts provide extra features that are available in the browser. For example, turning on ligatures adds a nice finishing effect to headings or other prominent text. Some features do add extra file size or download time so web designers still want to keep performance in mind when adding polish.
Responsive Web Typography Review
Jason reviews how Performance, Progressive Enhancement, Proportion and Polish help define Responsive Typography. He also talks a little about this book which is available through O’Reilly.
Q&A, Part 1
Jason catches up on a large number of audience questions related to web font issues, web font licensing, and third-part web font vendors.
Q&A, Part 2
Jason continues answering audience questions.
Typography Basics: Anatomy, Picking, & Pairing
What is Typography
Typography is the process of selecting a typeface for a design. More specifically, it’s choosing a typeface that best reflects your client or project. Jason discusses these concepts and gives some examples of how to select an appropriate typeface.
Anatomy
Serifs, crossbars, stems, and eyes are just a few of the many parts of a typeface. Jason walks through the anatomy of a typeface and discusses how small details can make a big difference when it comes to feel and readability. He also explains a few of the different classifications outside of serif and sans-serif.
Type Selection
My factors can influence the selection of a typeface. These may include tone, history, origin, and intended use. Jason demonstrates how he selects a typeface and how he searches for related typefaces based on keywords or designers.
Type Pairing
Type pairing is the process of matching two different typefaces that will be used together. This is useful when selecting fallback fonts. When pairing, you may match qualities (i.e. oval vs. round) or choose based on related histories or a common designer.
Print & Pixel Parity
Print typefaces are becoming more available on as web fonts. Also, many of the print techniques are possible with CSS. Jason talks about this trend and answers a number of audience questions before moving into a demonstration.
From Paper to Pixels Teaser
Jason takes a look at how to transition print typography to the web. He stresses that OpenType features bring a little more finesse and have more options for fallback. His inspiration is the layout of an article in Vanity Fair. This example will be used later in the exercises.
Performance & Progressive Enhancement: Getting it On-screen & Fast
Don’t Block Page Render
Progressive enhancement is the process of developing a great baseline experience for your users and building it up as they have additional capabilities. Enhancements to the design should follow the most important rule: Don’t block page render.
Performance is Design
Jason reviews a few of the performance points he discussed earlier. Being mindful of the size of your typeface library will lead to better performance. Choose our typefaces wisely and ensure you are loading them asynchronously so they do not block page rendering. Jason also gives a few additional progressive enhancement tips.
Exercise 1: Performance Progression
In this exercise, Jason will be covering how to incorporate web fonts with progressive enhancement on the webpage. He begins by walking through the performance_start.html code then moves to show the final version. All code for this exercise is located in the 01_PerformanceProgression folder.
Exercise 1: Testing
Now that the web fonts are included correctly, Jason demonstrates how he tests the layout and makes corrections between the fallback font and the desired web font. He uses toggle buttons to turn on and off the web font and toggle his corrections.
Exercise 1 Questions
Jason answers a few audience questions about Exercise 1. He also shows what parts of the final code are the toggle buttons he uses for testing the web fonts so you can pull that code in and incorporate it into you own projects.
Proportion: One Size Won’t Rule Them All
A Measure of Improvement
Jason reviews the importance of proportion in responsive web typography. Adjusting the font sizes and line heights help maintain the meaning and relationships between headers, body copy, and other type styles.
Exercise 2: Proportion
Building off the finished file for Exercise 1, this exercise adds media queries which will allow the text to proportionately scale as the viewport changes size.
Exercise 2 Questions
Jason spends some time answering audience questions about how to know what the optimal font size may be for a specific font. He also talks about using EMs in media queries.
Polish: Sweating the Small Stuff
Design is the Details
Jason begins with a brief overview of the polish that can be added to web typefaces. For example, when using OpenType fonts, ligatures, fractions, kerning, etc. are all features that enhance the look and have reliable fallback options. All these details make good reading experiences great.
A Little Abundance is a Lot
Jason demonstrates how modifying a link’s underline can add a tremendous amount of design polish. The trick uses a background gradient, which if unsupported, fallback gracefully to a regular underline.
Exercise 3: Polish
This exercise focuses on adding design details to the type from the previous exercises. Jason focuses on OpenType features like ligatures and kerning adjustments. He also demonstrates how to create columns and block quote styles.
Exercise 3, continued
Jason continues his explanation of Exercise 3 by adding initial caps to the be beginning of the first paragraph. He also answers a few audience questions and debugs a couple other code issues.
Hypenation
Before moving on, Jason discusses hyphenation and justification of text with CSS. He also answers a few last audience questions about font rendering differences between browsers and operating systems.
A Perfect Page
Putting It All Together
Jason circles back to the Vanity Fair article and talks about designing the perfect page. He first shows how Vanity Fair transitioned their print article to the web. However, there is room for improvement.
Exercise 4: Perfect Page
This exercise demonstrates how Jason migrated the Vanity Fair article to an impactful, responsive web page.
Exercise 4 Questions
Jason answers some audience questions regarding FOUTs and some issues at specific browsers sizes where text stacks or doesn’t wrap in an ideal fashion.
Q&A
Columns
Now that Jason has finished the formal content of the course, he moves on to a Q&A session with the audience. First, he talks about how and why he designed the columns to include a different margin than the overall article container.
High-Resolution Displays, Grids Layouts, & Links
Jason addresses questions about handing high-resolution displays and how he’d modify the design. He also talks briefly about the use of grids and how he handles the look and feel of links.
Designer-Developer Communication
Jason talks about how designers and developers both need to understand the implementation of fonts and responsive layouts on the web to better grow communication between team members.
Audience Stories
A few audience members describe experiences working with designers and difficulties they’ve encountered when moving designs to the web. Jason shares his insights and gives suggestions on ways to make the workflow easier.
Fit Text
Jason gives some of his opinions on libraries like FitText.js and how scaling fonts or using viewport units can lead to issues. He mentions there are times they work great, but he generally stays ways from them.
Responsive Design Costs
Jason shares his thoughts on the cost of responsive designs. While designing a site responsively is more costly, there is added value with justifies that cost.
Lost World’s Fair
The Lost World’s Fair website was created a few years ago to showcase web fonts. Jason walks through a few of the creative designs on the site. He also talks a little about readmill.com
Additional Resources
Jason jumps around through a few online articles and other resources on type, responsive design, and information design.
Wrap-up
After answering a few last questions on SVG, Jason gives some typography-related resources and book recommendations