diff options
Diffstat (limited to 'docs/posts/font_size_fallacies')
-rw-r--r-- | docs/posts/font_size_fallacies/index.html | 131 |
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> |
41 | experience <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=""> |
42 | misconceptions 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" /> |
45 | Let'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" /> |
46 | 21” and another with 1920x1080 @ 13”, 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;} |
50 | side say, <code>s</code> cm. The total area covered by my 21” display | 50 | span.underline{text-decoration: underline;} |
51 | is 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 |
54 | Dimensions: 1366x768 @ 21" (41x26 sq. cm) | 64 | Dimensions: 1366x768 @ 21" (41x26 sq. cm) |
55 | 1,049,088 s^2 = 1066 | 65 | 1,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 |
63 | Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm) | 69 | Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm) |
64 | 2,073,600 s^2 = 486.75 | 70 | 2,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 | ||
69 | pixel 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> |
75 | whereas 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> |
76 | 1.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> |
77 | equivalent 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> |
78 | screenshot 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> |
79 | shrunk 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 /> |
82 | size? Pixel Density! Keen readers will realize that the 5<sup>th</sup> | ||
83 | grade math problem we solved up there showcases pixel | ||
84 | density, or, pixels per cm (PPCM). Usually we deal with | ||
85 | pixels 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 | ||
88 | per 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 | ||
91 | 165 ppi <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>. A low ppi display appears to be | ||
92 | ‘pixelated’, because the pixels are more prominent, much | ||
93 | like Display <code>A</code>. A higher ppi usually means you can view | ||
94 | larger images and render crispier fonts. The average desktop | ||
95 | display can stuff 100-200 pixels per inch. Smart phones | ||
96 | usually fall into the 400-600 ppi (XXXHDPI) category. The | ||
97 | human eye fails to differentiate detail past 300 ppi.</p> | ||
98 | |||
99 | <p><em>So … streaming an 8K video on a 60” TV provides the same | ||
100 | clarity as a HD video on a smart phone?</em></p> | ||
101 | |||
102 | <p>Absolutely. Well, clarity is subjective, but the amount of | ||
103 | detail you can discern on mobile displays has always been | ||
104 | limited. Salty consumers of the Xperia 1 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say | ||
105 | otherwise.</p> | ||
106 | |||
107 | <p>Maybe I will talk about font rendering in another post, but | ||
108 | thats all for now. Don't judge a font size by its | ||
109 | screenshot.</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://github.com/nerdypepper/scientifica</a> <a href="#fnref1" rev="footnote">↩</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://en.wikipedia.org/wiki/Dots_per_inch</a> <a href="#fnref2" rev="footnote">↩</a></p> | ||
121 | </li> | ||
122 | |||
123 | <li id="fn3"> | ||
124 | <p><a href="https://www.sven.de/dpi/">https://www.sven.de/dpi/</a> <a href="#fnref3" rev="footnote">↩</a></p> | ||
125 | </li> | ||
126 | |||
127 | <li id="fn4"> | ||
128 | <p><a href="https://en.wikipedia.org/wiki/Sony_Xperia_1">https://en.wikipedia.org/wiki/Sony_Xperia_1</a> <a href="#fnref4" rev="footnote">↩</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 | ||