aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/index.html17
-rw-r--r--docs/index.xml99
-rw-r--r--docs/posts/font_size_fallacies/index.html153
-rw-r--r--docs/style.css16
-rwxr-xr-xgenerate.sh5
-rw-r--r--posts/font_size_fallacies.md81
6 files changed, 361 insertions, 10 deletions
diff --git a/docs/index.html b/docs/index.html
index e0b1d1f..0ad7403 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,6 +32,23 @@
32 <tr> 32 <tr>
33 <td class=table-post> 33 <td class=table-post>
34 <div class="date"> 34 <div class="date">
35 17/03 — 2020
36 </div>
37 <a href="/posts/font_size_fallacies" class="post-link">
38 <span class="post-link">Font Size Fallacies</span>
39 </a>
40 </td>
41 <td class=table-stats>
42 <span class="stats-number">
43 3.2
44 </span>
45 <span class=stats-unit>min</span>
46 </td>
47 </tr>
48
49 <tr>
50 <td class=table-post>
51 <div class="date">
35 08/03 — 2020 52 08/03 — 2020
36 </div> 53 </div>
37 <a href="/posts/termux_tandem" class="post-link"> 54 <a href="/posts/termux_tandem" class="post-link">
diff --git a/docs/index.xml b/docs/index.xml
index 25a63ca..57b7984 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -12,6 +12,105 @@
12 <language>en-us</language> 12 <language>en-us</language>
13 <copyright>Creative Commons BY-NC-SA 4.0</copyright> 13 <copyright>Creative Commons BY-NC-SA 4.0</copyright>
14 <item> 14 <item>
15<title>Font Size Fallacies</title>
16<description><p>I am not an expert with fonts, but I do have some
17experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some
18misconceptions about font sizes!</p>
19
20<p>11 px on your display is <em>probably not</em> 11 px on my display.
21Let&#39;s do some quick math. I have two displays, 1366x768 @
2221&#8221; and another with 1920x1080 @ 13&#8221;, call them <code>A</code> and
23<code>B</code> for now.</p>
24
25<p>Display <code>A</code> has 1,049,088 pixels. A pixel is a square, of
26side say, <code>s</code> cm. The total area covered by my 21&#8221; display
27is about 1,066 cm<sup>2</sup> (41x26). Thus,</p>
28
29<pre><code>Display A
30Dimensions: 1366x768 @ 21&#34; (41x26 sq. cm)
311,049,088 s^2 = 1066
32 s = 0.0318 cm (side of a pixel on Display A)
33</code></pre>
34
35<p>Bear with me, as I repeat the number crunching for Display
36<code>B</code>:</p>
37
38<pre><code>Display B
39Dimensions: 1920x1080 @ 13&#34; (29.5x16.5 sq. cm)
402,073,600 s^2 = 486.75
41 s = 0.0153 cm (side of a pixel on Display B)
42</code></pre>
43
44<p>The width of a pixel on Display <code>A</code> is <em>double</em> the width of a
45pixel on Display <code>B</code>. The area occupied by a pixel on Display
46<code>A</code> is <em>4 times</em> the area occupied by a pixel on Display <code>B</code>.</p>
47
48<p><em>The size of a pixel varies from display to display!</em></p>
49
50<p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall
51whereas the same bitmap font on Display <code>B</code> would be around
521.9 mm tall. A 11 px tall character on <code>B</code> is visually
53equivalent to a 5 px character on <code>A</code>. When you view a
54screenshot of Display <code>A</code> on Display <code>B</code>, the contents are
55shrunk down by a factor of 2!</p>
56
57<p>So screen resolution is not enough, how else do we measure
58size? Pixel Density! Keen readers will realize that the 5<sup>th</sup>
59grade math problem we solved up there showcases pixel
60density, or, pixels per cm (PPCM). Usually we deal with
61pixels per inch (PPI).</p>
62
63<p><strong>Note:</strong> PPI is not to be confused with DPI <sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup> (dots
64per inch). DPI is defined for printers.</p>
65
66<p>In our example, <code>A</code> is a 75 ppi display and <code>B</code> is around
67165 ppi <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>. A low ppi display appears to be
68&#8216;pixelated&#8217;, because the pixels are more prominent, much
69like Display <code>A</code>. A higher ppi usually means you can view
70larger images and render crispier fonts. The average desktop
71display can stuff 100-200 pixels per inch. Smart phones
72usually fall into the 400-600 ppi (XXXHDPI) category. The
73human eye fails to differentiate detail past 300 ppi.</p>
74
75<p><em>So &#8230; streaming an 8K video on a 60&#8221; TV provides the same
76clarity as a HD video on a smart phone?</em></p>
77
78<p>Absolutely. Well, clarity is subjective, but the amount of
79detail you can discern on mobile displays has always been
80limited. Salty consumers of the Xperia 1 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say
81otherwise.</p>
82
83<p>Maybe I will talk about font rendering in another post, but
84thats all for now. Don&#39;t judge a font size by its
85screenshot.</p>
86
87<div class="footnotes">
88<hr/>
89<ol>
90
91<li id="fn1">
92<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>
93</li>
94
95<li id="fn2">
96<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>
97</li>
98
99<li id="fn3">
100<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>
101</li>
102
103<li id="fn4">
104<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>
105</li>
106
107</ol>
108</div></description>
109<link>https://peppe.rs/posts/font_size_fallacies/</link>
110<pubDate>Tue, 17 Mar 2020 16:52:00 +0000</pubDate>
111<guid>https://peppe.rs/posts/font_size_fallacies/</guid>
112</item>
113<item>
15<title>Termux Tandem</title> 114<title>Termux Tandem</title>
16<description><p>I learnt about <code>termux</code> from a friend on IRC recently. 115<description><p>I learnt about <code>termux</code> from a friend on IRC recently.
17It looked super gimmicky to me at first, but it eventually 116It looked super gimmicky to me at first, but it eventually
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>
diff --git a/docs/style.css b/docs/style.css
index e48188d..6f11bfa 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -27,7 +27,7 @@ body {
27} 27}
28 28
29html { 29html {
30 font-size: 18px; 30 font-size: 17px;
31} 31}
32 32
33table { 33table {
@@ -49,8 +49,8 @@ td {
49} 49}
50 50
51.posts { 51.posts {
52 width: 90%; 52 width: 97%;
53 max-width: 90%; 53 max-width: 650px;
54} 54}
55 55
56@media only screen and (min-width: 1080px) { 56@media only screen and (min-width: 1080px) {
@@ -64,7 +64,7 @@ td {
64 64
65@media only screen and (min-width: 1400px) { 65@media only screen and (min-width: 1400px) {
66 .posts { 66 .posts {
67 max-width: 700px; 67 max-width: 650px;
68 } 68 }
69 html { 69 html {
70 font-size: 18px; 70 font-size: 18px;
@@ -89,7 +89,9 @@ img {
89} 89}
90 90
91hr { 91hr {
92 color: var(--dark-white); 92 height: 2px;
93 background-color: var(--dark-white);
94 border: none;
93} 95}
94 96
95.date { 97.date {
@@ -111,10 +113,10 @@ hr {
111 color: var(--black) !important; 113 color: var(--black) !important;
112 background-color: var(--cyan); 114 background-color: var(--cyan);
113 font-size: 0.8rem; 115 font-size: 0.8rem;
114 padding: 0.5rem; 116 padding: 0.3rem 0.5rem;
115 margin: -0.5rem 0; 117 margin: -0.5rem 0;
116 border: 0px solid var(--dark-white); 118 border: 0px solid var(--dark-white);
117 border-radius: 0.4rem; 119 border-radius: 0.2rem;
118} 120}
119 121
120.intro { 122.intro {
diff --git a/generate.sh b/generate.sh
index 78c6331..b9b3541 100755
--- a/generate.sh
+++ b/generate.sh
@@ -84,10 +84,10 @@ echo -ne "$(intro)<table>" >> ./docs/index.html
84# posts 84# posts
85posts=$(ls -t ./posts) 85posts=$(ls -t ./posts)
86mkdir -p docs/posts 86mkdir -p docs/posts
87rm -rf "./docs/posts/"
87 88
88for f in $posts; do 89for f in $posts; do
89 file="./posts/"$f 90 file="./posts/"$f
90 echo "generating post $file"
91 id="${file##*/}" # ill name my posts just fine 91 id="${file##*/}" # ill name my posts just fine
92 92
93 # generate posts 93 # generate posts
@@ -100,6 +100,7 @@ for f in $posts; do
100 height="$(height $lines)" 100 height="$(height $lines)"
101 101
102 post_title=$(title_wrapper "$id") 102 post_title=$(title_wrapper "$id")
103 echo "[~] $post_title"
103 post_date=$(date -r "$file" "+%d/%m — %Y") 104 post_date=$(date -r "$file" "+%d/%m — %Y")
104 post_link=$(link_wrapper "${id%.*}" "$post_title" "$post_date" "$r_time" "$height") 105 post_link=$(link_wrapper "${id%.*}" "$post_title" "$post_date" "$r_time" "$height")
105 echo -ne "$post_link" >> docs/index.html 106 echo -ne "$post_link" >> docs/index.html
@@ -123,8 +124,6 @@ esh -s /bin/bash \
123 -o "./docs/index.xml" \ 124 -o "./docs/index.xml" \
124 "rss.esh" 125 "rss.esh"
125 126
126
127
128cat >> ./docs/index.html << EOF 127cat >> ./docs/index.html << EOF
129 </table> 128 </table>
130 <div class="separator"></div> 129 <div class="separator"></div>
diff --git a/posts/font_size_fallacies.md b/posts/font_size_fallacies.md
new file mode 100644
index 0000000..e795135
--- /dev/null
+++ b/posts/font_size_fallacies.md
@@ -0,0 +1,81 @@
1I am not an expert with fonts, but I do have some
2experience [^exp], and common sense. This post aims to debunk some
3misconceptions about font sizes!
4
5[^exp]: https://github.com/nerdypepper/scientifica
6
711 px on your display is *probably not* 11 px on my display.
8Let's do some quick math. I have two displays, 1366x768 @
921" and another with 1920x1080 @ 13", call them `A` and
10`B` for now.
11
12Display `A` has 1,049,088 pixels. A pixel is a square, of
13side say, `s` cm. The total area covered by my 21" display
14is about 1,066 cm^2 (41x26). Thus,
15
16```
17Display A
18Dimensions: 1366x768 @ 21" (41x26 sq. cm)
191,049,088 s^2 = 1066
20 s = 0.0318 cm (side of a pixel on Display A)
21```
22
23Bear with me, as I repeat the number crunching for Display
24`B`:
25
26```
27Display B
28Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm)
292,073,600 s^2 = 486.75
30 s = 0.0153 cm (side of a pixel on Display B)
31```
32
33The width of a pixel on Display `A` is *double* the width of a
34pixel on Display `B`. The area occupied by a pixel on Display
35`A` is *4 times* the area occupied by a pixel on Display `B`.
36
37*The size of a pixel varies from display to display!*
38
39A 5x11 bitmap font on Display `A` would be around 4 mm tall
40whereas the same bitmap font on Display `B` would be around
411.9 mm tall. A 11 px tall character on `B` is visually
42equivalent to a 5 px character on `A`. When you view a
43screenshot of Display `A` on Display `B`, the contents are
44shrunk down by a factor of 2!
45
46So screen resolution is not enough, how else do we measure
47size? Pixel Density! Keen readers will realize that the 5^th
48grade math problem we solved up there showcases pixel
49density, or, pixels per cm (PPCM). Usually we deal with
50pixels per inch (PPI).
51
52**Note:** PPI is not to be confused with DPI [^dpi] (dots
53per inch). DPI is defined for printers.
54
55[^dpi]: https://en.wikipedia.org/wiki/Dots_per_inch
56
57In our example, `A` is a 75 ppi display and `B` is around
58165 ppi [^ppi]. A low ppi display appears to be
59'pixelated', because the pixels are more prominent, much
60like Display `A`. A higher ppi usually means you can view
61larger images and render crispier fonts. The average desktop
62display can stuff 100-200 pixels per inch. Smart phones
63usually fall into the 400-600 ppi (XXXHDPI) category. The
64human eye fails to differentiate detail past 300 ppi.
65
66*So ... streaming an 8K video on a 60" TV provides the same
67clarity as a HD video on a smart phone?*
68
69Absolutely. Well, clarity is subjective, but the amount of
70detail you can discern on mobile displays has always been
71limited. Salty consumers of the Xperia 1 [^sony] will say
72otherwise.
73
74[^sony]: https://en.wikipedia.org/wiki/Sony_Xperia_1
75
76Maybe I will talk about font rendering in another post, but
77thats all for now. Don't judge a font size by its
78screenshot.
79
80[^ppi]: https://www.sven.de/dpi/
81
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 17:28:31 +0000