<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>screens &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/tag/screens/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Sat, 23 Aug 2025 22:44:46 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>screens &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[The Myth of the Pixel Perfect Grid]]></title>
		<link>https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/</link>
					<comments>https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Fri, 23 Nov 2018 07:49:40 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[NaBloPoMo]]></category>
		<category><![CDATA[screens]]></category>
		<category><![CDATA[usability]]></category>
		<guid isPermaLink="false">https://shkspr.mobi/blog/?p=30778</guid>

					<description><![CDATA[If you&#039;ve spent any time with graphic designers, you&#039;ll know that they love spending your money on imperceptible tweaks to your image files. &#34;It must be pixel-perfect!&#34; they cry. When you query why they&#039;ve generated the same icon in multiple sizes, each with subtle variations, they cryptically mention how everything must align with &#34;the grid.&#34;  This is hokum.  First Principles  When we first…]]></description>
										<content:encoded><![CDATA[<p>If you've spent any time with graphic designers, you'll know that they love spending your money on imperceptible tweaks to your image files. "It must be pixel-perfect!" they cry. When you query why they've generated the same icon in multiple sizes, each with subtle variations, they cryptically mention how everything must align with "the grid."</p>

<p>This is hokum.</p>

<h2 id="first-principles"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#first-principles">First Principles</a></h2>

<p>When we first learn about computers, we're taught about pixels.  The individual squares that make up a graphics display.  Each platonic pixel is a perfect square that can display a range of colours.</p>

<p>In our naivety, we see how a diagonal line might be drawn on such a system.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/Line-fs8.png" alt="A simple pixel representation of a line." width="90" height="90" class="aligncenter size-full wp-image-30787">

<p>We then learn that we can include hints to enable Sub Pixel Rendering.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/Line-Subpixel-fs8.png" alt="A simple pixel representation of a line, with some pixels shaded grey." width="90" height="90" class="aligncenter size-full wp-image-30786">

<p>The line doesn't intersect those pixels, but if we make them grey, the line will look smoother to the user. Nifty! The grid is magic!</p>

<p>This is a lie. Just like everything else in computing - pixels are a simple abstraction for our puny human minds.</p>

<h2 id="technology"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#technology">Technology</a></h2>

<p>Screen technologies play a huge part in how "pixels" are laid out. If you've never taken a look at a screen through a microscope, you should!</p>

<p>Here's a magnified version of a typical AMOLED "pentile" screen:
<a href="https://commons.wikimedia.org/wiki/File:Nexus_one_screen_microscope.jpg#/media/File:Nexus_one_screen_microscope.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Nexus_one_screen_microscope.jpg" alt="Nexus one screen microscope.jpg" width="640" height="480"></a></p>

<p>The individual colours aren't square. Not every pixel has the same colours available. They don't align in the way you might think.  In short; if you design for "the grid" you're not going to align with the physical pixels.</p>

<p>Different technologies have different layouts.
<a href="https://commons.wikimedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg#/media/File:Pixel_geometry_01_Pengo.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Pixel_geometry_01_Pengo.jpg" alt="Pixel geometry 01 Pengo.jpg" width="480" height="480"></a></p>

<p>If you want to go into the weeds, take a look through <a href="https://geometrian.com/programming/reference/subpixelzoo/index.php">Ian Mallett's Subpixel Zoo - A Catalog of Subpixel Geometry</a></p>

<p>Outside of phone screens, <a href="https://pcmonitors.info/reviews/philips-bdm4065uc/">pixels aren't always square</a>.</p>

<h2 id="compare-and-contrast"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#compare-and-contrast">Compare and Contrast</a></h2>

<p>Here are a selection of some phone screens all displaying the letter <code>b</code>.
<a href="https://i-cdn.phonearena.com/images/reviews/155697-image/"><img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/Letter-B.jpg" alt="The letter B rendered on several screens, intensly magnified." width="933" height="293" class="aligncenter size-full wp-image-30788"></a>
(I've shamelessly stolen that image from <a href="https://www.phonearena.com/reviews/Screen-comparison-Galaxy-S5-vs-iPhone-5s-vs-One-M8-vs-Note-3-vs-Nexus-5-vs-G2_id3652">Phone Arena's Screen comparison (2014) article</a>.  You can view the <a href="https://m-cdn.phonearena.com/images/reviews/155697-image/03-100-crop.webp?w=1">full resolution image</a>.)</p>

<p>You can tweak your fonts and graphics to your heart's content. There is no universal grid on which they will be displayed.</p>

<p><a href="https://www.phonearena.com/reviews/Screen-Comparison-Galaxy-S4-vs-iPhone-5-vs-Xperia-Z-vs-One-vs-Galaxy-S-III-vs-Lumia-920_id3286"><img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/screen-comparison-galaxy-s4.jpg" alt="Various screens. The text is laid out differently on each." width="680" height="340" class="aligncenter size-full wp-image-30789"></a></p>

<p>OK, but all of us super cool designers have high end Apple kit. That's got a grid, right?!</p>

<p>Nope! <a href="https://www.reddit.com/r/apple/comments/9fp1ty/did_you_ever_looked_at_apple_screens_under_a/">Here's what your iPhone, iPad, and iWatch look like under a microscope</a>:
<a href="https://www.reddit.com/r/apple/comments/9fp1ty/did_you_ever_looked_at_apple_screens_under_a/"><img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/Letter-E.jpg" alt="The letter E displayed on various screens. Each renders differently." width="898" height="300" class="aligncenter size-full wp-image-30790"></a>
Now, that font might be hinted for lots of different sizes, but it isn't hinted for different screen technologies.</p>

<h2 id="grease-is-the-word"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#grease-is-the-word">Grease is the word</a></h2>

<p>When you're next on the bus, take a look at the screens people are using.  I guarantee you'll see phones which are:</p>

<ul>
<li>Covered in fingerprint grease.</li>
<li>Several cracks running through the glass.</li>
<li>Screen protectors badly applied with dust trapped under them.</li>
<li>External lights reflecting off the screen.</li>
</ul>

<p>That's the typical environment for viewing your icon. The pixels don't even come into it!</p>

<p>Think I'm exaggerating? Look for yourself. Count the number of people on your commute who don't have pristine screens.  As a bonus, this is my friend's phone:
<img src="https://shkspr.mobi/blog/wp-content/uploads/2018/12/Smashed-Phone.jpg" alt="A modern iPhone. The screen is cracked, it is covered with a dirty screen protector covered in fingerprint smudges." width="1024" height="744" class="aligncenter size-full wp-image-30791">
It hurts to look at, I know. But that's what your icon is typically shown on.</p>

<h2 id="biology"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#biology">Biology</a></h2>

<p>How far away are people holding their phones?  Are their eyeballs up to the screen, or is the phone on their lap while they tap at it?</p>

<p><a href="https://cviscotland.org/documents.php?did=3&amp;sid=111">Visual acuity is complex</a>, and humans come in a variety of visual abilities. Generally:</p>

<blockquote><p>At absolute best, humans can resolve two lines about 0.01 degrees apart: a 0.026mm gap, 15cm from your face. In practice, objects 0.04mm wide (the width of a fine human hair) are just distinguishable by good eyes, objects 0.02mm wide are not.
<a href="https://www.sciencefocus.com/the-human-body/how-small-can-the-naked-eye-see/">Science Focus</a></p></blockquote>

<p>The <a href="https://www.apple.com/uk/iphone-xs/specs/">latest iPhone</a> has 458 "pixels-per-inch".  That's about 180 pixels per centimetre.  The individual pixels are at the limit of what the perfect human eye can see up close and in perfect conditions.</p>

<p>Humans can't see your pixels.  Sorry. We're not on 17inch CRT screens at 800x600 any more. Your users simply can't physically distinguish between your fine-tuned icons.</p>

<h2 id="summary"><a href="https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/#summary">Summary</a></h2>

<p>There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.</p>

<img src="https://shkspr.mobi/blog/wp-content/uploads/2018/01/There-Is-No-Spoon.gif" alt="Clip from the film &quot;The Matrix&quot; - a young bald boy is saying &quot;There is no spoon.&quot;" width="245" height="180" class="aligncenter size-full wp-image-29041">

<p>An obsession with pixel perfect rendering is futile.</p>

<p>Designers aren't bad people. They're not stupid, mendacious, or wasteful. But they can be unreasonably obsessed with perfection.</p>

<p>The majority of your users aren't sat in front of a perfectly calibrated, retina mode, well lit, perfectly clean monitor.  If they see your design at all, it is through a glass, darkly.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=30778&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2018/11/the-myth-of-the-pixel-perfect-grid/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
	</channel>
</rss>
