Add Character to Your Site
summary
Shows practical techniques for enriching a website’s typography: building a font that generates ~450 composed glyphs from 8 base glyphs, creating a custom ligature/logo by naming glyphs in Glyphs and enabling it with CSS font-feature-settings, and converting Figma outlines to an SVG glyph to import into a font. Also covers using SVG/colored glyphs and font palettes (noting Safari supports palettes, Firefox doesn’t yet, Chrome soon) and animating variable-font axes (serif, weight, width) via CSS font-variation-settings so one variable font file can replace many styles and support animated glyphs.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 0:31What is a glyph?
- 6:15Contextual ligatures
- 8:07Specific ligatures
- 12:02Stylistic set
- 20:46Variation axis
related talks
29mThe State of WebFonts
13mBest practices for migrating to variable fonts
40mUnlock the Fun!
21mCreate expressive and readable typography with variable fonts
20mDynamic Typographic Systems with Variable Fonts
22mDesigning typefaces with Figma components and plugins
42mTypography for Frontends
20mTypography and gradients deep dive and demos