How big is 1px? | Dan Hollick
typefully.com · 327 words · saved by 1 readers
How big is 1px? Short answer: Almost never the size of a device pixel. Long answer: It depends how far away it is👇
How big is 1px? Short answer: Almost never the size of a device pixel. Long answer: It depends how far away it is👇 There is actually a very simple answer to this question. According to the CSS spec: 1px = 1/96th of an inch (0.26mm) Boom. Done. Although, there's a problem with this reference size. Consider a new MacBook where each device pixel is ~0.1mm. 1px would be equal 2.6 device pixels. But you can't have .6 of a pixel - it needs to be an integer. To get around this, CSS lets each browser set the size of 1px to a size that suits the device. This is called 'anchoring' because…
saved by
related reading
- Window: devicePixelRatio property - Web APIs | MDNdeveloper.mozilla.org
- font-size CSS property - CSS | MDNdeveloper.mozilla.org
- Image formats: Pixel data from encoders to decodersdeveloper.mozilla.org
- Say precisely what you mean.index.how
- Details That Make Interfaces Feel Betterjakub.kr
- WebGL Resizing the Canvas.webglfundamentals.org
- An Introduction to the Browser Rendering Pipelinewebperf.tips
- Content Firstadactio.com
- <meta name="viewport"> HTML attribute value - HTML | MDNdeveloper.mozilla.org
- Zoom levels - OpenStreetMap Wikiwiki.openstreetmap.org
- The infinite-pixel screen | Butterick’s Practical Typographypracticaltypography.com
- A Complete Guide to CSS Concepts and Fundamentalstania.dev