new post: Font Size Fallacies

6 files changed, 361 insertions, 10 deletions

diff --git a/docs/index.html b/docs/index.html
index e0b1d1f..0ad7403 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,6 +32,23 @@
     <tr>
         <td class=table-post>
             <div class="date">
+                17/03 — 2020
+            </div>
+            <a href="/posts/font_size_fallacies" class="post-link">
+                <span class="post-link">Font Size Fallacies</span>
+            </a>
+        </td>
+        <td class=table-stats>
+            <span class="stats-number">
+                3.2
+            </span>
+            <span class=stats-unit>min</span>
+        </td>
+    </tr>
+    
+    <tr>
+        <td class=table-post>
+            <div class="date">
                 08/03 — 2020
             </div>
             <a href="/posts/termux_tandem" class="post-link">
diff --git a/docs/index.xml b/docs/index.xml
index 25a63ca..57b7984 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -12,6 +12,105 @@
       <language>en-us</language>
       <copyright>Creative Commons BY-NC-SA 4.0</copyright>
       <item>
+<title>Font Size Fallacies</title>
+<description><p>I am not an expert with fonts, but I do have some
+experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, 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&#39;s do some quick math. I have two displays, 1366x768 @
+21&#8221; and another with 1920x1080 @ 13&#8221;, 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&#8221; display
+is about 1,066 cm<sup>2</sup> (41x26). Thus,</p>
+
+<pre><code>Display A
+Dimensions: 1366x768 @ 21&#34; (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>
+
+<pre><code>Display B
+Dimensions: 1920x1080 @ 13&#34; (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><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<sup>th</sup>
+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 <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> (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 <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>.  A low ppi display appears to be
+&#8216;pixelated&#8217;, 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 &#8230; streaming an 8K video on a 60&#8221; 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 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say
+otherwise.</p>
+
+<p>Maybe I will talk about font rendering in another post, but
+thats all for now. Don&#39;t judge a font size by its
+screenshot.</p>
+
+<div class="footnotes">
+<hr/>
+<ol>
+
+<li id="fn1">
+<p><a href="https://github.com/nerdypepper/scientifica">https:&#47;&#47;github.com&#47;nerdypepper&#47;scientifica</a>&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn2">
+<p><a href="https://en.wikipedia.org/wiki/Dots_per_inch">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Dots_per_inch</a>&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn3">
+<p><a href="https://www.sven.de/dpi/">https:&#47;&#47;www.sven.de&#47;dpi&#47;</a>&#160;<a href="#fnref3" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn4">
+<p><a href="https://en.wikipedia.org/wiki/Sony_Xperia_1">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Sony_Xperia_1</a>&#160;<a href="#fnref4" rev="footnote">&#8617;</a></p>
+</li>
+
+</ol>
+</div></description>
+<link>https://peppe.rs/posts/font_size_fallacies/</link>
+<pubDate>Tue, 17 Mar 2020 16:52:00 +0000</pubDate>
+<guid>https://peppe.rs/posts/font_size_fallacies/</guid>
+</item>
+<item>
 <title>Termux Tandem</title>
 <description><p>I learnt about <code>termux</code> from a friend on IRC recently.
 It looked super gimmicky to me at first, but it eventually
diff --git a/docs/posts/font_size_fallacies/index.html b/docs/posts/font_size_fallacies/index.html
new file mode 100644
index 0000000..0f0c463
--- /dev/null
+++ b/docs/posts/font_size_fallacies/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="/style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=1">
+    <meta content="#ffffff" name="theme-color">
+    <meta name="HandheldFriendly" content="true">
+    <meta property="og:title" content="nerdypepper">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="a static site {for, by, about} me ">
+    <meta property="og:url" content="https://peppe.rs">
+    <link rel="icon" type="image/x-icon" href="/favicon.png">
+    <title>Font Size Fallacies · peppe.rs</title>
+    <body>
+      <div class="posts">
+        <div class="post">
+          <a href="/" class="post-end-link">⟵ Back</a>
+          <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/font_size_fallacies.md
+">View Raw</a>
+          <div class="separator"></div>
+          <div class="date">
+            17/03 — 2020
+            <div class="stats">
+              <span class="stats-number">
+                32.36
+              </span>
+              <span class="stats-unit">cm</span>
+              &nbsp
+              <span class="stats-number">
+                3.2
+              </span>
+              <span class="stats-unit">min</span>
+            </div>
+          </div>
+          <span class="post-title">
+            Font Size Fallacies
+          </span>
+          <div class="post-text">
+            <p>I am not an expert with fonts, but I do have some
+experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, 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&#39;s do some quick math. I have two displays, 1366x768 @
+21&#8221; and another with 1920x1080 @ 13&#8221;, 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&#8221; display
+is about 1,066 cm<sup>2</sup> (41x26). Thus,</p>
+
+<pre><code>Display A
+Dimensions: 1366x768 @ 21&#34; (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>
+
+<pre><code>Display B
+Dimensions: 1920x1080 @ 13&#34; (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><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<sup>th</sup>
+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 <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> (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 <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>.  A low ppi display appears to be
+&#8216;pixelated&#8217;, 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 &#8230; streaming an 8K video on a 60&#8221; 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 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say
+otherwise.</p>
+
+<p>Maybe I will talk about font rendering in another post, but
+thats all for now. Don&#39;t judge a font size by its
+screenshot.</p>
+
+<div class="footnotes">
+<hr/>
+<ol>
+
+<li id="fn1">
+<p><a href="https://github.com/nerdypepper/scientifica">https:&#47;&#47;github.com&#47;nerdypepper&#47;scientifica</a>&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn2">
+<p><a href="https://en.wikipedia.org/wiki/Dots_per_inch">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Dots_per_inch</a>&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn3">
+<p><a href="https://www.sven.de/dpi/">https:&#47;&#47;www.sven.de&#47;dpi&#47;</a>&#160;<a href="#fnref3" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn4">
+<p><a href="https://en.wikipedia.org/wiki/Sony_Xperia_1">https:&#47;&#47;en.wikipedia.org&#47;wiki&#47;Sony_Xperia_1</a>&#160;<a href="#fnref4" rev="footnote">&#8617;</a></p>
+</li>
+
+</ol>
+</div>
+
+          </div>
+          
+    <div class=intro>
+        Hi. <a href=https://peppe.rs/index.xml class=feed-button>Subscribe</a>
+        <p>I'm Akshay, I go by nerd or nerdypepper on the internet.</p>
+        <p>
+        I am a compsci undergrad, Rust programmer and an enthusiastic Vimmer.
+        I write open-source stuff to pass time. I also design fonts: scientifica, curie.
+        Things I find cool usually end up here.
+        </p>
+        <p>Get in touch at [email protected] or [email protected].</p>
+    </div>
+    
+          <a href="/" class="post-end-link">⟵ Back</a>
+          <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/font_size_fallacies.md
+">View Raw</a>
+        </div>
+      </div>
+    </body>
+</html>
diff --git a/docs/style.css b/docs/style.css
index e48188d..6f11bfa 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -27,7 +27,7 @@ body {
 }
 
 html {
-  font-size: 18px;
+  font-size: 17px;
 }
 
 table {
@@ -49,8 +49,8 @@ td {
 }
 
 .posts {
-  width: 90%;
-  max-width: 90%;
+  width: 97%;
+  max-width: 650px;
 }
 
 @media only screen and (min-width: 1080px) {
@@ -64,7 +64,7 @@ td {
 
 @media only screen and (min-width: 1400px) {
   .posts {
-    max-width: 700px;
+    max-width: 650px;
   }
   html {
     font-size: 18px;
@@ -89,7 +89,9 @@ img {
 }
 
 hr {
-  color: var(--dark-white);
+  height: 2px;
+  background-color: var(--dark-white);
+  border: none;
 }
 
 .date {
@@ -111,10 +113,10 @@ hr {
   color: var(--black) !important;
   background-color: var(--cyan);
   font-size: 0.8rem;
-  padding: 0.5rem;
+  padding: 0.3rem 0.5rem;
   margin: -0.5rem 0;
   border: 0px solid var(--dark-white);
-  border-radius: 0.4rem;
+  border-radius: 0.2rem;
 }
 
 .intro {
diff --git a/generate.sh b/generate.sh
index 78c6331..b9b3541 100755
--- a/generate.sh
+++ b/generate.sh
@@ -84,10 +84,10 @@ echo -ne "$(intro)<table>" >> ./docs/index.html
 # posts
 posts=$(ls -t ./posts)
 mkdir -p docs/posts
+rm -rf "./docs/posts/"
 
 for f in $posts; do
     file="./posts/"$f
-    echo "generating post $file"
     id="${file##*/}"    # ill name my posts just fine
 
     # generate posts
@@ -100,6 +100,7 @@ for f in $posts; do
     height="$(height $lines)"
 
     post_title=$(title_wrapper "$id")
+    echo "[~] $post_title"
     post_date=$(date -r "$file" "+%d/%m — %Y")
     post_link=$(link_wrapper "${id%.*}" "$post_title" "$post_date" "$r_time" "$height")
     echo -ne "$post_link" >> docs/index.html
@@ -123,8 +124,6 @@ esh -s /bin/bash \
     -o "./docs/index.xml" \
     "rss.esh"
 
-
-
 cat >> ./docs/index.html << EOF
     </table>
     <div class="separator"></div>
diff --git a/posts/font_size_fallacies.md b/posts/font_size_fallacies.md
new file mode 100644
index 0000000..e795135
--- /dev/null
+++ b/posts/font_size_fallacies.md
@@ -0,0 +1,81 @@
+I am not an expert with fonts, but I do have some
+experience [^exp], and common sense. This post aims to debunk some
+misconceptions about font sizes!
+
+[^exp]: https://github.com/nerdypepper/scientifica
+
+11 px on your display is *probably not* 11 px on my display.
+Let's do some quick math. I have two displays, 1366x768 @
+21" and another with 1920x1080 @ 13", call them `A` and
+`B` for now.
+
+Display `A` has 1,049,088 pixels. A pixel is a square, of
+side say, `s` cm. The total area covered by my 21" display
+is about 1,066 cm^2 (41x26). Thus,
+
+```
+Display A
+Dimensions: 1366x768 @ 21" (41x26 sq. cm)
+1,049,088 s^2 = 1066
+            s = 0.0318 cm (side of a pixel on Display A)
+```
+
+Bear with me, as I repeat the number crunching for Display
+`B`:
+
+```
+Display B
+Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm)
+2,073,600 s^2 = 486.75
+            s = 0.0153 cm (side of a pixel on Display B)
+```
+
+The width of a pixel on Display `A` is *double* the width of a
+pixel on Display `B`. The area occupied by a pixel on Display
+`A` is *4 times* the area occupied by a pixel on Display `B`.
+
+*The size of a pixel varies from display to display!*
+
+A 5x11 bitmap font on Display `A` would be around 4 mm tall
+whereas the same bitmap font on Display `B` would be around
+1.9 mm tall. A 11 px tall character on `B` is visually
+equivalent to a 5 px character on `A`. When you view a
+screenshot of Display `A` on Display `B`, the contents are
+shrunk down by a factor of 2!
+
+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).
+
+**Note:** PPI is not to be confused with DPI [^dpi] (dots
+per inch). DPI is defined for printers.
+
+[^dpi]: https://en.wikipedia.org/wiki/Dots_per_inch
+
+In our example, `A` is a 75 ppi display and `B` is around
+165 ppi [^ppi].  A low ppi display appears to be
+'pixelated', because the pixels are more prominent, much
+like Display `A`. 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.
+
+*So ... streaming an 8K video on a 60" TV provides the same
+clarity as a HD video on a smart phone?*
+
+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 [^sony] will say
+otherwise.
+
+[^sony]: https://en.wikipedia.org/wiki/Sony_Xperia_1
+
+Maybe I will talk about font rendering in another post, but
+thats all for now. Don't judge a font size by its
+screenshot.
+
+[^ppi]: https://www.sven.de/dpi/
+