Variable fonts
A variable font is a single font file that behaves like multiple fonts —John Hudson
a good magazine layout might have ten or even thirty font varients.
we are browbeaten into not doing that,
axis of variations - coming from the font designer, not the browser.
optical size, thicker stroke at smaller size
font optical sizing defaults to auto.
evolution of the open type specification
by and large this is supported on the OS level, Windows and Mac, for two years
standard web font for older browsers (IE11)
helped Lullabot deploy and build for state of Georgia
Reducing friction to improve the user experience.
Going from large screen to small, gets a little smaller, less detailed, and ascendors tuck in as they get closer together
Viewport sizes breaks accessibility, not having min/max, and not reacting to zoom, but you can get those benefits by mixing it
If you can replace static fonts, like if you have four, with variable ones, you can get performance experience, before even getting to the design benefits. Nielsen Norman group just switched.
Everything scales with math, instead of breakpoints.
“The role of the typographer has changed. We no longer decide; we make suggestions.” —Tim Brown
can’t control what people use, or how. Might be in Dark mode. We can have a CSS media query that responds to that!
Meet the user where they are.
.contrast p {
--text-GRAD:
}
could do panel with accessibility aids using CSS variables:
Dark Mode : off
Contrast: on
Large Text: off
Spacing: off
turn it into a system, use with multiple sites.
This is a path forward, and i can use the same code for two years. Little effort to move from one project to the next.
When doing a design system, we don’t have to stop with one layout
text direction may take a moment more, but people will figure out a title and slowing them down, getting their attention, might increase retension
text floating around the title
it takes me 5 minutes to add CSS to a blog post to adjust the shape.
Slides are already online https://noti.st/jpamental