Font Size problem
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.
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.
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.
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.
- Typography Sucks
- Font Size problem
- Serif or Sans-Serif?
- Grey Text on White Background
- Dark Theme Web Design
- Peepshow Windows
- GUI vs Command Line: a Unified Design
- Skeleton Screen
- Fixed-Layout vs Flowed-Layout
- Should Hyperlinks Have Underline?
- Survey of Tab Style 2006
- Problem of Header Linking to Table of Contents
- Understand Atomic CSS in 1 Minute
- CSS: What's a CSS Pixel? What's Reference Pixel?
- Web Design, Minimal Window Width
- User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
- Phone and Tablet Screen Density Comparison
If you have a question, put $5 at patreon and message me.