How to make transformed typography responsive on image

Question

I have a design I'm trying to achieve with only CSS & HTML. This is a snip of a quick mockup I did in photoshop.

This is quite easy to achieve on its own but once I try to make it responsive, I'm hit by all sorts of roadblocks. By responsive I mean that the text at the side of the image retains its proportions once the image is scaled.

This is the code I have so far.

<!DOCTYPE html>
<html>

<head>
    <title>Bob Marley Tribute</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,900,900i&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');

        body {
            font-family: 'Arvo', serif;            
            margin: 0;
        }

        h1, figure{
            margin: 0;
        }

        h1 {
            font-weight: 900;
            text-transform: uppercase;
        }

        h2 {
            font-weight: 600;
        }

        .responsive {
            max-width: 100%;
            display: block;
            height: auto;
        }

        p, figcaption{
          font-family: 'Raleway', sans-serif;
        }

        .img-div{
            display: flex;
            align-content: center;
            justify-content: center;
            margin: 0;
            position: relative;

        }

        .img-div h1{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


        .img-div .lname{
            /*transform: rotate(90deg);*/
            font-size: 350%;
            background-color: aqua;
            writing-mode: vertical-rl;
            /*margin-right: -11.269vw;*/ 

        }

        .img-div .fname{
            /*align-self: flex-end;*/
            align-self: flex-end;
            font-size: 5vw;
            background-color: red;
            position: absolute;
            top:0;
        }

    </style>
</head>

<body class="main" id="main">

    <header>        
        <nav style="display: none;">
            <ul>
                <li><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>

        <div class="img-div" id="img-div">
            <h1 id="title"><span class="fname">Bob</span> <span class="lname">Marley</span></h1>
            <figure>
                <img class="responsive" src="./bobmarley.jpg" alt="" />
                <figcaption id="img-caption">Bob Marley flashing his dreadlocks on stage</figcaption>
            </figure>
        </div>




    </main>
</body>

</html>

How can I achieve this effect?

You're trying to scale the text to the *element size* and that is currently **not possible** with CSS. You will need javascript — Paulie_D, Jan 10 '20 at 15:54
https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container/19814948#19814948 — Paulie_D, Jan 10 '20 at 15:55

Vincent Caronnet · Answer 1 · 2020-01-11T07:42:18.343

First, set the figure's size in vw (the width of the viewport) : for example 90vw.

Then set the font-size of "MARLEY" in vw again : 10vw if you set the figure at 90vw.

Thus, the width of "MARLEY" plus the width of the figure will occupy the entire width of the window.

Here is my code, it seems to work fine and I get the result you want :

<!DOCTYPE html>
<html>

<head>
    <title>Bob Marley Tribute</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,900,900i&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');
        body {
            font-family: 'Arvo', serif;            
            margin: 0;
        }
        h1, figure{
            margin: 0;
        }
        h1 {
            font-weight: 900;
            text-transform: uppercase;
        }
        h2 {
            font-weight: 600;
        }
        .responsive {
            max-width: 100%;
            vertical-align: middle  ;
        }
        p, figcaption{
          font-family: 'Raleway', sans-serif;

        }
        .img-div{
            display: flex;
            margin: 0;
        }
        .img-div h1{
            display: flex;
            flex-direction: column;
            justify-content: left;
            width: 10vw;
        }
        .img-div .lname{
            font-size: 10vw;
            background-color: aqua;
            writing-mode: vertical-rl;
            flex-grow: 1;
            letter-spacing: 2vw;
        }
        .img-div .fname{
            align-self: flex-end;
            font-size: 5vw;
            background-color: red;
        }
        figure {
            width: 90vw;
        }
    </style>
</head>
<body class="main" id="main">
    <header>        
        <nav style="display: none;">
            <ul>
                <li><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="img-div" id="img-div">
            <h1 id="title"><span class="fname">Bob</span> <span class="lname">Marley</span></h1>
            <figure>
                <img class="responsive" src="./bobmarley.png" alt="" />
                <figcaption id="img-caption">Bob Marley flashing his dreadlocks on stage</figcaption>
            </figure>
        </div>
    </main>
</body>
</html>

How to make transformed typography responsive on image

1 Answers1