Grow your CSS skills. Land your dream job.

@font-face scaling

  • # May 31, 2012 at 10:58 am

    In photoshop, I have got a font set at 200% in vertical scaling. Can I replicate that in CSS?

    Also, the italics applied in CSS seem too slanted to me, so I adjusted it manually using the CSS transform property. Is that not suggested or is it ok?

    # May 31, 2012 at 11:12 am

    That seems like a lot of work to get the effect you are after. I would suggest that you consider another typeface.

    I am given to understand that ‘font-stretch’ (http://dev.w3.org/csswg/css3-fonts/#font-stretch-prop) is under consideration but no browser supports it as yet. If you feel the need to skew the italics to get the effect you want then so be it but again, the browser support is not great.

    Hence…see my original point.

    # May 31, 2012 at 12:51 pm

    @Paulie_D Thanks for your input. It just seems a little frustrating that you can’t match the typography on a comp with a browser. I suppose I could make an image but I am designing responsively and it would be nice top keep the images to a minimum.

    # June 1, 2012 at 1:18 am

    @tobeeornot Yeah, that’s not a good idea. I also don’t understand why you’re completely transforming the shape of the letters? There are plenty of display typefaces that have a much taller character height.

    # June 1, 2012 at 1:45 am

    I think @ChristopherBurton has hit the nail on the head here: there has got to be a font that fits your needs in its natural form.

    # June 2, 2012 at 6:50 am

    @ChristopherBurton & @TheDoc – yeah, that is the way forward. I tested a another couple of fonts that didn’t look great on the comp but look pretty cool on the browser.

    By the way @ChristopherBurton using Sublime Text2 now and loving it. Seems to be far more leaner and meaner than DW, although I am glad I started with DW as it was a good starting point for me.

    # June 2, 2012 at 11:19 am

    @tobeeornot We’ve all been there. Glad to hear that you’ve switched.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".