Designing With Relationships: Understanding Relative Units in CSS

At some point, fixed values start to feel… limiting.

You set a size.

It looks right on your screen.

But on a smaller device, it breaks.

On a larger screen, it feels off.

Nothing is technically wrong.

But something isn’t adapting.

And that’s where the idea of relative units begins to matter.

When Size Stops Being Absolute

It’s easy to think of CSS values as fixed.

font-size: 16px;

A clear number. A clear result.

But that clarity comes with a cost.

Because 16 pixels:

• doesn’t know about screen size
• doesn’t adjust to user preferences
• doesn’t scale with surrounding elements

It’s static.

And the web is not.

A Shift From Values to Relationships

Relative units change the question.

Instead of asking:

“How big is this element?”

You start asking:

“How big is this compared to something else?”

That “something else” becomes the reference.

And that’s where flexibility begins.

The Many Ways to Be Relative

Different units answer that question differently.

Each one chooses its own reference point.

Relative to the Parent

.child {
  font-size: 2em;
}

Here, the size depends on the parent.

It creates a chain.

Each level influences the next.

And that chain can grow quickly—sometimes more than expected.

Relative to the Root

h1 {
  font-size: 2rem;
}

Now the reference is stable.

The root of the document.

No matter where the element lives, the relationship stays consistent.

This makes scaling predictable.

And predictability makes systems easier to manage.

Relative to the Container

.child {
  width: 50%;
}

Now the size depends on space.

Not text, not hierarchy—but layout.

It responds to its surroundings.

Relative to the Screen

height: 100vh;
width: 50vw;

Now the reference becomes the viewport.

The size of the screen itself.

The layout begins to respond to the device, not just the structure.

Why This Changes Everything

Relative units don’t just solve responsiveness.

They change how you think about design.

Instead of assigning fixed values…

you define relationships.

And relationships adapt.

When the root font size changes, everything scales.

When the container resizes, elements adjust.

When the screen shifts, layouts respond.

Nothing is hardcoded.

Everything is connected.

The Tradeoff Between Flexibility and Control

But flexibility introduces complexity.

Some units, like em, can cascade in ways that are hard to predict.

A small change at the top can multiply as it moves down.

Others, like rem, stabilize that behavior by anchoring everything to a single reference.

So choosing a unit is not just about syntax.

It’s about how much control you want—and where.

A Subtle Pattern in Modern CSS

Over time, a pattern has emerged.

Typography often uses rem.

Because consistency matters more than context.

Layout often uses %, vw, or vh.

Because space needs to adapt.

Each unit finds its role.

Not by rule—

but by how it behaves.

A Different Way to See CSS

Relative units reveal something deeper.

CSS is not just about defining sizes.

It’s about defining relationships between elements, context, and environment.

And once you start thinking that way…

you stop designing fixed layouts.

You start designing systems that respond.

A Final Thought

The web doesn’t exist in one size.

It lives across screens, devices, and preferences.

So the question isn’t:

“How big should this be?”

But:

“How should this adapt?”

And relative units are one of the ways CSS answers that question.