1

I have a simple web page which uses a serif font and a sans serif font; both are set with font-family: serif and font-family: sans-serif respectively. With these settings I would expect that a well thought out web browser would by default use a serif font and a sans serif font with matching x-heights. However, on Windows 10 I observe that in Chrome, Firefox and Opera the default sans serif font has a larger x-height than the default serif font. This makes the sans serif font look larger than the serif font. What font settings do I need to make sure the x-heights match?

  • Use fonts that you know match. I'm unsure what you're trying to achieve as there's no "x-height" attribute or anything like that – Zach Saucier Jan 27 at 19:36
  • @ZachSaucier The strange thing is that Internet Explorer, which by default uses Times New Roman and Arial, seems to match the x-height of the two fonts. – August Karlstrom Jan 28 at 16:36
1

If you're looking for any kind of consistency, you should be specifying a font not just saying serif or sans-serif.

A proper font-stack specifies a font by name and uses increasingly generic fallbacks in case the user can't render the fonts you've chosen.

body {
  font-family:"Open Sans", Helvetica, sans-seif;
}

In the code above, Open Sans is specified. If the user can't load Open Sans, then fall back to Helvetica. If for some reason they can't load Helvetica, then at least give me something sans-serif. By the time it gets to the end of the stack, we're just glad the page loaded at all.

By only specifying sans-serif you're asking the browser to use whatever default sans-serif font comes default with the browser — which can be customized by the user. Just because you like the default font in Internet Explorers doesn't mean someone else hasn't changed it to Comic Sans.

If you like the way Times New Roman and Arial look together, then create font-stacks that ask for them specifically. They're universal fonts, you don't even have to worry about loading them onto your page. Otherwise, check out any of the free web fonts from Google or the like and pick a pair that has the x-height you want. Don't just leave it up to chance by only specifying serif and sans-serif.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.