Fluid

Fluid design scales values without breakpoints, creating a smooth experience across viewports. It helps remove translation barriers between development and design about what certain UI elements should do across the viewport sizes—the math handles it all.

While breakpoint-heavy responsive design often creates jarring layout jumps as the viewport scales, fluid allows us to smooth out that experience. It’s an approach that allows for a more natural ebb and flow between our design foundations.

Typography is Cedar’s starting point for introducing fluid concepts, with the plan to eventually expand to spacing and more.

Fluid typography is an approach that does not rely on defined breakpoints and fixed typography values. It’s based on calculating the slope of the line between two points—in our case, our points are the minimum and maximum font size of our type. Combining the slope with the CSS clamp() function allows us to create fluid scales that will handle how copy responds to different devices and screen sizes.

This technique represents a departure in how we think about font “sizes” across screens. By creating a set of scales, we can cover the various font “sizes” we need to support. That means there isn’t an explicit size for anything between desktop and mobile because the type will fluidly scale between its upper and lower bound without any media queries.

Cedar's fluid scale

After doing the math, this is our fluid scale:

--cdr-type-scale--1: clamp(1.33rem, 0.29vw + 1.24rem, 1.6rem); 
--cdr-type-scale-0: clamp(1.6rem, 0.44vw + 1.46rem, 2rem); 
--cdr-type-scale-1: clamp(1.92rem, 0.64vw + 1.72rem, 2.5rem); 
--cdr-type-scale-2: clamp(2.3rem, 0.9vw + 2.02rem, 3.13rem); 
--cdr-type-scale-3: clamp(2.76rem, 1.25vw + 2.36rem, 3.91rem); 
--cdr-type-scale-4: clamp(3.32rem, 1.72vw + 2.77rem, 4.88rem); 
--cdr-type-scale-5: clamp(3.98rem, 2.33vw + 3.24rem, 6.1rem); 
--cdr-type-scale-6: clamp(4.78rem, 3.13vw + 3.78rem, 7.63rem); 
--cdr-type-scale-7: clamp(5.73rem, 4.17vw + 4.4rem, 9.54rem);

scale-0 is the baseline (think body copy) all the way up to scale-7 (think giant display headings). We've also added a negative scale for text treatments that might be intentionally smaller than body copy (eyebrows, kickers, etc.). We’ll adjust this scale as needed to make sure it's meeting the needs of our consumers.

Container queries

Preview

Preview features may change or have additional considerations

We've modified the fluid approach to unlock even more powerful capabilities. Cedar uses container query units (cqw) in place of the viewport width (vw) units, which are traditionally used to create the fluid slope.

This means if your fluid type is within a container, it will respond to the container's width instead. If no container is present, cqw becomes the equivalent of vw.

Our container-based fluid scale looks like this:

  --cdr-type-scale--1: clamp(1.33rem, 0.29cqw + 1.24rem, 1.6rem);
  --cdr-type-scale-0: clamp(1.6rem, 0.44cqw + 1.46rem, 2rem);
  --cdr-type-scale-1: clamp(1.92rem, 0.64cqw + 1.72rem, 2.5rem);
  --cdr-type-scale-2: clamp(2.3rem, 0.9cqw + 2.02rem, 3.13rem);
  --cdr-type-scale-3: clamp(2.76rem, 1.25cqw + 2.36rem, 3.91rem);
  --cdr-type-scale-4: clamp(3.32rem, 1.72cqw + 2.77rem, 4.88rem);
  --cdr-type-scale-5: clamp(3.98rem, 2.33cqw + 3.24rem, 6.1rem);
  --cdr-type-scale-6: clamp(4.78rem, 3.13cqw + 3.78rem, 7.63rem);
  --cdr-type-scale-7: clamp(5.73rem, 4.17cqw + 4.4rem, 9.54rem);

For easy implementation, we've created preset components for applying our various font styles across the fluid scale. These components share the CdrText API, but extend it, allowing you to select scale and weight where applicable.

See the CdrText article for more information.

Just like fluid typography, fluid space dynamically adjusts based on screen size, ensuring consistent and proportional spacing across different devices.

How it works

Fluid space uses the clamp() function in CSS, allowing for responsive spacing without the need for media queries. This approach ensures that our design maintains its integrity and aesthetics, regardless of the screen size.

CSS for our fluid space scale:

--cdr-space-scale-0: clamp(0.2rem, 0.2rem + 0.11cqi, 0.3rem);
--cdr-space-scale-1: clamp(0.3rem, 0.3rem + 0.11cqi, 0.4rem);
--cdr-space-scale-2: clamp(0.4rem, 0.4rem + 0.11cqi, 0.5rem);
--cdr-space-scale-3: clamp(0.8rem, 0.7rem + 0.22cqi, 1rem);
--cdr-space-scale-4: clamp(1.2rem, 1.1rem + 0.33cqi, 1.5rem);
--cdr-space-scale-5: clamp(1.6rem, 1.5rem + 0.44cqi, 2rem);
--cdr-space-scale-6: clamp(2.4rem, 2.2rem + 0.66cqi, 3rem);
--cdr-space-scale-7: clamp(3.2rem, 2.9rem + 0.88cqi, 4rem);
--cdr-space-scale-8: clamp(4.8rem, 4.4rem + 1.31cqi, 6rem);

/* One-up pairs */
--cdr-space-scale-0--1: clamp(0.2rem, 0.1rem + 0.223cqi, 0.4rem);
--cdr-space-scale-3--4: clamp(0.4rem, 0.2rem + 0.66cqi, 1rem);
--cdr-space-scale-3--5: clamp(0.8rem, 0.1404rem + 1.21cqi, 1.6rem);