Did you know TNW Conference has a track fully dedicated to exploring new design trends this year.

I’ve developed a rather love-hate relationship with these little gremlins, certainly from an engineering point of view.

On the engineering side, advancements in CSS have given us a raft of novel methods for measuring the virtual sizes and distances of web elements.

Strangely, the world of design tools has been a little slow to catch up.

As someone who sits on the fence, dipping and diving into design and engineering, I’ve noticed in recent years that a delta has appeared.

No longer do the pixel measures we use in the design process always map to those we use in the engineering process.

A child of width:100% will span the full width of the parent.

With a parent whose font size is 16px , a child can obtain a 14px by setting its font size to 87.5% .

Ephemeral units (EMs) and Root Ephemeral units (REMs) are relative measures that take their base value from the font-size setting.

Like percentages, EMs are locked to their parent.

REMs, on the other hand, refers to the base font size we apply to the root of the document.

Assuming the font size of the parent is set to 16px, then an icon height of 1em will match the height of the text.

Should you ever need to amend the typography and spacing stacks at a later date, you can do so by simply tweaking the root font size.

Sometimes, it is helpful to know the height or width of the viewport (the browser screen size).

CSS gives us two simple measures, the viewport width (VW) and its height (VH).

The value we enter is taken as a percentage of either the width or height, such that 75vh represents 75% of the viewport height.

Quite simply, they are used as part of the wrapping (parent) container to define the segmentation of the interior space.

As someone who has closely followed the evolution of the internet, I’m so encouraged by the tools and technologies we have available to us today?

I’ve always believed that the best designs are those that really take into account the tools and technologies that enable them.

If you are new to the world of engineering, I really hope that this article will inspire you to design ever-more immersive experiences with the confidence that CSS has your back!