Responsive Web Typography v2
Table of Contents
Course OverviewJason Pamental begins the course by going over the schedule for the day and explains the profession of being a web typographer.
Responsive Type OverviewJason reviews the course agenda, including the basics of typography, an introduction to responsive typography, variable fonts, and others. Then Jason also talks about how performance, progressivity, proportion, and polish helps aid the user experience.
Responsive Type Q&AJason answers a question figuring out how to know where the breakpoint is when resizing the viewport to best impact user experience regarding web typography.
Typography 101Jason defines typography, how it affects a user's experience, and why typography in the context of the web.
Anatomy of LetterformsAfter introducing serif and sans-serif typefaces, Jason provides a methodology on how to make two typefaces work together.
Type Styles, Selection, & PairingAfter introducing several different type styles and their applications, Jason gives several examples of how the typeface can evoke a time or a particular place. Then Jason demonstrates several typefaces that work well together visually and discusses methods on how to choose pairings.
Web Fonts PerformanceJason dives deeper into the four tenants of responsive typography: performance, progressive, proportion, and polish. Then Jason focuses on performance, as well as why a designer needs to understand how fonts affect the experience of the user.
Progressive EnhancementJason defines progressive enhancement as a conscious decision to ensure that the webpage works at a baseline level even if other aspects of the user experience fail.
Flash of Unstyled TextJason reviews the Flash of Unstyled Text (FOUT) effect and how to mitigate the impact on users.
ProportionJason reviews the significance of maintaining proportion in design when transitioning from desktop to mobile.
Letter Spacing PolishAfter describing the finer points of typography, which include kerning and ligatures, Jason reviews plug-ins that may be used to enhance the user experience.
Web Font Tips & TricksJason elaborates on several text treatment techniques and the importance of using real content in your project to ensure resiliency.
Web Fonts DemonstrationJason demonstrates the benefits of planning the loading of fonts using tools such as Typekit and other services.
Responsive Variable FontsJason introduces variable fonts, which is when a single font file acts can be used to display multiple fonts, and how they are helpful in responsive web design.
Variable Fonts Browser SupportJason discusses browsers support variable font and how to work around browsers without variable font support.
Variable Font EvolutionJason introduces the W3C Font 3 & 4 specifications and instructs on how to be involved in the extensive Github discussion on how the web should work.
Variable Font ResourcesJason introduces several resources for diving deeper into variable fonts, including Axis-Praxis, which allows the user to play with the axes of variation, and open type features available in variable fonts. Then Jason reviews websites dedicated to education on variable fonts and addresses the state of open source variable fonts.
Common Font IssuesAfter reviewing areas where designs can fail when sizing headings of content on mobile, Jason discusses an example on how to best optimize for the smaller screen while preserving meaning using proportion and typography.
Coding Web FontsJason inspects the code for a web page that still functions, even when the CSS fails. Then Jason examines use cases for @font-face, including demonstrating how to keep a browser from synthesizing an italic or bold typeface.
Changing Type FacesJason demonstrates how to quickly import a typeface for a third-party hosting service, Google Fonts, into a website.
Typography for ReadingAfter showing how to set responsive font sizes for different breakpoints with media queries, Jason explains how a variant font was imported, the font-variation-settings, and the rules for defining custom axes.
Set Root Min & Max Font SizeJason introduces an approach that uses custom CSS variables to linearly scale font sizes that adjust based on a minimum and maximum size.
Variable Font DemonstrationJason reviews examples of a page design that experiments with a single variable font's different font weights and as well as font size scaling.
CSS VariablesJason introduces using CSS variables as a method to streamline potential changes in web design, such as including color inversion on a typeface.
Variable Fonts FallbackUsing CSS @supports at-rule, Jason shows a technique for displaying a dynamic message to a browser does not support variable fonts.
Variable Font Q&AJason answers a question from a student about Tim Brown's scalable equation based on the maximum and minimum font sizes on the page.
Future of Web Typography
Variable Font FeaturesWhile variable fonts are implemented in some browsers, Jason discusses additional font features that are still missing or are partially implemented.
Pulling From HistoryJason reviews optical sizing in typefaces through the context of print designs of the past.
OpenType FeaturesAfter introducing additional OpenType features, including ligatures, swashes, and kerning, Jason discusses how to create a graceful fallback and overall great experience in the typography should a type feature fail to display.
Text-First DesignSince the paragraph is a central element of web page design for a media or text-based site, Jason reviews how specific CSS selectors can be used to layer different design treatments onto a paragraph.
Adding Font FeaturesJason demonstrates polishing techniques to improve a page's web typography such as setting the first line of text in a paragraph, styling an initial cap, adding ligatures and kerning, and more.
Editorial DesignJason reviews how the state of editorial design and art direction on the web might be better with different approaches by taking better advantage of web typography.
Editorial Design with Variable FontsJason showcases a design example that uses principles from magazines to create magazine-quality aesthetic to a website by using layering and scaling to create a sustainable editorial effect.
Font Variation DemosJason reviews several websites that allow for experimenting with the capabilities and benefits of variable fonts.
Editorial Design CodeWhile reviewing an outdoor magazine design layout, Jason demonstrates the use of the CSS grid, variable fonts, shapes editor, and grid developer tools.
Variable Font CodePen DemosJason wraps up the course by reviewing Codepen demos that showcase variable font capabilities.