How to replicate this text from an image in CSS?

Question

I have text in an image that I'm trying to replicate in HTML with CSS. However I feel like there might be a better approach to mine (setting each line its own font size).

This is the image I'm trying to replicate:

The issues with the current solution:

Doesn't scale great on different screen sizes
Some lines are longer than others (aren't justified?)

Any suggestions on doing this properly?

.big-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  text-justify: inter-character;
  font-size: 5rem;
  line-height: 100%;
}




  FIREWORK
  & PYRO
  FIRING
  SYSTEMS

user_4489164 · Answer

Try this SVG

Admin · Answer

You can use the following example, this is for one display, preferably web. If you want to scale, you could do that with media queries to target mobile and web


 Firework
 & PYRO
 Firing
 Systems


.image-text p{
   padding:0;
   margin:0;
   font-size:28px;
   font-weight:bold;
   letter-spacing:1.2px
  }

.image-text p:nth-of-type(3){
  font-size:42px
 }

.image-text p:nth-of-type(4){
  font-size:32px
 }

.text-red{
  color:red
 }

Checkout in CodePen Link Here

user_10796172 · Answer

Some problems don't have pretty solutions, and I think this is one of them. At the end of the day each line needs its own font size set manually. Whether you do this inline or with CSS, the resulting code just doesn't look great.

However, if you prevent line wrapping then it does scale quite nicely thanks to the rem units. Try it yourself by adjusting font-size in :root

:root {
  font-size: 15px;
}

.big-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  text-justify: inter-word;
  font-size: 5rem;
  line-height: 100%;
}

.big-text span {
  white-space: nowrap;
}




  FIREWORK
  & PYRO
  FIRING
  SYSTEMS

user_2442099 · Answer

To pile your spans 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 ;
}



  
    
      FIREWORK
      & PYRO
      FIRING
      SYSTEMS

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
  }
}



  
    
      FIREWORK
      & PYRO
      FIRING
      SYSTEMS

user_13990593 · Answer

This can easily be done with svg.

The textLenght attribute will make your text justified if you set it to 100%. Note that the space between the letters change accordingly.

The x and y attributes will set the exact position you want your text to be displayed.

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

The source for this answer

html,body,svg { height:100% }

How to replicate this text from an image in CSS?

5 Answers