惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

K
Kaspersky official blog
小众软件
小众软件
Engineering at Meta
Engineering at Meta
博客园 - 三生石上(FineUI控件)
WordPress大学
WordPress大学
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
V2EX
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Google DeepMind News
Google DeepMind News
Security Archives - TechRepublic
Security Archives - TechRepublic
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
C
Check Point Blog
aimingoo的专栏
aimingoo的专栏
罗磊的独立博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
MongoDB | Blog
MongoDB | Blog
L
LINUX DO - 热门话题
酷 壳 – CoolShell
酷 壳 – CoolShell
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
H
Help Net Security
Martin Fowler
Martin Fowler
G
GRAHAM CLULEY
Simon Willison's Weblog
Simon Willison's Weblog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
V
Vulnerabilities – Threatpost
云风的 BLOG
云风的 BLOG
博客园_首页
C
Cybersecurity and Infrastructure Security Agency CISA
量子位
Stack Overflow Blog
Stack Overflow Blog
Recent Announcements
Recent Announcements
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
I
Intezer
Scott Helme
Scott Helme
A
About on SuperTechFans
博客园 - 司徒正美
Hacker News: Ask HN
Hacker News: Ask HN
The GitHub Blog
The GitHub Blog
Forbes - Security
Forbes - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 聂微东
人人都是产品经理
人人都是产品经理
The Cloudflare Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Spread Privacy
Spread Privacy
T
Tailwind CSS Blog
S
Security Affairs
宝玉的分享
宝玉的分享

Henri Sivonen’s pages

Parin vuoden tutkimattomuus crates.io: Rust Package Registry Asiakirjatonta toimintaa It’s not wrong that "🤦🏼‍♂️".length == 7 Koulutartuntojen tilastointimenettely Perusteasiakirjoja hallussapitämättä ikärajoitettu Asiantuntijat ja nukkuva vallan vahtikoira Koronapassilausunto Suppealla tietopohjalla ohimeneväksi väitetty Text Encoding Menu in 2021 The Text Encoding Submenu Is Gone An HTML5 Conformance Checker Not Part of the Technology Stack Browser Technology Stack Bogo-XML Declaration Returns to Gecko A Look at Encoding Detection and Encoding Menu Telemetry from Firefox 86 Why Supporting Unlabeled UTF-8 in HTML on the Web Would Be Problematic Rust Target Names Aren’t Passed to LLVM Toimintamalli Activating Browser Modes with Doctype Johtopäätöksiä mallin rakenteesta Tehtävänmäärittelyä kirjoittamatta ja kuolemia laskematta laumasuojamallinnettu Character Encoding Menu in 2014 Erillissuosituksen tarpeettomuudesta yleissuosituksen poikkeukseksi? STM:n maskiaikajana Rust 2021 Oma-aloitteisesti mallinnettu Kokopinovaatimuksin kilpailutettu chardetng: A More Compact Character Encoding Detector for the Legacy Web Varauksia paisutellen tiedotettu Perusteasiakirjoitta tiedotettu Always Use UTF-8 & Always Label Your HTML Saying So IME Smoke Testing The Validator.nu HTML Parser About the Hiragino Fonts with CSS It’s Time to Stop Adding New Features for Non-Unicode Execution Encodings in C++ Rust 2020 The Last of the Parsing Quirks About about:blank Rust 2019 a Web-Compatible Character Encoding Library in Rust How I Wrote a Modern C++ Library in Rust Using cargo-fuzz to Transfer Code Review of Simple Safe Code to Complex Code that Uses unsafe A Rust Crate that Also Quacks Like a Modern C++ Library #Rust2018 No Namespaces in JSON, Please A Lecture about HTML5 Julkisesti luotettu varmenne ikidomainille TLS:ää (SSL:ää) varten -webkit-HTML5 Lists in Attribute Values The Sad Story of PNG Gamma “Correction” If You Want Software Freedom on Phones, You Should Work on Firefox OS, Custom Hardware and Web App Self-Hostablility HTML5 Parser Improvements ARIA in HTML5 Integration: Document Conformance (Draft, Take Two) Schema.org and Pre-Existing Communities Lowering memory requirements by replacing Schematron HTML5 Parsing in Gecko: A Build Introducing SAX Tree NVDL Support in Validator.nu HOWTO Avoid Being Called a Bozo When Producing XML An Unofficial Q&A about the Discontinuation of the XHTML2 WG Thoughts on HTML5 Becoming a W3C Recommendation Four Finnish Banks Training Users to Give Banking Credentials to Another Site Unimpressed by Leopard Sergeant Semantics The Content Sink Inheritance Diagram – 2006-06-30 What is EME? The Performance Cost of the HTML Tree Builder Social Media Impression Management The spacer Element Is Gone Openmind 2006 Performance Mistake XHTML and Mobile Devices WebM-Enabled Browser Usage Share Exceeds H.264-Enabled Browser Usage Share on Desktop (in StatCounter Numbers) HTML5 Parser-Based View Source Syntax Highlighting Vendor Prefixes Are Hurting the Web Accept-Charset Is No More Dualroids Writing Structural Stylable Document in Mozilla Editor ISO-8859-15 on haitallinen Hourglass The Scientific Method According to Hixie Maemo Source Code Karpelan lukkovertaus ontuu Digitaalisesta arkistoinnista ARIA in HTML5 Integration: Document Conformance (Draft) XHTML—What’s the Point? (Draft, incomplete) Mac OS X Browser Comparison HOWTO Spot a Wannabe Web Standards Advocate An Idea About Intermediate Language Trees and Web UI Generation Thoughts on Using SSL/TLS Certificates as the Solution to Phishing Bureaucracy Meets the Web Europe Day HOWTO Establish a 100% Literacy Rate What to Do with All These Photos? Charmod Norm Checking Validator Web Service Interface Ideas DTDs Don’t Work on the Web EFFI’s Day in Court Speaking at XTech
About Points and Pixels as Units
Henri Sivonen · 2012-10-02 · via Henri Sivonen’s pages

This document has not been updated in over a decade and is severely out of date. I have kept it available for historical interest only.

Points are often mistakenly thought as pixel units. Points are not pixel units. Points are physical lenght units. In CSS and in PostScript there are 72 points in one inch. Defining the font size in points on Web pages is considered harmful.

History

Over a decade ago the early Macintoshes had 9" black&white displays with pixel dimensions of 512*384. The ppi (pixels per inch) of the display was close to 72 and the operating system used that value to convert physical measures—inches, points, centimeters etc.—to pixel measures. It was a time of real WYSIWYG. The measures were right and there was no color and, therefore, no miscalibrated colors.

Later on, Macs got larger displays with higher resolutions. However, the assumption about 72 ppi stuck in software. In fact, if you buy the latest and greatest video card and plug in a large screen and run it at 1600*1200, Apple System Profiler will tell you that the dpi (it says dpi, not ppi) of the display is 72. Mac OS has no idea of the true resolution of the screen. It still uses the value that was true for the first Macs.

The Real Resolution

Nowadays the real resolution is different. For example, an iMac with screen set to 1024*768 has a screen resolution of 91 ppi. Apple’s beige 17" AppleVision/ColorSync displays (with a tube by Sony) have a ppi of 98 at 1280*960 (when configured optimally). It is true that the Mac OS and almost all Mac applications still assume 72 ppi in their unit conversions, but as you can see, the assumption is seriously flawed.

The real ppi of the screen is easy to measure. Just divide the pixel dimensions of the screen with the physical dimensions (in inches) of the screen. The horizontal ppi and the vertical ppi should be closely the same unless you are using the 1280*1024 mode. (Using the 1280*1024 mode instead of the 1280*960 mode is a bad idea, because on a normal screen with aspect ratio of 4/3 the pixels are not square when using the 1280*1024 mode.)

A display with 72 ppi at 640*480 would have a visible area of about 23 cm (8.9") by 17 cm (6.7"). That would be close to a 14" screen.

Microsoft’s default guess is 96 ppi. Until recently, the real resolution of screens sold with PCs has been lower than that. For example, if a Windows machine has a 17" screen at 1024*768, the resolution of the screen is 80 ppi or less.

A display with 96 ppi at 640*480 would have a visible area of about 17 cm (6.7") by 13 cm (5.0"). Now that would be one small screen.

The Consequences

Now the Windows user with the real ppi at 80 sets the point sizes of fonts smaller to compensate for the assumption of 96 ppi. Mac OS, on the other hand, assumes a ppi smaller than the actual ppi. As a result, the text on the Mac is fewer pixels tall and, in addition to that, the pixels are smaller!

While waiting for display hardware that reports the correct resolution to the OS, the false assumptions about the ppi could be corrected if a configuration wizard asked the user to measure the screen as a part of the set-up process of the OS.

Since operating systems aren’t there yet, the issue needs to be handled at the application level for the time being.

Impact on CSS and the Web

The assumptions about the pixel size of a point are seriously flawed in many browsers and all browsers cannot be configured properly. An author should make no assumptions about the pixel size of something defined in points.

Even if most browsers were configured properly, it would still be a better idea to use font sizes relative to the preferred font size set by the user. Long passages of text, ie. text within <p> elements, should be left at the users preferred size by leaving the font size undefined. The font size of headers and captions should be set relative to the preferred size using percentages.

Some authors will argue that their pages need to presented with fonts at a particular pixel size. It is important to remember that pages are intended for a user to read. It is, therefore, the user who knows best which size is good.

If an author still wants to set the font size to a particular pixel size, using points is the wrong way to do the wrong thing. If you mean pixels, use the pixel unit (px in CSS).

Impact on WYSIWYG in paper publishing applications

If the physical resolution of the screen and the logical resolution of the screen don’t match, the 100% zoom level in paper publishing apps does not display the page in natural size. To fix this, set the zoom factor to the ratio of the physical resolution and the logial resolution. If the physical resolution is 91 ppi and the logical resolution is 72 ppi, zoom to 126%.

After zooming, the font sizes may not match the sizes of the bitmap fonts available on the system. To increase the quality of font rendering, use anti-aliasing. Adobe Type Manager can anti-alias Type 1 fonts on Mac OS. SmoothType can anti-alias TrueType fonts on Mac OS. The results achieved with SmoothType are significantly better than the results achieved using the built in so called anti-aliasing in Mac OS Classic.

Answers to related Frequently Asked Questions

Does IE 5 for Mac ignore sizes defined in points?

No, it does not. Neither does Mozilla.

Does IE 5 for Mac render point-sized text incorrectly?

If the ppi value in the browser preferences is correctly set, point-sized text is rendered correctly. The same applies to Mozilla.

Compared to other browsers, does IE 5 for Mac render point-sized text differently?

Other browsers have more than one way of doing things. IE 5 for Mac can be configured to match the point size handling of a particular other browser but not all of them at the same time. The same applies to Mozilla.