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
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/syntax.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">Home</a>
<span>/</span>
<a href="/posts" class="post-end-link">Posts</a>
<span>/</span>
<a class="post-end-link">Font Size Fallacies</a>
<a class="stats post-end-link" href="https://git.peppe.rs/web/site/plain/posts/font_size_fallacies.md
">View Raw</a>
<div class="separator"></div>
<div class="date">
16/03 — 2020
<div class="stats">
<span class="stats-number">
32.37
</span>
<span class="stats-unit">cm</span>
 
<span class="stats-number">
3.3
</span>
<span class="stats-unit">min</span>
</div>
</div>
<h1>
Font Size Fallacies
</h1>
<div class="post-text">
<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>
<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^2 (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^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>
<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>
<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>
<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 <a href="#fn4" class="footnote-ref" id="fnref4"
role="doc-noteref"><sup>4</sup></a> 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>
<section id="footnotes" class="footnotes footnotes-end-of-document"
role="doc-endnotes">
<hr />
<ol>
<li id="fn1"><p>https://github.com/nerdypepper/scientifica<a
href="#fnref1" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn2"><p>https://en.wikipedia.org/wiki/Dots_per_inch<a
href="#fnref2" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn3"><p>https://www.sven.de/dpi/<a href="#fnref3"
class="footnote-back" role="doc-backlink">↩︎</a></p></li>
<li id="fn4"><p>https://en.wikipedia.org/wiki/Sony_Xperia_1<a
href="#fnref4" class="footnote-back" role="doc-backlink">↩︎</a></p></li>
</ol>
</section>
</div>
<div class="intro">
Hi.
<div class="hot-links">
<a href="/index.xml" class="feed-button">Subscribe</a>
</div>
<p>I'm Akshay, programmer and pixel-artist.
I write <a href="https://git.peppe.rs">open-source stuff</a>.
I also design fonts:
<a href="https://git.peppe.rs/fonts/scientifica/about">scientifica</a>,
<a href="https://git.peppe.rs/fonts/curie/about">curie</a>.
</p>
<p>Reach out at [email protected].</p>
</div>
<a href="/" class="post-end-link">Home</a>
<span>/</span>
<a href="/posts" class="post-end-link">Posts</a>
<span>/</span>
<a class="post-end-link">Font Size Fallacies</a>
<a class="stats post-end-link" href="https://git.peppe.rs/web/site/plain/posts/font_size_fallacies.md
">View Raw</a>
</div>
</div>
</body>
</html>
|
