diff options
author | Akshay <[email protected]> | 2020-03-17 16:53:49 +0000 |
---|---|---|
committer | Akshay <[email protected]> | 2020-03-17 16:53:49 +0000 |
commit | 214e6cb76772989324be55c3ffa2d39dfa296295 (patch) | |
tree | 42648e31ff2dde5199c63eccda46966cbd077667 /docs | |
parent | 9227a05c650c12fb45d8cf6497165d2641335438 (diff) |
new post: Font Size Fallacies
Diffstat (limited to 'docs')
-rw-r--r-- | docs/index.html | 17 | ||||
-rw-r--r-- | docs/index.xml | 99 | ||||
-rw-r--r-- | docs/posts/font_size_fallacies/index.html | 153 | ||||
-rw-r--r-- | docs/style.css | 16 |
4 files changed, 278 insertions, 7 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 | ||
17 | experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some | ||
18 | misconceptions about font sizes!</p> | ||
19 | |||
20 | <p>11 px on your display is <em>probably not</em> 11 px on my display. | ||
21 | Let's do some quick math. I have two displays, 1366x768 @ | ||
22 | 21” and another with 1920x1080 @ 13”, 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 | ||
26 | side say, <code>s</code> cm. The total area covered by my 21” display | ||
27 | is about 1,066 cm<sup>2</sup> (41x26). Thus,</p> | ||
28 | |||
29 | <pre><code>Display A | ||
30 | Dimensions: 1366x768 @ 21" (41x26 sq. cm) | ||
31 | 1,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 | ||
39 | Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm) | ||
40 | 2,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 | ||
45 | pixel 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 | ||
51 | whereas the same bitmap font on Display <code>B</code> would be around | ||
52 | 1.9 mm tall. A 11 px tall character on <code>B</code> is visually | ||
53 | equivalent to a 5 px character on <code>A</code>. When you view a | ||
54 | screenshot of Display <code>A</code> on Display <code>B</code>, the contents are | ||
55 | shrunk down by a factor of 2!</p> | ||
56 | |||
57 | <p>So screen resolution is not enough, how else do we measure | ||
58 | size? Pixel Density! Keen readers will realize that the 5<sup>th</sup> | ||
59 | grade math problem we solved up there showcases pixel | ||
60 | density, or, pixels per cm (PPCM). Usually we deal with | ||
61 | pixels 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 | ||
64 | per 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 | ||
67 | 165 ppi <sup id="fnref3"><a href="#fn3" rel="footnote">3</a></sup>. A low ppi display appears to be | ||
68 | ‘pixelated’, because the pixels are more prominent, much | ||
69 | like Display <code>A</code>. A higher ppi usually means you can view | ||
70 | larger images and render crispier fonts. The average desktop | ||
71 | display can stuff 100-200 pixels per inch. Smart phones | ||
72 | usually fall into the 400-600 ppi (XXXHDPI) category. The | ||
73 | human eye fails to differentiate detail past 300 ppi.</p> | ||
74 | |||
75 | <p><em>So … streaming an 8K video on a 60” TV provides the same | ||
76 | clarity as a HD video on a smart phone?</em></p> | ||
77 | |||
78 | <p>Absolutely. Well, clarity is subjective, but the amount of | ||
79 | detail you can discern on mobile displays has always been | ||
80 | limited. Salty consumers of the Xperia 1 <sup id="fnref4"><a href="#fn4" rel="footnote">4</a></sup> will say | ||
81 | otherwise.</p> | ||
82 | |||
83 | <p>Maybe I will talk about font rendering in another post, but | ||
84 | thats all for now. Don't judge a font size by its | ||
85 | screenshot.</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://github.com/nerdypepper/scientifica</a> <a href="#fnref1" rev="footnote">↩</a></p> | ||
93 | </li> | ||
94 | |||
95 | <li id="fn2"> | ||
96 | <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> | ||
97 | </li> | ||
98 | |||
99 | <li id="fn3"> | ||
100 | <p><a href="https://www.sven.de/dpi/">https://www.sven.de/dpi/</a> <a href="#fnref3" rev="footnote">↩</a></p> | ||
101 | </li> | ||
102 | |||
103 | <li id="fn4"> | ||
104 | <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> | ||
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. |
17 | It looked super gimmicky to me at first, but it eventually | 116 | It 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 |   | ||
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 | ||
41 | experience <sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>, and common sense. This post aims to debunk some | ||
42 | misconceptions about font sizes!</p> | ||
43 | |||
44 | <p>11 px on your display is <em>probably not</em> 11 px on my display. | ||
45 | Let's do some quick math. I have two displays, 1366x768 @ | ||
46 | 21” and another with 1920x1080 @ 13”, 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 | ||
50 | side say, <code>s</code> cm. The total area covered by my 21” display | ||
51 | is about 1,066 cm<sup>2</sup> (41x26). Thus,</p> | ||
52 | |||
53 | <pre><code>Display A | ||
54 | Dimensions: 1366x768 @ 21" (41x26 sq. cm) | ||
55 | 1,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 | ||
63 | Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm) | ||
64 | 2,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 | ||
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 | |||
74 | <p>A 5x11 bitmap font on Display <code>A</code> would be around 4 mm tall | ||
75 | whereas the same bitmap font on Display <code>B</code> would be around | ||
76 | 1.9 mm tall. A 11 px tall character on <code>B</code> is visually | ||
77 | equivalent to a 5 px character on <code>A</code>. When you view a | ||
78 | screenshot of Display <code>A</code> on Display <code>B</code>, the contents are | ||
79 | shrunk down by a factor of 2!</p> | ||
80 | |||
81 | <p>So screen resolution is not enough, how else do we measure | ||
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> | ||
114 | |||
115 | <li id="fn1"> | ||
116 | <p><a href="https://github.com/nerdypepper/scientifica">https://github.com/nerdypepper/scientifica</a> <a href="#fnref1" rev="footnote">↩</a></p> | ||
117 | </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> | ||
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 | ||
29 | html { | 29 | html { |
30 | font-size: 18px; | 30 | font-size: 17px; |
31 | } | 31 | } |
32 | 32 | ||
33 | table { | 33 | table { |
@@ -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 | ||
91 | hr { | 91 | hr { |
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 { |