new art: lapse

1 files changed, 60 insertions, 19 deletions

diff --git a/docs/posts/font_size_fallacies/index.html b/docs/posts/font_size_fallacies/index.html
index 9577376..51f5b4b 100644
--- a/docs/posts/font_size_fallacies/index.html
+++ b/docs/posts/font_size_fallacies/index.html
@@ -28,12 +28,12 @@
             17/03 — 2020
             <div class="stats">
               <span class="stats-number">
-                32.36
+                32.37
               </span>
               <span class="stats-unit">cm</span>
               &nbsp
               <span class="stats-number">
-                3.2
+                3.3
               </span>
               <span class="stats-unit">min</span>
             </div>
@@ -42,34 +42,75 @@
             Font Size Fallacies
           </h1>
           <div class="post-text">
-            <p>I am not an expert with fonts, but I do have some experience <a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, and common sense. This post aims to debunk some misconceptions about font sizes!</p>
-<p>11 px on your display is <em>probably not</em> 11 px on my display. Let’s do some quick math. I have two displays, 1366x768 @ 21" and another with 1920x1080 @ 13", call them <code>A</code> and <code>B</code> for now.</p>
-<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of side say, <code>s</code> cm. The total area covered by my 21" display is about 1,066 cm^2 (41x26). Thus,</p>
+            <p>I am not an expert with fonts, but I do have some experience <a
+href="#fn1" class="footnote-ref" id="fnref1"
+role="doc-noteref"><sup>1</sup></a>, and common sense. This post aims to
+debunk some misconceptions about font sizes!</p>
+<p>11 px on your display is <em>probably not</em> 11 px on my display.
+Let’s do some quick math. I have two displays, 1366x768 @ 21” and
+another with 1920x1080 @ 13”, call them <code>A</code> and
+<code>B</code> for now.</p>
+<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of
+side say, <code>s</code> cm. The total area covered by my 21” display is
+about 1,066 cm^2 (41x26). Thus,</p>
 <pre><code>Display A
 Dimensions: 1366x768 @ 21&quot; (41x26 sq. cm)
 1,049,088 s^2 = 1066
             s = 0.0318 cm (side of a pixel on Display A)</code></pre>
-<p>Bear with me, as I repeat the number crunching for Display <code>B</code>:</p>
+<p>Bear with me, as I repeat the number crunching for Display
+<code>B</code>:</p>
 <pre><code>Display B
 Dimensions: 1920x1080 @ 13&quot; (29.5x16.5 sq. cm)
 2,073,600 s^2 = 486.75
             s = 0.0153 cm (side of a pixel on Display B)</code></pre>
-<p>The width of a pixel on Display <code>A</code> is <em>double</em> the width of a pixel on Display <code>B</code>. The area occupied by a pixel on Display <code>A</code> is <em>4 times</em> the area occupied by a pixel on Display <code>B</code>.</p>
+<p>The width of a pixel on Display <code>A</code> is <em>double</em> the
+width of a pixel on Display <code>B</code>. The area occupied by a pixel
+on Display <code>A</code> is <em>4 times</em> the area occupied by a
+pixel on Display <code>B</code>.</p>
 <p><em>The size of a pixel varies from display to display!</em></p>
-<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall whereas the same bitmap font on Display <code>B</code> would be around 1.9 mm tall. A 11 px tall character on <code>B</code> is visually equivalent to a 5 px character on <code>A</code>. When you view a screenshot of Display <code>A</code> on Display <code>B</code>, the contents are shrunk down by a factor of 2!</p>
-<p>So screen resolution is not enough, how else do we measure size? Pixel Density! Keen readers will realize that the 5^th grade math problem we solved up there showcases pixel density, or, pixels per cm (PPCM). Usually we deal with pixels per inch (PPI).</p>
-<p><strong>Note:</strong> PPI is not to be confused with DPI <a href="#fn2" class="footnote-ref" id="fnref2" role="doc-noteref"><sup>2</sup></a> (dots per inch). DPI is defined for printers.</p>
-<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code> is around 165 ppi <a href="#fn3" class="footnote-ref" id="fnref3" role="doc-noteref"><sup>3</sup></a>. A low ppi display appears to be ‘pixelated’, because the pixels are more prominent, much like Display <code>A</code>. A higher ppi usually means you can view larger images and render crispier fonts. The average desktop display can stuff 100-200 pixels per inch. Smart phones usually fall into the 400-600 ppi (XXXHDPI) category. The human eye fails to differentiate detail past 300 ppi.</p>
-<p><em>So … streaming an 8K video on a 60" TV provides the same clarity as a HD video on a smart phone?</em></p>
-<p>Absolutely. Well, clarity is subjective, but the amount of detail you can discern on mobile displays has always been limited. Salty consumers of the Xperia 1 <a href="#fn4" class="footnote-ref" id="fnref4" role="doc-noteref"><sup>4</sup></a> will say otherwise.</p>
-<p>Maybe I will talk about font rendering in another post, but thats all for now. Don’t judge a font size by its screenshot.</p>
-<section class="footnotes" role="doc-endnotes">
+<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm
+tall whereas the same bitmap font on Display <code>B</code> would be
+around 1.9 mm tall. A 11 px tall character on <code>B</code> is visually
+equivalent to a 5 px character on <code>A</code>. When you view a
+screenshot of Display <code>A</code> on Display <code>B</code>, the
+contents are shrunk down by a factor of 2!</p>
+<p>So screen resolution is not enough, how else do we measure size?
+Pixel Density! Keen readers will realize that the 5^th grade math
+problem we solved up there showcases pixel density, or, pixels per cm
+(PPCM). Usually we deal with pixels per inch (PPI).</p>
+<p><strong>Note:</strong> PPI is not to be confused with DPI <a
+href="#fn2" class="footnote-ref" id="fnref2"
+role="doc-noteref"><sup>2</sup></a> (dots per inch). DPI is defined for
+printers.</p>
+<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code>
+is around 165 ppi <a href="#fn3" class="footnote-ref" id="fnref3"
+role="doc-noteref"><sup>3</sup></a>. A low ppi display appears to be
+‘pixelated’, because the pixels are more prominent, much like Display
+<code>A</code>. A higher ppi usually means you can view larger images
+and render crispier fonts. The average desktop display can stuff 100-200
+pixels per inch. Smart phones usually fall into the 400-600 ppi
+(XXXHDPI) category. The human eye fails to differentiate detail past 300
+ppi.</p>
+<p><em>So … streaming an 8K video on a 60” TV provides the same clarity
+as a HD video on a smart phone?</em></p>
+<p>Absolutely. Well, clarity is subjective, but the amount of detail you
+can discern on mobile displays has always been limited. Salty consumers
+of the Xperia 1 <a href="#fn4" class="footnote-ref" id="fnref4"
+role="doc-noteref"><sup>4</sup></a> will say otherwise.</p>
+<p>Maybe I will talk about font rendering in another post, but thats all
+for now. Don’t judge a font size by its screenshot.</p>
+<section id="footnotes" class="footnotes footnotes-end-of-document"
+role="doc-endnotes">
 <hr />
 <ol>
-<li id="fn1" role="doc-endnote"><p>https://github.com/nerdypepper/scientifica<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn2" role="doc-endnote"><p>https://en.wikipedia.org/wiki/Dots_per_inch<a href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn3" role="doc-endnote"><p>https://www.sven.de/dpi/<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
-<li id="fn4" role="doc-endnote"><p>https://en.wikipedia.org/wiki/Sony_Xperia_1<a href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+<li id="fn1"><p>https://github.com/nerdypepper/scientifica<a
+href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+<li id="fn2"><p>https://en.wikipedia.org/wiki/Dots_per_inch<a
+href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+<li id="fn3"><p>https://www.sven.de/dpi/<a href="#fnref3"
+class="footnote-back" role="doc-backlink">↩︎</a></p></li>
+<li id="fn4"><p>https://en.wikipedia.org/wiki/Sony_Xperia_1<a
+href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
 </ol>
 </section>