Create static-responsive text with only CSS

Clarification

For y'all reading the title, might get confused by it

"'Create static... responsive... text'. So, is it static or responsive?" 😵‍💫

Let me explain.

Take example from writings page from site you're on now, there we have big title read "WRITINGS".

Remember how the text looks, mostly in terms of how it laid out, the characters placed. Now try to resize your browser if you're on desktop. For mobile users try switching screen orientation.

Notice what happen to the text? It resizes accordingly to the screen while maintaining

1. Its ratio, and
2. Position of each its characters.

The effect is more pronounced when tested using desktop devices and resizing the browser window. This is what i mean by "static but responsive", static in position and composition, but responsive as a whole.

Re-creation

To create the effect, we have and will try two options

1. Using browser viewport as width reference, or
2. Using container-query, use parent element as width reference.

Using browser viewport

Because viewport using browser viewport 'size' as its reference, we should use unit that's has exact same reference, vw unit. Unit based on reference are called as relative length units.

But, we can't directly apply the unit to font-size property, as example below

p {
  font-size: 100vw;
}

The reason above implementation isn't what we want is because 100vw being applied to the whole text, neglecting how every character allocated within the width. It will resulting as demo below

Text becomes too big, we can't even see it, Definitely not what we want.

"But, can't we just eyeball the vw number?"

You could, but whatever number you got from eyeballing the vw value are specific for exact current characters composition. Once you try to change the text, the number will become inaccurate.

With that said, what we need to do is divide the allocated width (in this case is 100vw) into many characters the text has by using CSS calc() function.

Using calc() function is the same as writing ordinary mathematical operation in Javascript. The benefit writing the calculation inside calc() function is the ability to use other CSS units as the operand such as px, vw, vh, rem, etc.

To divide width against each characters, we use following formula:

text size = allocated width / characters count * character scale

Explanation as follows:

• allocated width is how wide whole text should occupy. 100vw will occupy whole viewport, while 50vw will occupy half viewport, etc.
• characters count is quite self-explanatory, how many characters a text contains? Or, how many characters you want to be preserved its ratio within a single line.
  
  Example: for text "WRITINGS", if you want to preserve all character position withing single line, the characters count will be 8.
• characters scale is a scale as number for each character. To find this number, we need to perform a trial-n-error process by trying within browser developer tools.
  
  This scale is a constant number after we done the trial-n-error process. But, it will become inaccurate and needs to be recalculated when
• • font-size changed
  • font-style changed, or
  • Property that changes distance or width for each character in one line is changed.

Notes:

Because of character scale calculating average of each character width, the number will never be exactly precise. Especially text with font-style of non-monospace, where each character varies in terms of width.

To test the width difference between characters, you can use this demo.

Now, try apply the formula to target element <p> as follow

p {
  font-size: calc(100vw / 8 * 1); /* We use 8 character for text "WRITINGS" and scale of 1 temporarily */
}

Next, to perform trial-n-error process for character scale, follow these steps

trial-n-error steps

Inspect target element

Add formula into font-size property

Do a trial to the scale number

Reduce scale number

Apply formula within code

---

1. Right click at target element.
2. Select inspect.

---

Previous

Next

After all of that, you can check the demo below, an implementation from previous code and trial-n-error process. Try to resize your browser or rotate your phone

All done! Now text ratio will be preserved by browser viewport width. Next up, we will creating the same effect using container-query.

Using container-query

Why using container-query?

Maybe some of you wondering

"If the effect is well implemented using browser viewport, why there is need for option using container-query?"

The reason will be, we're limited by browser viewport as our size reference when using viewport.

Now imagine if we wanted the text to reference the width of its parent element. Maybe we can try media-query, but it will be a hassle to deal and maintain every single viewport you support.

In contrast, with container-query, we don't need to think about those stuff, making our CSS code short and tidy.

About container-query

More information about container-query can be found here. For browser support, container-query is declared as a baseline feature within evergreen browsers.

Implementation using container-query

If you have implemented using viewport, container-query implementation is similar with some minor changes at CSS property within parent element and unit used.

With container-query, we expected the target element should be inside a container/parent as follows, where <p> element is within <div> as its parent for this example

<div>
  <p>WRITINGS</p>
</div>

Because we use the same text, that is "WRITINGS", we can use the same formula and value

div {}

div p {
  font-size: calc(100vw / 8 * 1.55);
}

Now let's add container-type: inline-size property to the container element and change allocated width unit from vw to cqw

div {
  container-type: inline-size;
}

div p {
  font-size: calc(100cqw / 8 * 1.55);
}

And here's the demo from code above. Rather than resizing the browser, we can change the container size instead, and text will keep its ratio.

To change container size, click and hold your cursor or finger on top of the text, then swipe around

About container-type and cqw unit

Because container-query referencing parent as is container, we need give CSS a hint as which element are set as a container/parent by using container-type property. There is another optional property such as container-name: <nama-container> to give name to a container when you have nested container.

After CSS given the hint, we can use container unit such as cqw, cqh, and more to utilize container size as a reference.

Note:

The use of container unit unit container valid only when element that uses the unit placed within parent element that has at most container-type property definition.

continuing container-query implementation...

Nada! All is done! 🎊 Maybe you need to redo trial-n-error steps, if needed. But, that is how you create static-responsive text by only using CSS!

There is a caveat if the text is dynamic. You'll need little help from Javascript to count the characters and pass the value to the formula at CSS using CSS Variables.

The implementation more less is as follows

import type { CSSProperties } from 'react';

// ...

const text = 'Writings';

// ...

return (
  <div style={{ '--text-count': text.length } as CSSProperties} className="@container uppercase">
    <p className="font-[calc(100cqw/var(--text-count)*1.55)]">{text}</p>
  </div>
)

// ...