Revisiting Fluid Type 관련

CSS > Article(s)

---

Article(s)

• What we cover:

---

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 ontinue 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

---

With special guest Alan Stearns

Reimagining Fluid Typography

---

Are we responding to the right inputs?

Revisiting Fluid Type

---

With special guest Richard Rutter

4. Designing for User Font-size and Zoom – Using modern CSS units and math functions

Visualizing Responsive Typography

---

What do all the numbers in our clamp() do?

The Best CSS Unit Might Be a Combination

---

We don't have to choose between px and rem for spacing

Take Command with Invokers

---

With special guest Luke Warlow

Info

Check out our Winging It conversations about design, frontend, and backend development.

Winging It episode 15: Relative Units & Typography

Subscribe to Channel

Winging It

Join OddBird at the cutting edge of front-end web development for discussions, demos, and interviews on topics ranging from CSS, HTML, and JavaScript to UX design and team process. Winging It streams live the third Thursday of each month. Chat with us about the show on Mastodon (front-end.social/@OddBird) or drop us a line at birds@oddbird.net. And as always, if you need custom web application development or a refactor – OddBird is here to help. 🫶🏼🐦

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 em represent?
• 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

In defence of fluid typography

This is a response to Miriam Suzanne’s excellent post on Reimagining Fluid Typography. She poses lots of really interesting questions, some of which I disagree with, but most of all they got me thinking… and writing.

• 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

Fluid responsive design

Utopia / Fluid type + space calculator | Figma

Utopia is a systematic approach to fluid type and space design. This plugin generates named type styles and space components from a handful of editable values. This kickstarts your design project with a palette of related building blocks for use at your minimum and maximum viewport widths. The p...

• Use of ch unit considered inappropriate (in certain circumstances) by Richard Rutter

Zoom, zoom, and zoom

---

The three types of browser (and CSS!) magnification

• Support Logical Shorthands in CSS by Miriam Suzanne

Revisiting Fluid Type

---

With special guest Richard Rutter