Change font height and width

You can try scaling the font in x direction.

p{
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

CSS transform has the scale function for this:

p {
  display: inline-block;
  font-size: 32px;
  transform: scale(.5, 1);
}
<p>This is text.</p>

Use the two numbers in the function for X- and Y-axis respectively.


The closest thing I can find is font-weight

It accepts not only bold,normal but also numeric values. 100-900 in 100 increments. 

 . Paragraph {font-weight :700;}

This combined with height properties should help but will not give you complete solution

Also look at spacing properties as you can reduce the the width of the words that way

  letter-spacing: 2px;

Using a svg text with preserveAspectRatio="none" allow text deformations and very precise positioning.

To adjust, It's all about the viewBox. The rendering stays natively responsive to browser resizes.

The text stays select able.

.title {
  width: 540px;
  height: 40px
}

.content {
  width: 300px;
  height: 400px
}

.side {
  width: 270px;
  height: 100px;
  color: red;
  position: absolute;
  right: 30px;
  top: 160px;
  transform: rotate(44deg)
}
<div class="title">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 15" width="100%" height="100%">
   <foreignObject x="5" y="1" height="100%" width="100%">
      <div>
        Hello world!
       </div>
     </foreignObject>    
  </svg>
</div>

<div class="content">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 400 200" width="100%" height="100%">
    <foreignObject x="55" y="15" height="100%" width="80%">
      <div>
       The best way to use a hello cheer for introducing players is to have one cheerleader use a megaphone or loudspeaker to announce the players names and stats.
       </div>
     </foreignObject>     
  </svg>
</div>


<div class="side">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="5" y="15" height="200%" width="100%">
      <div>
       NOW WITH COLORS!
       </div>
     </foreignObject>     
  </svg>
</div>

Tip: For complex stuffs, flyers making, using the cm css unit works very well.

Tags:

Html

Css

Recent Posts