OL Learn

Adjusting the Font Ratio

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>

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: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lengthAdjust

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.