Search code examples
htmlcsscss-gridfont-sizetypography

Can you stretch font sizes while maintaining the same height?

I am using a CSS Grid layout that has 2 rows and 1 column, inside of it, I placed a word that will occupy almost the entire view-port font-size:23rem;. I am trying to replicate this music album cover using only CSS and HTML. First in relation to my question I have two rows and in the starting row, or top row, I am placing two letters "U" and "N", if you look closely, the N is stretching more than its partner, the letter U, thus touching the other words, and if you go back to the U's lower end you can see this one is not touching the letter beneath, which is the T.

Since they both appear to have the same height and alignment on the axis, how can I successfully replicate the cover? Should I go for SVG text or draw the pattern for these on SVG? What would be the case if CSS couldn't replicate this?

enter image description here

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

p {
    font-family: sans-serif;
}

li {
    list-style-type: none;
    font-family: sans-serif;
}

.unity-cover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-areas: 
    "start-row"
    "end-row";
    justify-items: center;
}

.start-row {
    grid-area: start-row;
    display: flex;
}

.end-row {
    grid-area: end-row;
    display: flex;
}

.letter {
    font-weight: bold;
    margin-right: 1px;
    font-size: 23rem;
}

.letter-u {
    height: 300px;
    position: relative;
    top: 27px;
}

.letter-n {
    height: 300px;
    position: relative;
    top: 40px;
    right: 0px;
}

.letter-i {
    height: 300px;
}

.letter-t {
    height: 300px;
}

.letter-y {
    height: 300px;
    position: relative;
    right: 40px;
}
<body>

        <ul class="unity-cover">
            <div class="start-row">
                    <li class="letter letter-u">U</li>
                    <li class="letter letter-n">N</li>
            </div>

            <div class="end-row">
                    <li class="letter letter-i">I</li>
                    <li class="letter letter-t">T</li>
                    <li class="letter letter-y">Y</li>
            </div>


        </ul>

</body>

Solution

  • You can use transform: scaleX(n) where 'n' is some amount of scale.

    The same is true for trying to shrink the height of the 'u', using transform: scaleY(n) this time.

    As for implementation, I personally think that using an svg would be better, as this font doesn't quite match the cover, you can see from the way the 'N' touches on the left but not the right on the album cover.

    But if you wanted to manipulate the font, just know that transform can help you, and it has options other than just 'scale'.

    * {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

p {
    font-family: sans-serif;
}

li {
    list-style-type: none;
    font-family: sans-serif;
}

.unity-cover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-areas: 
    "start-row"
    "end-row";
    justify-items: center;
}

.start-row {
    grid-area: start-row;
    display: flex;
}

.end-row {
    grid-area: end-row;
    display: flex;
}

.letter {
    font-weight: bold;
    margin-right: 1px;
    font-size: 23rem;
}

.letter-u {
    height: 300px;
    position: relative;
    top: 34px;
    left: -28px;
    vertical-align: baseline;
    transform: scaleY(0.97);
}

.letter-n {
    height: 300px;
    position: relative;
    transform: scaleX(1.22);
    vertical-align: baseline;
    top: 36px;
    left: -24px;
}

.letter-i {
    height: 300px;
}

.letter-t {
    height: 300px;
}

.letter-y {
    height: 300px;
    position: relative;
    right: 40px;
}
    <body>

        <ul class="unity-cover">
            <div class="start-row">
                    <li class="letter letter-u">U</li>
                    <li class="letter letter-n">N</li>
            </div>

            <div class="end-row">
                    <li class="letter letter-i">I</li>
                    <li class="letter letter-t">T</li>
                    <li class="letter letter-y">Y</li>
            </div>


        </ul>

</body>