Typography
Everything you need to master web typography
Fundamentals
Font metrics, optical sizing, and text box adjustments
Understanding cap-size based measurements, CSS font metrics, line-height, and vertical-align. Mastering optical sizing and the upcoming CSS text-box-trim property for precise text box adjustments.
Variable Fonts
Usage, best practices, and inheritance solutions
Mastering variable fonts with CSS properties like font-optical-size, font-stretch, and font-variation-settings. Learn how to fix the inheritance problem using CSS variables to maintain weight, width, and other axes across nested elements.
Opentype
Layout features and CSS properties
Exploring required layout features like ccmp, locl, mark, and mkmk. Using font-variant shorthand and CSS properties for ligatures, numeric variants, caps, and kerning with practical code examples.
Performance
Font loading strategies and optimization
Optimize font loading with FOIT/FOUT management, caching strategies, and best practices from web.dev. Learn to inline critical fonts for LCP/FCP and use preload effectively.
Subsetting
Content-based and alphabetical strategies
Creating efficient font subsets based on content or character sets. Removing unnecessary layout features, hinting, and using unicode-range interchange. Tools like glyphhanger, subfont, and pyftsubset for aggressive subsetting.