Container queries are widely available!
Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!
Winging It
post type
Revisiting Fluid Type
With special guest Richard Rutter
Miriam’s been asking questions about fluid typography, and how a website design should plan for (and respond to) user preferences. And we’re not the only ones thinking about it! This month we continue the conversation with Richard Rutter from Clearleft, the experts behind excellent resources like Utopia.fyi and WebTypography.net.
This post is part of a series on revisiting fluid typography:
- Relative Units & Typography
- Reimagining Fluid Typography
- Revisiting Fluid Type
- Designing for User Font-size and Zoom
Check out our Winging It conversations about design, frontend, and backend development.
Winging It episode 15: Relative Units & Typography
What we cover:
Copy permalink to “What we cover:”- How do we balance author and user intents?
- Adrian Roselli’s “ultimate ideal” base font-size
- Possible solutions/ideas to achieve desired font-size (per site)
- What does an
emrepresent? - Common approach to fluid type with
vi&clamp() - Utopia helps, and catches potential issues with
vi - How can designers work with fluid typography in traditional design tools?
Links:
Copy permalink to “Links:”- Reimagining Fluid Typography by Miriam Suzanne
- In defence of fluid typography by Richard Rutter
- Winging It 15 with Alan Stearns
- The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet by Adrian Roselli
- Utopia.fyi
- Utopia Figma Plugin
- Use of ch unit considered inappropriate (in certain circumstances) by Richard Rutter
- Zoom, zoom, and zoom by Miriam Suzanne
- Support Logical Shorthands in CSS by Miriam Suzanne
Recent Episodes
Winging It post typeAvoid this mistake when anchor positioning a popover!
Are you positioning a popover with CSS anchor positioning and
position-area? Make sure to override the default margins on the popover.
Winging It post typeThere’s a new stretch keyword in CSS?
There’s a new stretch keyword that we can use for CSS
heightandwidthproperties. But how is that different from100%? And how is that different from100vhwhen we want a full-height layout?
