To pile your span
s you can set them in display:block
.
Aside , you mays used a smaller line-height
and margin
instead to keep an equal gap in between lines of span.
Also font-size
calculated from a px
and vw
value can help .
demo screenshot & below of the idea:
.big-text {
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
text-justify: inter-character;
font-size:calc(12px + 2.45vw);
line-height: 0.7;
background:gray;/*see me for debug*/
}
.big-text>span {
display: block;
width:max-content;
margin:8px auto ;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-4 big-text">
<span>FIREWORK</span>
<span style="font-size:1.45em">& PYRO</span>
<span style="color: #fd0227; font-size: 1.65em">FIRING</span>
<span style="font-size:1.17em;">SYSTEMS</span>
</div>
</div>
</div>
mediaquerie can also be used to resize your text, but also modify the layout , here is an example (for the fun) with mediaquerie setting the first span sideways on bigger screen.demo : https://codepen.io/gc-nomade/pen/abNKbyP or snippet below.

.big-text {
font-family: "Roboto Condensed", sans-serif;
font-weight: bold;
text-justify: inter-character;
font-size: calc(12px + 2.45vw);
line-height: 0.7;
background: gray;
/*see me for debug*/
}
.big-text>span {
display: block;
width: max-content;
margin: 8px auto;
white-space: nowrap;
}
@media screen and (min-width: 769px) {
.vertical-md {
writing-mode: vertical-rl;
transform: scale(-1);
font-size: 0.615em;
color:#fd0227;
-webkit-text-stroke:1px #fff
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-4 big-text">
<span class="float-md-left vertical-md">FIREWORK</span>
<span style="font-size:1.45em">& PYRO</span>
<span style="color: #fd0227; font-size: 1.65em">FIRING</span>
<span style="font-size:1.17em;">SYSTEMS</span>
</div>
</div>
</div>
[<>]
snippet editor