1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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="Font Size Fallacies">
<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>
 
<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'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>
<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<sup>2</sup> (41x26). Thus,</p>
<pre><code>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)
</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" (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
‘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>
<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>
<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'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://github.com/nerdypepper/scientifica</a> <a href="#fnref1" rev="footnote">↩</a></p>
</li>
<li id="fn2">
<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>
</li>
<li id="fn3">
<p><a href="https://www.sven.de/dpi/">https://www.sven.de/dpi/</a> <a href="#fnref3" rev="footnote">↩</a></p>
</li>
<li id="fn4">
<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>
</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>
|
