Font Size problem

By Xah Lee. Date: .

standardize perceived font size?

have you ever designed a website, or tried to tweak blog “themes”? lots css for layout and width/height stuff. Then, you saw some pretty font, and use font-family to switch to it. Bang, your site goes heywire. texts overlap, or become too small and unreadible. Even though you never changed font-size.

font size comparison 2018-11-02 01e83
font size comparison

there needs to be a standardized metric for perceived font size, so that, if we say p size x, we can swap any font with that size without changing any site design.

see Meaning of Font Size

on mastodon, i got into a semi argument. (from a private reply. gawd i hate private replies) apparently, some people don't get what am saying. Here's the deal.

When you say font-size:16px, ok it's 16 pixels, but what exactly does it mean? M height? M width? Neither! In fact, there is no precise definition of font size. It's just a box, and font designers put M about 70% inside it. Actual size of M vary wildly.

font size em height
font size em height

Metrically Compatible Fonts?

there is a concept of “metrically compatible” fonts. It means, such fonts have the same caps height, x height, baseline height, ascender height, decender height. e.g. helvetica and arial are metrically compatible. you can swap between them, sans screwing up layout.

note, there is no “metrically compatible” concept in CSS. We need it. e.g. CSS property font-metric-param:baseline/caps_ratio,xheight/cap_ratio,… So web authors can swap font sans screwing up layout.

note: “metrically compatible” fonts is more a side effect of copyright then actual typography concept. e.g. helvetica is ©. Microsoft “reinvent” it as Arial. Linux by Liberation Sans. But it'd be hard pressed to find “metrically compatible” that's not clones.

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.