aboutsummaryrefslogtreecommitdiff
path: root/docs/posts
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-03-17 16:53:49 +0000
committerAkshay <[email protected]>2020-03-17 16:53:49 +0000
commit214e6cb76772989324be55c3ffa2d39dfa296295 (patch)
tree42648e31ff2dde5199c63eccda46966cbd077667 /docs/posts
parent9227a05c650c12fb45d8cf6497165d2641335438 (diff)
new post: Font Size Fallacies
Diffstat (limited to 'docs/posts')
-rw-r--r--docs/posts/font_size_fallacies/index.html153
1 files changed, 153 insertions, 0 deletions
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 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <meta charset="UTF-8">
6 <meta name="viewport" content="initial-scale=1">
7 <meta content="#ffffff" name="theme-color">
8 <meta name="HandheldFriendly" content="true">
9 <meta property="og:title" content="nerdypepper">
10 <meta property="og:type" content="website">
11 <meta property="og:description" content="a static site {for, by, about} me ">
12 <meta property="og:url" content="https://peppe.rs">
13 <link rel="icon" type="image/x-icon" href="/favicon.png">
14 <title>Font Size Fallacies · peppe.rs</title>
15 <body>
16 <div class="posts">
17 <div class="post">
18 <a href="/" class="post-end-link">⟵ Back</a>
19 <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/font_size_fallacies.md
20">View Raw</a>
21 <div class="separator"></div>
22 <div class="date">
23 17/03 — 2020
24 <div class="stats">
25 <span class="stats-number">
26 32.36
27 </span>
28 <span class="stats-unit">cm</span>
29 &nbsp
30 <span class="stats-number">
31 3.2
32 </span>
33 <span class="stats-unit">min</span>
34 </div>
35 </div>
36 <span class="post-title">
37 Font Size Fallacies
38 </span>
39 <div class="post-text">
40 <p>I am not an expert with fonts, but I do have some
41experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some
42misconceptions about font sizes!</p>
43
44<p>11 px on your display is <em>probably not</em> 11 px on my display.
45Let&#39;s do some quick math. I have two displays, 1366x768 @
4621&#8221; and another with 1920x1080 @ 13&#8221;, call them <code>A</code> and
47<code>B</code> for now.</p>
48
49<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of
50side say, <code>s</code> cm. The total area covered by my 21&#8221; display
51is about 1,066 cm<sup>2</sup> (41x26). Thus,</p>
52
53<pre><code>Display A
54Dimensions: 1366x768 @ 21&#34; (41x26 sq. cm)
551,049,088 s^2 = 1066
56 s = 0.0318 cm (side of a pixel on Display A)
57</code></pre>
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
63Dimensions: 1920x1080 @ 13&#34; (29.5x16.5 sq. cm)
642,073,600 s^2 = 486.75
65 s = 0.0153 cm (side of a pixel on Display B)
66</code></pre>
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
74<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall
75whereas the same bitmap font on Display <code>B</code> would be around
761.9 mm tall. A 11 px tall character on <code>B</code> is visually
77equivalent to a 5 px character on <code>A</code>. When you view a
78screenshot of Display <code>A</code> on Display <code>B</code>, the contents are
79shrunk down by a factor of 2!</p>
80
81<p>So screen resolution is not enough, how else do we measure
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>
114
115<li id="fn1">
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>
117</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>
132</div>
133
134 </div>
135
136 <div class=intro>
137 Hi. <a href=https://peppe.rs/index.xml class=feed-button>Subscribe</a>
138 <p>I'm Akshay, I go by nerd or nerdypepper on the internet.</p>
139 <p>
140 I am a compsci undergrad, Rust programmer and an enthusiastic Vimmer.
141 I write open-source stuff to pass time. I also design fonts: scientifica, curie.
142 Things I find cool usually end up here.
143 </p>
144 <p>Get in touch at [email protected] or [email protected].</p>
145 </div>
146
147 <a href="/" class="post-end-link">⟵ Back</a>
148 <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/font_size_fallacies.md
149">View Raw</a>
150 </div>
151 </div>
152 </body>
153</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-24 18:13:56 +0000