I’m currently in the process of creating a dedicated section on my website called "Voices of the Nation,” which draws inspiration from the foundations laid out in the U.S. Constitution. The objective is to highlight individuals who have shown their support for this initiative by acting as digital “signers.” One challenge I am facing involves displaying these names with varying font sizes in an aesthetically pleasing manner on the webpage. It seems that there is some inconsistency regarding the alignment of the text within the spans containing the names. Here are a couple of visuals illustrating the issue:
https://i.sstatic.net/GR4EP.jpg
Upon closer inspection, you can observe that certain names overlap each other, which is something I would like to rectify. An interesting observation is that the text appears to be positioned outside the outlines of the span elements:
https://i.sstatic.net/TLUvS.jpg
A similar discrepancy can be spotted across all the listed names. Below is a snippet of the HTML code I am using:
<div id="names">
<span class="order ten CalifornyaA-Bold" id="o3">Eric So</span>
<span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span>
<span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span>
...
<span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span>
</div>
... along with the corresponding CSS styling:
#names {
text-align: center;
padding-bottom: 10%;
}
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 1.5em;
white-space: nowrap;
}
.hancock {
font-size: 5.5em;
}
.five-hundred {
font-size: 4em;
}
.two-hundred {
font-size: 3.4em;
}
.one-hundred {
font-size: 2.8em;
}
.fifty {
font-size: 2.2em;
}
.twenty-five {
font-size: 1.6em;
}
.ten {
font-size: 1em;
}
If anyone could offer assistance or guidance on resolving this issue, I would be extremely grateful!