Responsive and fluid typography with Baseline CSS features  |  Articles  |  web.dev

Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind.

web.dev

#Development #Techniques
Com­pressed flu­id typography · Fluid type control with a weighted CSS scale https://ilo.im/167n72

_____
#CssCalc #FluidType #Typography #Accessibility #FluidDesign #Design #WebDesign #WebDev #Frontend #CSS

Compressed Fluid Typography · Matthias Ott

Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.

Matthias Ott – User Experience Designer
Compressed Fluid Typography · Matthias Ott

Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.

Matthias Ott – User Experience Designer

#Development #Approaches
Fluid headings with CSS · How to uniformly scale headings for smaller screens https://ilo.im/167kv6

_____
#CssClamp #Headlines #Typography #Accessibility #WCAG #FluidDesign #WebDesign #WebDev #Frontend #CSS

Fluid Headings

Uniformly reducing headings for smaller screens.

#Development #Explainers
Visualizing responsive typography · What do all the numbers in our clamp() do? https://ilo.im/166eyc

_____
#Typography #Calculations #CssClamp #Utopia #Design #WebDesign #FluidDesign #Accessibility #Frontend #CSS

Visualizing Responsive Typography

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

OddBird

#Development #Talks
Smart layouts · Ahmad Shadeed‘s inspiring talk at CSS Day 2025 https://ilo.im/166baj

_____
#ModernCSS #Layouts #Browser #Figma #Design #FluidDesign #WebDesign #WebDev #Frontend #CSS

Smart Layouts (CSS Day - 06.06.2025) - Video & Slides

I spoke at CSS Day 2025 in Amsterdam about Smart Layouts.

#Development #Techniques
Enhancement of a simple layout · Smarter layout flow using CSS subgrid https://ilo.im/165g9x

_____
#Layout #Columns #Browser #FluidDesign #WebDesign #WebDev #Frontend #CSS #CssGrid #CssSubgrid

A handy use of subgrid to enhance a simple layout

subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.

Piccalilli

#Development #Approaches
Preserving text size when scaling SVGs · A flexible solution that doesn’t require much code https://ilo.im/164fgk

_____
#Scaling #SVG #Text #Typography #FluidDesign #WebDesign #WebDev #Frontend #CSS #JavaScript

Preserving text size when scaling SVGs · Muffin Man

If you ever needed to keep your SVG text size consistent regardless of scale, this approach should do the trick. It's simple, flexible, and doesn't require much code.

Muffin Man

#Design #Debates
In defense of fluid typography · A discussion on reimagining fluid typography https://ilo.im/162w48

_____
#Font #Typography #Accessibility #UserPreferences #Browser #FluidDesign #WebDesign #WebDev #Frontend #CSS

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.