In general we have assumed the adaptive development of a web with dynamic sizes. The components do not look the same on a mobile device than on a desktop monitor and we rely on the different tools provided by CSS to make it happen. For example by using media-queries and indicating that at a screen size of X,a text will have a size and, at a screen size of 2X,will have a different size. However, we can make our content adapt dynamically as the screen size increases or decreases without having to add jumps.

In the following examples I will focus on text, but the techniques I will explain can be applied to all types of elements.

Basic concepts of dynamic sizing

I think it is advisable to review some of the concepts that we are going to use in the development of our dynamic texts. These are, on the one hand, the CSS relative length units and, on the other hand, a few range functions.

Relative length units

CSS has two types of length units: absolute and relative. In the first case, the absolute units of length, The size will be immutable to any change. The most common example of unit absolute is the pixel (px) but there are other less common but equally valid ones, such as points (pt) o centimeters (cm).

In this article we are going to focus on the relative units of length. By relative we mean that they are mutable and will scale according to several factors depending on the type of measurement used and certain properties that, being at higher hierarchy levels, will affect our relative unit of measurement. In our case we are going to focus mainly on em, rem y vw, I think it is worth mentioning that there are many more, each one more interesting and their use should not be discarded.

EM (Font size of father)

EM uses as reference the font-size of the first parent that had it. Let's see an example:

.parent
  font-size: 20px

.child
  font-size: 3em // Equivalent to 60px

<div class="parent">
  <p class="child">
    Hello world!
  </p>
</div>

In this case the class .child has a parent with the font-size of 20px so we would multiply its font-size by 3 and we would obtain a result of 60px at font-size of the class .child.

Note that the font-size of a class itself affects its other properties if it has relative values using em.

.child
  font-size: 15px
  width: 2em // Equivalent to 30px

Knowing this we can easily imagine how we can scale the content of our components by modifying a single property.

REM (Font size of root element)

Properties with values rem take into account the font-size of the component root. This means that they will only be affected and scaled if it changes its font-size. Let's see a new example.

:root
  font-size: 20px
  @media only screen and (min-width: 1024px)
    font-size: 30px

.component
  font-size: 2rem // Equivalent to 40px and 60px with the media query at 1024px

Taking into account we can get an idea of the power of its use. We can alter the size of all the content of our website from a single point.

VW (1% of horizontal viewport size)

In the case of VW we use the horizontal size of the screen of our device as a reference. Therefore 100vw would be equal to 100% of the screen width. If for example the screen measured 1024px width and our measurement is 25vw,the result would be 256px.

Range functions

In this article we are going to focus on 3 functions that CSS offers us, these are min(), max() y clamp(). They are functions that receive a variable range and a minimum, a maximum or both depending on the case.

max() function

The function max() receives as first parameter the variable scaling range we need and as second parameter the minimum value we do not want it to go below.

Let's take an example:

h1
  font-size: max(2vw, 30px)

If we had a screen of 1000px in size 2vw would be equivalent to 20px but as there is a minimum of 30px this would be the font size. If it is larger than 30px would scale according to the calculation of 2vw.

min() function

To avoid being redundant, we will say that the operation of the min() is equal to the function  max() but the second parameter that the function receives is the maximum value that we do not want to exceed.

clamp() function

The function clamp() receives three parameters. The first is the minimum value we do not want it to go below; the second is the variable scaling range; the third is the maximum value we do not want it to exceed.

Let's look at an example:

h1
  font-size: clamp(30px, 2vw, 60px)

If we had a screen of 1000px as in the example of the function max() operation would be identical, the minimum size would never fall below 30px.

Let's take another case in which we have a screen 4K from 3840px in which 2vw would be equivalent to 76.8px. In this case the maximum size of the font-size would be 60px since it is the maximum of the function clamp().

A brief recapitulation

At this point we already have all the tools to dynamically scale our texts. We will use relative units of length to make the texts scale and we will use the range functions so that this scaling does not exceed the desired minimum or maximum.

4K support

Theoretically, with what we have learned we can already support 4K. Let's take again one of the examples seen above.

h1
  font-size: max(2vw, 30px)

Let's see what size the font will be at various breakpoints.

768px screen

2vw would be equivalent to 15,36px. Since the minimum that our function allows us are 30px, the font-size will be 30px.

1024px screen

2vw would be equivalent to 20,48px. Since the minimum that our function allows us are 30px, the font-size will be 30px.

1920px screen

2vw would be equivalent to 38,4px. Since 38,4px > 30px the font-size will be 38,4px.

3840px display

2vw would be equivalent to 76,8px. Since 76,8px > 30px the font-size will be 76,8px.

To infinity and beyond

Given that we do not have a maximum, our text will scale to infinity regardless of the screen size. Theoretically we are already supporting 4K and even at higher resolutions but we will not always be lucky enough to have it fit a design and scale while maintaining the desired style size.

A new world of possibilities

At this point, there are several ways to make our content scale dynamically. We could for example use the function clamp() using relative length units for the parameters min y max.

.parent
  font-size: 2vw

h1
  font-size: clamp(1rem, 2em, 6rem)

<div class="parent">
  <h1>Hello world!</h1>
</div>

Let's see how our H1 will behave in the above example.

Let's start with the minimum text size. This will be 16px, This is due to the fact that the minimum size is of one 1rem and we will assume that the font-size browser default is 16px although, although it is the most common, it may vary depending on the browser. This size will remain unchanged until the screen size is equal to or greater than 401px such that 2vw from 401px is equal to 8,02px y 2em from 8,02px is equal to 16,04px.

The text will scale according to the font-size of his father until the screen has a size of 4800px since 2vw from 4800px are equivalent to 96px (6rem).

As mentioned above, it is rare that our designs will simply adapt to our scaling, so we can include the use of media-queries to adapt to different devices as needed.

Another technique would be to use units REM and modify the font-size of the root element according to the size of the viewport,so that all the content of our website that used units of the REM would scale dynamically. This is not unreasonable because although the examples shown are simple, the reality is somewhat more complex.

A simple component with a title, a text and an image has several properties to control if we apply a dynamic scaling. Some of the most common ones would be font-size, margins, paddings, line-height, The size of the image, the size of the image, etc. In addition, these properties may be altered if the design changes from one device to another. For example a display in column in version mobile and a horizontal one in desktop.

Conclusion

CSS provides us with all the necessary tools so that the content of our website adapts to any device regardless of its size. It is up to us how and when to use these tools, which ones adapt better to our designs and, why not, which ones we feel more comfortable with.

The theory is simple and putting it into practice is not complicated if we have all the factors affecting sizes and spacing under control.

It is undeniable that even though the monitors Full HD are a big part of the market, high resolution monitors are becoming more and more common and we can't forget about them. CSS is ready, but are we?