Home/ Questions/Q 7899473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:42:42+00:00

I’m writing a webpage where I want to use one font for normal text

  • 0

I’m writing a webpage where I want to use one font for normal text and another for code, so I have the following CSS:

body {
    font-family:Verdana, sans-serif;
    font-size:100%;
}

code, pre {
    font-family:Consolas, monospace;
}

This works except that the Consolas text comes out considerably smaller than the Verdana text. I can sort of fix it by adding font-size:1.2em; to the code, pre settings, but that feels like a hack, particularly since the number isn’t derived from anything other than trial and error.

Is this something that happens to be a quirk of the particular fonts involved, or am I doing something wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alas this is because Consolas has a smaller x-height than Verdana. You can indeed “sort of fix it” by using a larger font size, but if the user doesn’t have Consolas the page will fall back to the default monospace font, which will appear too large.

    The proper solution lies in CSS3’s font-size-adjust. Alas it isn’t very well supported at all; as far as I know then only mainstream browser to support it is Firefox.

    • 0