Responsive Web Typography v2

Responsive Web Typography v2

Год выпуска: 2018
Производитель: frontendmasters
производителя: frontendmasters/courses/responsive-typography-v2/
Автор: Jason Pamental
Продолжительность: 4 hours, 24 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: In this course, Jason Pamental demonstrates type fundamentals to create better user experiences on mobile and desktop. Following along with the course, you'll learn how to implement web fonts and create a modern, scalable typographic system. Plus, Jason gives an overview of variable fonts, a type file standard developed to reduce page weight with smaller font sizes and achieve more flexible designs than ever before!
Slides - slides/frontendmasters/responsivetypography#/270

Содержание
Table of Contents
Introduction
Course Overview

00:00:00 - 00:06:31
Course Overview
Jason Pamental begins the course by going over the schedule for the day and explains the profession of being a web typographer. - static.frontendmasters/resources/2018-06-14-rwd-typography-v2/responsive-typography-slides.zip
Responsive Type Overview

00:06:32 - 00:15:20
Responsive Type Overview
Jason 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&A

00:15:21 - 00:18:43
Responsive Type Q&A
Jason 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 101

00:18:44 - 00:26:14
Typography 101
Jason defines typography, how it affects a user's experience, and why typography in the context of the web.
Anatomy of Letterforms

00:26:15 - 00:30:23
Anatomy of Letterforms
After introducing serif and sans-serif typefaces, Jason provides a methodology on how to make two typefaces work together.
Type Styles, Selection, & Pairing

00:30:24 - 00:41:29
Type Styles, Selection, & Pairing
After 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 Performance

00:41:30 - 00:46:58
Web Fonts Performance
Jason 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 Enhancement

00:46:59 - 00:53:04
Progressive Enhancement
Jason 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 Text

00:53:05 - 00:59:51
Flash of Unstyled Text
Jason reviews the Flash of Unstyled Text (FOUT) effect and how to mitigate the impact on users.
Proportion

00:59:52 - 01:03:23
Proportion
Jason reviews the significance of maintaining proportion in design when transitioning from desktop to mobile.
Letter Spacing Polish

01:03:24 - 01:09:17
Letter Spacing Polish
After 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 & Tricks

01:09:18 - 01:20:45
Web Font Tips & Tricks
Jason elaborates on several text treatment techniques and the importance of using real content in your project to ensure resiliency.
Web Fonts Demonstration

01:20:46 - 01:28:15
Web Fonts Demonstration
Jason demonstrates the benefits of planning the loading of fonts using tools such as Typekit and other services.
Responsive Variable Fonts

01:28:16 - 01:38:55
Responsive Variable Fonts
Jason 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 Support

01:38:56 - 01:43:25
Variable Fonts Browser Support
Jason discusses browsers support variable font and how to work around browsers without variable font support.
Variable Font Evolution

01:43:26 - 01:46:38
Variable Font Evolution
Jason 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 Resources

01:46:39 - 01:54:12
Variable Font Resources
Jason 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. - - axis-praxis/ - developer.microsoft/en-us/microsoft-edge/testdrive/demos/variable-fonts/ - codepen.io/jpamental/pen/MGEPEL - zeichenschatz/demos/vf/variable-web-typo/
Implementing
Loading Web Fonts

01:54:13 - 02:02:00
Loading Web Fonts
Jason talks about the first rule of web design and methods to achieve the desired aesthetic without blocking page rendering. Jason introduces code that implements these concepts, and also instructs on how to approach @font-face support versus JavaScript support by tuning for the loading process rather than assuming either is present.
Common Font Issues

02:02:01 - 02:05:58
Common Font Issues
After 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 Fonts

02:05:59 - 02:12:46
Coding Web Fonts
Jason 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.
Font Loading Stages

02:12:47 - 02:18:54
Font Loading Stages
Jason utilizes Chrome Developer Tools to show what slow loading time looks like to a user when implementing variable fonts. A question is answered regarding whether it's better to utilize a service's CSS embedding, or the JavaScript embedding feature in font hosting sites.
Changing Type Faces

02:18:55 - 02:22:35
Changing Type Faces
Jason demonstrates how to quickly import a typeface for a third-party hosting service, Google Fonts, into a website.
Typography for Reading

02:22:36 - 02:27:16
Typography for Reading
After 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 Size

02:27:17 - 02:34:16
Set Root Min & Max Font Size
Jason introduces an approach that uses custom CSS variables to linearly scale font sizes that adjust based on a minimum and maximum size.
Variable Font Demonstration

02:34:17 - 02:40:26
Variable Font Demonstration
Jason 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 Variables

02:40:27 - 02:46:48
CSS Variables
Jason introduces using CSS variables as a method to streamline potential changes in web design, such as including color inversion on a typeface.
Variable Fonts Fallback

02:46:49 - 02:55:04
Variable Fonts Fallback
Using CSS @supports at-rule, Jason shows a technique for displaying a dynamic message to a browser does not support variable fonts.
Variable Font Q&A

02:55:05 - 03:06:22
Variable Font Q&A
Jason 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 Features

03:06:23 - 03:14:54
Variable Font Features
While variable fonts are implemented in some browsers, Jason discusses additional font features that are still missing or are partially implemented.
Pulling From History

03:14:55 - 03:19:06
Pulling From History
Jason reviews optical sizing in