InautiloJan 9

#Development #Guides
Baseline typography · Responsive and fluid typography with Baseline CSS https://ilo.im/169pb2

_____
#ModernCSS #Baseline #Typography #Viewport #WebDesign #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

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
InautiloOct 15

#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
Frontend DogmaOct 15

Compressed Fluid Typography, by @matthiasott:

https://matthiasott.com/notes/compressed-fluid-typography

#typography #css #fluiddesign

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
InautiloOct 13

#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.

InautiloAug 27

#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
InautiloAug 22

#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.

InautiloJul 17, 2025

#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
InautiloJun 7, 2025

#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
ArtgorithmeMar 26, 2025
Crimson Currents.
#ArtDigital #AbstractArt #ContemporaryArt #FluidDesign #ColorFlow #ModernArt #GeometricAbstraction #CreativeExpression #VisualPoetry #Textures #DigitalArt #AiArt #Midjourney
InautiloMar 24, 2025

#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.