In PlanetPress Design V7 I could adjust the font ratio or style ratio of text and characters. Less than 100% made characters narrower but still the same height, greater than 100% made characters wider.
Is there any equivalent available in Connect Designer?
Have you tried the font-stretch property?
You will get what you want but make sure to read the full explanation as not all fonts can be stretched.
I can get letter-spacing and line-height to work, but can’t seem to get font-stretch to work.
Do you know of a font family has width-variant faces?
Unfortunately, I don’t. Maybe some other members know of one.
Look into SVG (Scalable Vector Graphics). You can add text objects and then adjust the viewport, aspect ratio, scaling, etc. From what I can tell, SVG renders just fine in Connect.
Consider this SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80">
<text class="small" x="20" y="35">My</text>
<text class="heavy" lengthAdjust="spacingAndGlyphs" textLength="100" x="40" y="35">cat</text>
<text class="small" x="55" y="55">is</text>
<text class="Rrrrr" x="65" y="55">Grumpy!</text>
</svg>
The “textLength” property interacts with the “lengthAdjust” property to scale (stretch or compress) the text “cat” in this example.
For completeness, here’s my CSS:
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
.Rrrrr { font: italic 40px serif; fill: red; }
However, for your specific use case, you don’t need CSS, just an SVG “text” element with “textLength” and “lengthAdjust” attributes set.
Got my info from this link: lengthAdjust - SVG: Scalable Vector Graphics | MDN
I too found the font-stretch a less than useful attribute. I couldn’t find a font that would work with it and even if I had, there is a very limited range of font weights available.
I found the css transform:scale(x,y) property did exactly what I wanted, and like the font-ratio in PP7 it is completely adjustable.