This course has been updated! We now recommend you take the Responsive Web Typography v2 course.
Table of Contents
Responsive Typography: An Introduction
Course IntroductionJason 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 & TechnologyJason 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 PlaceFor 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.
PerformanceEach 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 EnhancementJason 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.
ProportionOn 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.
PolishOpentype 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 ReviewJason 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 1Jason 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 2Jason continues answering audience questions.
Typography Basics: Anatomy, Picking, & Pairing
What is TypographyTypography 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.
AnatomySerifs, 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 SelectionMy 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 PairingType 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 ParityPrint 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 TeaserJason 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 RenderProgressive 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 DesignJason 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 ProgressionIn 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: TestingNow 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 QuestionsJason 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 ImprovementJason 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: ProportionBuilding 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 QuestionsJason 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 DetailsJason 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 LotJason 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: PolishThis 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, continuedJason 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.
HypenationBefore 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 TogetherJason 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 PageThis exercise demonstrates how Jason migrated the Vanity Fair article to an impactful, responsive web page.
Exercise 4 QuestionsJason answers some audience questions regarding FOUTs and some issues at specific browsers sizes where text stacks or doesn’t wrap in an ideal fashion.
ColumnsNow 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, & LinksJason 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 CommunicationJason 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 StoriesA 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 TextJason 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 CostsJason 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 FairThe 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 ResourcesJason jumps around through a few online articles and other resources on type, responsive design, and information design.
Wrap-upAfter answering a few last questions on SVG, Jason gives some typography-related resources and book recommendations