Posso esticar texto em CSS? Não quero que a fonte seja maior, porque isso a torna mais ousada que o texto menor ao lado. Eu só quero esticar o texto verticalmente para que fique meio deformado. Isso seria em uma div e, em seguida, o texto normal ao lado seria em outra div. Como posso fazer isso?

Sim, você pode realmente com CSS 2D Transforms. Isso é suportado em quase todos os navegadores modernos, incluindo o IE9 +. Aqui está um exemplo.

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

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

DICA: pode ser necessário adicionar margem ao texto estendido para evitar colisões de texto.

Vou responder pelo alongamento horizontal do texto, já que a vertical é a parte mais fácil - basta usar "transform: scaleY ()"

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

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

o espaçamento entre letras apenas adiciona espaço entre as letras, não alonga nada, mas é meio relativo

bloco inline porque os elementos inline são muito restritivos e o código abaixo não funcionaria de outra forma

Agora a combinação que faz a diferença

tamanho da fonte para chegar ao tamanho que queremos - dessa forma, o texto realmente terá o tamanho que deveria e o texto antes e depois aparecerá ao lado (scaleX é apenas para exibição, o navegador ainda vê o elemento no tamanho original ao posicionar outros elementos).

scaleY para reduzir a altura do texto, para que seja igual ao texto ao lado.

transform-origin para aumentar a escala do texto a partir do topo da linha.

margem inferior definida como um valor negativo, para que a próxima linha não fique muito abaixo - de preferência porcentagem, para que não alteremos a propriedade altura da linha. alinhamento vertical definido como superior, para impedir que o texto antes ou depois flutue para outras alturas (já que o texto esticado tem um tamanho real de 32px)

- O elemento span simples possui um tamanho de fonte, apenas como referência.

A pergunta pedia uma maneira de evitar a negritude do texto causada pelo alongamento e eu ainda não forneci uma, MAS a propriedade font-weight tem mais valores do que apenas normal e negrito .

Eu sei, você simplesmente não pode ver isso, mas se você procurar as fontes apropriadas , poderá usar mais valores.

Tecnicamente, não. Mas o que você pode fazer é usar um tamanho de fonte que é tão alto quanto você gostaria que a letra esticados para ser, e , em seguida, condensá-lo horizontalmente com font-stretch.

A única maneira de pensar em textos curtos como "MENU" é colocar todas as letras em um espaço e justificá-las em um recipiente depois. Como isso:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

E então o CSS:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

A extensão de fonte CSS agora é suportada em todos os principais navegadores (exceto iOS Safari e Opera Mini). Não é fácil encontrar uma família de fontes comum que suporte fontes em expansão, mas é fácil encontrar fontes que suportem condensação, por exemplo:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Sempre voltando a esta página quando um designer estica uma fonte para mim. A solução aceita funciona muito bem, mas frequentemente encontro problemas com margens.

Recomendaria o uso da transformação na altura, em vez da largura, se você estiver enfrentando problemas, foi uma vida mais segura para mim no meu projeto atual.

.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);
}