Can I stretch text using CSS

Question

Can I stretch text in CSS  I don t want the font to be bigger  because that makes it appear bolder than smaller text beside it  I just want to stretch the text vertically so it s kind of deformed   This would be in one div  and then the normal text beside it would be in another div  How can I do this

User · Answer

Yes  you can actually with CSS 2D Transforms  This is supported in almost all modern browsers  including IE9   Here s an example     HTML   lt p gt I feel like  lt span class  stretch  gt stretching lt  span gt   lt  p gt    CSS  span stretch       display inline-block      -webkit-transform scale 2 1      Safari and Chrome        -moz-transform scale 2 1      Firefox        -ms-transform scale 2 1      IE 9        -o-transform scale 2 1      Opera        transform scale 2 1      W3C        TIP  You may need to add margin to your stretched text to prevent text collisions

User · Answer

I ll answer for horizontal stretching of text  since the vertical is the easy part - just use  quot transform  scaleY   quot   x000D   x000D   stretched-text     letter-spacing  2px    display  inline-block    font-size  32px    transform  scaleY 0 5     transform-origin  0 0    margin-bottom  -50     span     font-size  16px    vertical-align  top    x000D   lt span class  stretched-text  gt this is some stretched text lt  span gt   lt span gt and this is some random lt br   gt triple line  lt br   gt not stretched text lt  span gt  x000D   x000D   x000D   letter-spacing just adds space between letters  stretches nothing  but it s kinda relative inline-block because inline elements are too restrictive and the code below wouldn t work otherwise Now the combination that makes the difference font-size to get to the size we want - that way the text will really be of the length it s supposed to be and the text before and after it will appear next to it  scaleX is just for show  the browser still sees the element at its original size when positioning other elements   scaleY to reduce the height of the text  so that it s the same as the text beside it  transform-origin to make the text scale from the top of the line  margin-bottom set to a negative value  so that the next line will not be far below - preferably percentage  so that we won t change the line-height property  vertical-align set to top  to prevent the text before or after from floating to other heights  since the stretched text has a real size of 32px  -- The simple span element has a font-size  only as a reference  The question asked for a way to prevent the boldness of the text caused by the stretch and I still haven t given one  BUT the font-weight property has more values than just normal and bold  I know  you just can t see that  but if you search for the appropriate fonts  you can use the more values

User · Answer

CSS font-stretch is now supported in all major browsers  except iOS Safari and Opera Mini   It is not easy to find a common font-family that supports expanding fonts  but it is easy to find fonts that support condensing  for example   font-stretch  condense  font-family  sans-serif   Helvetica Neue    Lucida Grande   Arial

User · Answer

Technically  no  But what you can do is use a font size that is as tall as you would like the stretched font to be  and then condense it horizontally with font-stretch

User · Answer

The only way I can think of for short texts like  MENU  is to put every single letter in a span and justify them in a container afterwards  Like this    lt div class  menu-burger  gt     lt span gt  lt  span gt     lt span gt  lt  span gt     lt span gt  lt  span gt     lt div gt       lt span gt M lt  span gt       lt span gt E lt  span gt       lt span gt N lt  span gt       lt span gt U lt  span gt     lt  div gt   lt  div gt    And then the CSS    menu-burger     width  50px    height  50px    padding  5px           menu-burger  gt  div     display  flex    justify-content  space-between

User · Answer

Always coming back to this page when a designer stretches a font on me  The accepted solution works great  but I frequently run into issues with margins   Would recommend using the transform on the height instead of the width if you re running into issues  was a life safer for me in  my current project    font-stretch       display  inline-block      -webkit-transform  scale 1  9       -moz-transform  scale 1  9       -ms-transform  scale 1  9       -o-transform  scale 1  9       transform  scale 1  9

[css] Can I stretch text using CSS?

Examples related to css