I’m looking to keep my headings selectable via font-replacement technology on a site I’m currently building out. The problem is, the font I’ve designed the site with is vertically 20% shorter than the original font.
I know I can shrink line-height to shorten spacing above and below, and I know I can play with letter-spacing to make the font “seem” shorter – but thats not really ideal.
I’ve been digging through the questions here on Stackoverflow and I’ve discovered CSS 2.1 doesn’t support any developer interaction with a font’s display height.
What I was wondering is if there are any upcoming CSS3 modules, or even jQuery scripts etc that might help manually shorten a font’s height?
Or are there any font-replacement technologies that allow it? For instance is there any way to shorten Cufon headings?
Thanks in advance.
There is a way if you will use font-replacement which produces Canvas replacement like Cufon you mentioned.
If you do you will be able to take the advantage of html canvas property which is that if you change the width/height of canvas with CSS the canvas will behave like an image so you could set every element to be 20% shorter. Though you’d have to run javascript on it as if you’d like it to stay same width you’d have to set the width to be exact same value before applying the shorter height. If you’d omit this bit you’d scale the canvas in both height and width.
I believe the same could theoretically apply to flash replacements – from what I remember scalling flash with CSS produced similar results – correct me if I’m wrong.
Not sure if it wouldn’t produce any blinking or any other glitches – you’d have to give it a go. If there aren’t to many Cufon elements on your page you want to shorten and you do it right after Cufon replace it should do the trick.
Good luck! Staying true to your design can be a bitch hehe