aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/font_size_fallacies/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/posts/font_size_fallacies/index.html')
-rw-r--r--docs/posts/font_size_fallacies/index.html79
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 @@
28 17/03 — 2020 28 17/03 — 2020
29 <div class="stats"> 29 <div class="stats">
30 <span class="stats-number"> 30 <span class="stats-number">
31 32.36 31 32.37
32 </span> 32 </span>
33 <span class="stats-unit">cm</span> 33 <span class="stats-unit">cm</span>
34 &nbsp 34 &nbsp
35 <span class="stats-number"> 35 <span class="stats-number">
36 3.2 36 3.3
37 </span> 37 </span>
38 <span class="stats-unit">min</span> 38 <span class="stats-unit">min</span>
39 </div> 39 </div>
@@ -42,34 +42,75 @@
42 Font Size Fallacies 42 Font Size Fallacies
43 </h1> 43 </h1>
44 <div class="post-text"> 44 <div class="post-text">
45 <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> 45 <p>I am not an expert with fonts, but I do have some experience <a
46<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> 46href="#fn1" class="footnote-ref" id="fnref1"
47<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> 47role="doc-noteref"><sup>1</sup></a>, and common sense. This post aims to
48debunk some misconceptions about font sizes!</p>
49<p>11 px on your display is <em>probably not</em> 11 px on my display.
50Let’s do some quick math. I have two displays, 1366x768 @ 21” and
51another with 1920x1080 @ 13”, call them <code>A</code> and
52<code>B</code> for now.</p>
53<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of
54side say, <code>s</code> cm. The total area covered by my 21” display is
55about 1,066 cm^2 (41x26). Thus,</p>
48<pre><code>Display A 56<pre><code>Display A
49Dimensions: 1366x768 @ 21&quot; (41x26 sq. cm) 57Dimensions: 1366x768 @ 21&quot; (41x26 sq. cm)
501,049,088 s^2 = 1066 581,049,088 s^2 = 1066
51 s = 0.0318 cm (side of a pixel on Display A)</code></pre> 59 s = 0.0318 cm (side of a pixel on Display A)</code></pre>
52<p>Bear with me, as I repeat the number crunching for Display <code>B</code>:</p> 60<p>Bear with me, as I repeat the number crunching for Display
61<code>B</code>:</p>
53<pre><code>Display B 62<pre><code>Display B
54Dimensions: 1920x1080 @ 13&quot; (29.5x16.5 sq. cm) 63Dimensions: 1920x1080 @ 13&quot; (29.5x16.5 sq. cm)
552,073,600 s^2 = 486.75 642,073,600 s^2 = 486.75
56 s = 0.0153 cm (side of a pixel on Display B)</code></pre> 65 s = 0.0153 cm (side of a pixel on Display B)</code></pre>
57<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> 66<p>The width of a pixel on Display <code>A</code> is <em>double</em> the
67width of a pixel on Display <code>B</code>. The area occupied by a pixel
68on Display <code>A</code> is <em>4 times</em> the area occupied by a
69pixel on Display <code>B</code>.</p>
58<p><em>The size of a pixel varies from display to display!</em></p> 70<p><em>The size of a pixel varies from display to display!</em></p>
59<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> 71<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm
60<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> 72tall whereas the same bitmap font on Display <code>B</code> would be
61<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> 73around 1.9 mm tall. A 11 px tall character on <code>B</code> is visually
62<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> 74equivalent to a 5 px character on <code>A</code>. When you view a
63<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> 75screenshot of Display <code>A</code> on Display <code>B</code>, the
64<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> 76contents are shrunk down by a factor of 2!</p>
65<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> 77<p>So screen resolution is not enough, how else do we measure size?
66<section class="footnotes" role="doc-endnotes"> 78Pixel Density! Keen readers will realize that the 5^th grade math
79problem we solved up there showcases pixel density, or, pixels per cm
80(PPCM). Usually we deal with pixels per inch (PPI).</p>
81<p><strong>Note:</strong> PPI is not to be confused with DPI <a
82href="#fn2" class="footnote-ref" id="fnref2"
83role="doc-noteref"><sup>2</sup></a> (dots per inch). DPI is defined for
84printers.</p>
85<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code>
86is around 165 ppi <a href="#fn3" class="footnote-ref" id="fnref3"
87role="doc-noteref"><sup>3</sup></a>. A low ppi display appears to be
88‘pixelated’, because the pixels are more prominent, much like Display
89<code>A</code>. A higher ppi usually means you can view larger images
90and render crispier fonts. The average desktop display can stuff 100-200
91pixels per inch. Smart phones usually fall into the 400-600 ppi
92(XXXHDPI) category. The human eye fails to differentiate detail past 300
93ppi.</p>
94<p><em>So … streaming an 8K video on a 60” TV provides the same clarity
95as a HD video on a smart phone?</em></p>
96<p>Absolutely. Well, clarity is subjective, but the amount of detail you
97can discern on mobile displays has always been limited. Salty consumers
98of the Xperia 1 <a href="#fn4" class="footnote-ref" id="fnref4"
99role="doc-noteref"><sup>4</sup></a> will say otherwise.</p>
100<p>Maybe I will talk about font rendering in another post, but thats all
101for now. Don’t judge a font size by its screenshot.</p>
102<section id="footnotes" class="footnotes footnotes-end-of-document"
103role="doc-endnotes">
67<hr /> 104<hr />
68<ol> 105<ol>
69<li id="fn1" role="doc-endnote"><p>https://github.com/nerdypepper/scientifica<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li> 106<li id="fn1"><p>https://github.com/nerdypepper/scientifica<a
70<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> 107href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
71<li id="fn3" role="doc-endnote"><p>https://www.sven.de/dpi/<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li> 108<li id="fn2"><p>https://en.wikipedia.org/wiki/Dots_per_inch<a
72<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> 109href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
110<li id="fn3"><p>https://www.sven.de/dpi/<a href="#fnref3"
111class="footnote-back" role="doc-backlink">↩︎</a></p></li>
112<li id="fn4"><p>https://en.wikipedia.org/wiki/Sony_Xperia_1<a
113href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
73</ol> 114</ol>
74</section> 115</section>
75 116