InautiloMay 18

#Development #Techniques
Better fluid sizing with CSS round() · Using round() to make fluid sizing more predictable https://ilo.im/16d0r2

_____
#ModernCSS #Layouts #Typography #Design #WebDesign #FluidDesign #WebDev #Frontend #CSS #CssClamp

Better fluid sizing with round()

Using the round() function to get a more predictable fluid sizing.

InautiloApr 16

#Development #Approaches
Building a UI without breakpoints · Moving to fluid CSS components for the modern web https://ilo.im/16c7es

_____
#Components #CssGrid #CssFlex #ContainerQueries #MediaQueries #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

Building a UI Without Breakpoints – Frontend Masters Blog

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

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

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

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

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

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

#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