In my current project, I am experimenting with a CSS Grid layout featuring 2 rows and 1 column. Within this layout, I have placed a word that dominates the entire view-port by setting its font size to 23rem;. Inspired by this music album cover, I am attempting to recreate it using only CSS and HTML.
The top row of my grid contains the letters "U" and "N," with the letter "N" extending further than the adjacent letter "U." Looking closely, you will notice that while the bottom of the "U" does not touch the letter below (the "T"), the long tail of "N" reaches out to touch surrounding elements.
If both letters share the same height and alignment, how can I accurately replicate the album cover? Should I use SVG text or draw these patterns in SVG format? In case CSS cannot achieve the desired effect, what alternatives should be considered?
https://i.sstatic.net/RpIIO.png
* {
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;
}
/*CSS styles for each individual letter*/
<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>