Web fonts have been around for a few years now, as has Responsive Web Design. But there are still lots of questions about performance, usability and consistency across browsers and devices.
This course explores the world of web fonts and responsive type, what web fonts are, how they work and why you should be using them.
Jason Pamental is co-founder of h+w design, author of the ‘Responsive Typography’ book from O’Reilly, co-founded ResponsiveBootcamp.com, speaks about design at conferences around the world.
h & w design
Responsive Typography: An Introduction
00:00 - 04:40
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.
- 04:41 - 13:58 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.
- 13:59 - 22:45 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.
- 22:46 - 33:43 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.
- 33:44 - 37:43 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.
37:44 - 47:46
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.
- 47:47 - 53:50 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.
53:51 - 57:59
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.
- 58:00 - 01:12:05 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.
- 01:12:06 - 01:24:46 Q&A, Part 2 Jason continues answering audience questions.
- 00:00 - 04:40 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.
Typography Basics: Anatomy, Picking, & Pairing
- 01:24:47 - 01:30:04 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.
- 01:30:05 - 01:42:39 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.
- 01:42:40 - 02:01:21 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.
- 02:01:22 - 02:04:20 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.
- 02:04:21 - 02:16:23 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.
- 02:16:24 - 02:24:32 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
- 02:24:33 - 02:29:53 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.
- 02:29:54 - 02:34:01 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.
- 02:34:02 - 02:46:58 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.
- 02:46:59 - 03:00:36 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.
- 03:00:37 - 03:12:59 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
- 03:13:00 - 03:18:59 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.
- 03:19:00 - 03:30:19 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.
- 03:30:20 - 03:42:15 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
- 03:42:16 - 03:50:52 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.
- 03:50:53 - 03:57:00 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.
- 03:57:01 - 04:08:13 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.
- 04:08:14 - 04:19:56 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.
- 04:19:57 - 04:24:23 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
- 04:24:24 - 04:28:38 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.
- 04:28:39 - 04:39:55 Exercise 4: Perfect Page This exercise demonstrates how Jason migrated the Vanity Fair article to an impactful, responsive web page.
- 04:39:56 - 04:47:15 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.
- 04:47:16 - 05:53:24 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.
- 05:53:25 - 05:04:25 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.
- 05:04:26 - 05:08:10 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.
- 05:08:11 - 05:23:27 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.
- 05:23:28 - 05:31:33 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.
- 05:31:34 - 05:35:30 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.
05:35:31 - 05:43:44
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
- 05:43:45 - 05:53:06 Additional Resources Jason jumps around through a few online articles and other resources on type, responsive design, and information design.
- 05:53:07 - 05:59:24 Wrap-up After answering a few last questions on SVG, Jason gives some typography-related resources and book recommendations