Treehouse: Grow your CSS skills. Land your dream job.

Relative sizes of fonts

  • # March 5, 2012 at 6:40 pm

    I recently made a menu which a client had asked for in Calibri. As a fall back font for everyone who doesn’t have Calibri I used Trebuchet MS. The thing is, when it falls back to Trebuchet, Trebuchet is bigger and my menu goes nuts, and spills over into a second line.

    Is there any way to add anything to change the padding on my menu when a font isn’t detected?

    Thanks! Dave

    # March 5, 2012 at 6:43 pm

    Possibly using JS, but you should ideally try and find a fallback font that has a similar width and x-height to Calibri.

    # March 5, 2012 at 6:51 pm

    Hi Dave,

    Here’s a decent font stack for Calibri

    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

    And here’s one for Trebuchet MS

    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

    I got these from

    # March 7, 2012 at 6:02 am

    Thanks for these guys. Really appreciate it!

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

You must be logged in to reply to this topic.