How?

To achieve this effect, we utilize the text-combine-upright CSS property.

1. This property combines multiple characters into a single character's space.
2. If the combined width of the text exceeds 1em, the browser automatically scales it to fit within that space.
3. Note: The text-combine-upright property only functions in vertical writing modes.

To also scale the combined text to fit the browser window size:

1. we can set font-size:100vh;
2. use a media query to check if the browser window is narrower than a square shape, in which case we switch to font-size: 100vw;

Since we are using a vertical writing mode, the axes are flipped. Therefore:

1. To vertically center the font, we set line-height: 100vw;.
2. To horizontally center the font, we apply text-align: center;.

Examples 2 & 3 follow the same logic, but all length units are set to be the same as it's parent element's width. For example, if the container is 50% of window width, then all length units should be 50vh or vw.

View source to see the full code.