aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/font_size_fallacies
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-04-16 09:10:50 +0100
committerAkshay <[email protected]>2020-04-16 09:10:50 +0100
commit2a778912251874f9b808f82e61244efcd12210aa (patch)
tree72cd692749c36f068fe22a32ede51a88a65bc759 /docs/posts/font_size_fallacies
parentd71a288d944959057064d64ce03cad759a42ba06 (diff)
rerender with pandoc
Diffstat (limited to 'docs/posts/font_size_fallacies')
-rw-r--r--docs/posts/font_size_fallacies/index.html131
1 files changed, 45 insertions, 86 deletions
diff --git a/docs/posts/font_size_fallacies/index.html b/docs/posts/font_size_fallacies/index.html
index 804dea2..f8bffad 100644
--- a/docs/posts/font_size_fallacies/index.html
+++ b/docs/posts/font_size_fallacies/index.html
@@ -37,99 +37,58 @@
37 Font Size Fallacies 37 Font Size Fallacies
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>I am not an expert with fonts, but I do have some 40 <!DOCTYPE html>
41experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42misconceptions about font sizes!</p> 42<head>
43 43 <meta charset="utf-8" />
44<p>11 px on your display is <em>probably not</em> 11 px on my display. 44 <meta name="generator" content="pandoc" />
45Let&#39;s do some quick math. I have two displays, 1366x768 @ 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
4621&#8221; and another with 1920x1080 @ 13&#8221;, call them <code>A</code> and 46 <title>font_size_fallacies</title>
47<code>B</code> for now.</p> 47 <style>
48 48 code{white-space: pre-wrap;}
49<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of 49 span.smallcaps{font-variant: small-caps;}
50side say, <code>s</code> cm. The total area covered by my 21&#8221; display 50 span.underline{text-decoration: underline;}
51is about 1,066 cm<sup>2</sup> (41x26). Thus,</p> 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 ul.task-list{list-style: none;}
54 </style>
55 <!--[if lt IE 9]>
56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57 <![endif]-->
58</head>
59<body>
60<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>
61<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>
62<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>
53<pre><code>Display A 63<pre><code>Display A
54Dimensions: 1366x768 @ 21&#34; (41x26 sq. cm) 64Dimensions: 1366x768 @ 21&quot; (41x26 sq. cm)
551,049,088 s^2 = 1066 651,049,088 s^2 = 1066
56 s = 0.0318 cm (side of a pixel on Display A) 66 s = 0.0318 cm (side of a pixel on Display A)</code></pre>
57</code></pre> 67<p>Bear with me, as I repeat the number crunching for Display <code>B</code>:</p>
58
59<p>Bear with me, as I repeat the number crunching for Display
60<code>B</code>:</p>
61
62<pre><code>Display B 68<pre><code>Display B
63Dimensions: 1920x1080 @ 13&#34; (29.5x16.5 sq. cm) 69Dimensions: 1920x1080 @ 13&quot; (29.5x16.5 sq. cm)
642,073,600 s^2 = 486.75 702,073,600 s^2 = 486.75
65 s = 0.0153 cm (side of a pixel on Display B) 71 s = 0.0153 cm (side of a pixel on Display B)</code></pre>
66</code></pre> 72<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>
67
68<p>The width of a pixel on Display <code>A</code> is <em>double</em> the width of a
69pixel on Display <code>B</code>. The area occupied by a pixel on Display
70<code>A</code> is <em>4 times</em> the area occupied by a pixel on Display <code>B</code>.</p>
71
72<p><em>The size of a pixel varies from display to display!</em></p> 73<p><em>The size of a pixel varies from display to display!</em></p>
73 74<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>
74<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall 75<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>
75whereas the same bitmap font on Display <code>B</code> would be around 76<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>
761.9 mm tall. A 11 px tall character on <code>B</code> is visually 77<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>
77equivalent to a 5 px character on <code>A</code>. When you view a 78<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>
78screenshot of Display <code>A</code> on Display <code>B</code>, the contents are 79<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>
79shrunk down by a factor of 2!</p> 80<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>
80 81<section class="footnotes" role="doc-endnotes">
81<p>So screen resolution is not enough, how else do we measure 82<hr />
82size? Pixel Density! Keen readers will realize that the 5<sup>th</sup>
83grade math problem we solved up there showcases pixel
84density, or, pixels per cm (PPCM). Usually we deal with
85pixels per inch (PPI).</p>
86
87<p><strong>Note:</strong> PPI is not to be confused with DPI <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> (dots
88per inch). DPI is defined for printers.</p>
89
90<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code> is around
91165 ppi <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>. A low ppi display appears to be
92&#8216;pixelated&#8217;, because the pixels are more prominent, much
93like Display <code>A</code>. A higher ppi usually means you can view
94larger images and render crispier fonts. The average desktop
95display can stuff 100-200 pixels per inch. Smart phones
96usually fall into the 400-600 ppi (XXXHDPI) category. The
97human eye fails to differentiate detail past 300 ppi.</p>
98
99<p><em>So &#8230; streaming an 8K video on a 60&#8221; TV provides the same
100clarity as a HD video on a smart phone?</em></p>
101
102<p>Absolutely. Well, clarity is subjective, but the amount of
103detail you can discern on mobile displays has always been
104limited. Salty consumers of the Xperia 1 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say
105otherwise.</p>
106
107<p>Maybe I will talk about font rendering in another post, but
108thats all for now. Don&#39;t judge a font size by its
109screenshot.</p>
110
111<div class="footnotes">
112<hr/>
113<ol> 83<ol>
114 84<li id="fn1" role="doc-endnote"><p>https://github.com/nerdypepper/scientifica<a href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
115<li id="fn1"> 85<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>
116<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> 86<li id="fn3" role="doc-endnote"><p>https://www.sven.de/dpi/<a href="#fnref3" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
117</li> 87<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>
118
119<li id="fn2">
120<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>
121</li>
122
123<li id="fn3">
124<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>
125</li>
126
127<li id="fn4">
128<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>
129</li>
130
131</ol> 88</ol>
132</div> 89</section>
90</body>
91</html>
133 92
134 </div> 93 </div>
135 94
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-26 18:21:48 +0100