Font Stretching Examples

font-stretch (keyword-based)

Hello world! (ultra-condensed)

Hello world! (extra-condensed)

Hello world! (condensed)

Hello world! (semi-condensed)

Hello world! (normal)

Hello world! (semi-expanded)

Hello world! (expanded)

Hello world! (extra-expanded)

Hello world! (ultra-expanded)

transform: scaleX() (scaling-based)

Hello world! (scaleX(0.5) - very narrow)

Hello world! (scaleX(0.8) - semi-narrow)

Hello world! (scaleX(1) - normal)

Hello world! (scaleX(1.2) - semi-wide)

Hello world! (scaleX(1.5) - wide)

Hello world! (scaleX(2) - very wide)

font-variation-settings 'wdth' (variable font width)

Hello world! (wdth 50 - very condensed)

Hello world! (wdth 75 - condensed)

Hello world! (wdth 100 - normal)

Hello world! (wdth 125 - expanded)

Hello world! (wdth 150 - very expanded)