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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.