@@Marika > ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Allgemeinen ist das keine gute Idee. (Es sei denn, man gestaltet Albumcover. Bei *[Human Touch](https://en.wikipedia.org/wiki/Human_Touch)*{:@en} und *[Lucky Town](https://en.wikipedia.org/wiki/Lucky_Town)*{:@en} dürfte es eine gestauchte Copperplate sein.) Durch `scaleX()` ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikale Linien also dünner als horizontale. Während der Effekt bei *Human Touch/Lucky Town*{:@en} schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf. Besser, du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit *width*{:@en}-Achse. Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt. Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt: [](/images/049640e2-bdb0-11eb-9194-b42e9947ef30.png) Wer [League Gothic](https://www.fontsquirrel.com/fonts/League-Gothic) auf seinem System installiert hat, kann sich das auch im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxqrYdZ) ansehen. Ansehen kann man sich da auch die Lösung für > Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine *custom property*{:@en}. Der `transform-origin`-Wert (*magic number*{:@en}, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab. Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden. 😷 LLAP -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@Marika > ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Allgemeinen ist das keine gute Idee. (Es sei denn, man gestaltet Albumcover. Bei *[Human Touch](https://en.wikipedia.org/wiki/Human_Touch)*{:@en} und *[Lucky Town](https://en.wikipedia.org/wiki/Lucky_Town)*{:@en} dürfte es eine gestauchte Copperplate sein.) Durch `scaleX()` ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikale Linien also dünner als horizontale. Während der Effekt bei *Human Touch/Lucky Town*{:@en} schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf. Besser, du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit *width*{:@en}-Achse.[^1] Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt. [^1]: korrigiert Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt: [](/images/049640e2-bdb0-11eb-9194-b42e9947ef30.png) Wer [League Gothic](https://www.fontsquirrel.com/fonts/League-Gothic) auf seinem System installiert hat, kann sich das auch im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxqrYdZ) ansehen. Ansehen kann man sich da auch die Lösung für > Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine *custom property*{:@en}. Der `transform-origin`-Wert (*magic number*{:@en}, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab. Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden. 😷 LLAP -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@Marika > ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Allgemeinen ist das keine gute Idee. (Es sei denn, man gestaltet Albumcover. Bei *[Human Touch](https://en.wikipedia.org/wiki/Human_Touch)*{:@en} und *[Lucky Town](https://en.wikipedia.org/wiki/Lucky_Town)*{:@en} dürfte es eine gestauchte Copperplate sein.) Durch `scaleX()` ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikale Linien also dünner als horizontale. Während der Effekt bei *Human Touch/Lucky Town*{:@en} schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf. Besser du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit *width*{:@en}-Achse.[^1] Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt. [^1]: korrigiert Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt: [](/images/049640e2-bdb0-11eb-9194-b42e9947ef30.png) Wer [League Gothic](https://www.fontsquirrel.com/fonts/League-Gothic) auf seinem System installiert hat, kann sich das auch im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxqrYdZ) ansehen. Ansehen kann man sich da auch die Lösung für > Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine *custom property*{:@en}. Der `transform-origin`-Wert (*magic number*{:@en}, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab. Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden. 😷 LLAP -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@Marika > ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Allgemeinen ist das keine gute Idee. (Es sei denn, man gestaltet Albumcover. Bei *[Human Touch](https://en.wikipedia.org/wiki/Human_Touch)*{:@en} und *[Lucky Town](https://en.wikipedia.org/wiki/Lucky_Town)*{:@en} dürfte es eine gestauchte Copperplate sein.) Durch `scaleX()` ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikalen Linien also dünner als horizontale. Während der Effekt bei *Human Touch/Lucky Town*{:@en} schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf. Besser du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit *width*{:@en}-Achse.[^1] Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt. [^1]: korrigiert Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt: [](/images/049640e2-bdb0-11eb-9194-b42e9947ef30.png) Wer [League Gothic](https://www.fontsquirrel.com/fonts/League-Gothic) auf seinem System installiert hat, kann sich das auch im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxqrYdZ) ansehen. Ansehen kann man sich da auch die Lösung für > Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine *custom property*{:@en}. Der `transform-origin`-Wert (*magic number*{:@en}, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab. Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden. 😷 LLAP -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@Marika > ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Allgemeinen ist das keine gute Idee. (Es sei denn, man gestaltet Albumcover. Bei *[Human Touch](https://en.wikipedia.org/wiki/Human_Touch)*{:@en} und *[Lucky Town](https://en.wikipedia.org/wiki/Lucky_Town)*{:@en} dürfte es eine gestauchte Copperplate sein.) Durch `scaleX()` ändert sich ja die Strichstärke der vertikalen Linien in den Glyphen, während die horizontalen Linien gleich dick bleiben. Bei einem Faktor < 1 werden vertikalen Linien also dünner als horizontale. Während der Effekt bei *Human Touch/Lucky Town*{:@en} schon so übertrieben ist, dass es schon wieder Kunst ist, ist das bei Wörtern im Fließtext gar keine gute Idee, denn das fällt unangenehm auf. Besser du verwendest einen Condensed-Schriftschnitt – d.h. eine Schrifart, für die es einen solchen gibt, bspw. Source Sans Pro/Source Sans Condensed oder Roboto/Roboto Condensed. Oder variable fonts mit *weight*{:@en}-Achse. Da sind dann die Glyphen so gestaltet, dass sich ein harmonisches Schriftbild ergibt. Hier mal ein richtiger Condensed-Schriftschnitt und ein Fake gegenübergestellt: [](/images/049640e2-bdb0-11eb-9194-b42e9947ef30.png) Wer [League Gothic](https://www.fontsquirrel.com/fonts/League-Gothic) auf seinem System installiert hat, kann sich das auch im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxqrYdZ) ansehen. Ansehen kann man sich da auch die Lösung für > Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Eigentlich ganz einfach: nicht horizontal stauchen, sondern vertikal strecken (und die Schriftgröße entsprechend anpassen). Da beides voneinander abhängig ist, kommt der Faktor in eine *custom property*{:@en}. Der `transform-origin`-Wert (*magic number*{:@en}, um die Grundlinie in Übereinstimmung zu bringen) hängt auch von der Schriftart ab. Aber wie gesagt: Nicht machen! Richtige Condensed-Schrift verwenden. 😷 LLAP -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}