diff options
Diffstat (limited to 'posts')
-rw-r--r-- | posts/font_size_fallacies.md | 81 |
1 files changed, 81 insertions, 0 deletions
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 @@ | |||
1 | I am not an expert with fonts, but I do have some | ||
2 | experience [^exp], and common sense. This post aims to debunk some | ||
3 | misconceptions about font sizes! | ||
4 | |||
5 | [^exp]: https://github.com/nerdypepper/scientifica | ||
6 | |||
7 | 11 px on your display is *probably not* 11 px on my display. | ||
8 | Let's do some quick math. I have two displays, 1366x768 @ | ||
9 | 21" and another with 1920x1080 @ 13", call them `A` and | ||
10 | `B` for now. | ||
11 | |||
12 | Display `A` has 1,049,088 pixels. A pixel is a square, of | ||
13 | side say, `s` cm. The total area covered by my 21" display | ||
14 | is about 1,066 cm^2 (41x26). Thus, | ||
15 | |||
16 | ``` | ||
17 | Display A | ||
18 | Dimensions: 1366x768 @ 21" (41x26 sq. cm) | ||
19 | 1,049,088 s^2 = 1066 | ||
20 | s = 0.0318 cm (side of a pixel on Display A) | ||
21 | ``` | ||
22 | |||
23 | Bear with me, as I repeat the number crunching for Display | ||
24 | `B`: | ||
25 | |||
26 | ``` | ||
27 | Display B | ||
28 | Dimensions: 1920x1080 @ 13" (29.5x16.5 sq. cm) | ||
29 | 2,073,600 s^2 = 486.75 | ||
30 | s = 0.0153 cm (side of a pixel on Display B) | ||
31 | ``` | ||
32 | |||
33 | The width of a pixel on Display `A` is *double* the width of a | ||
34 | pixel 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 | |||
39 | A 5x11 bitmap font on Display `A` would be around 4 mm tall | ||
40 | whereas the same bitmap font on Display `B` would be around | ||
41 | 1.9 mm tall. A 11 px tall character on `B` is visually | ||
42 | equivalent to a 5 px character on `A`. When you view a | ||
43 | screenshot of Display `A` on Display `B`, the contents are | ||
44 | shrunk down by a factor of 2! | ||
45 | |||
46 | So screen resolution is not enough, how else do we measure | ||
47 | size? Pixel Density! Keen readers will realize that the 5^th | ||
48 | grade math problem we solved up there showcases pixel | ||
49 | density, or, pixels per cm (PPCM). Usually we deal with | ||
50 | pixels per inch (PPI). | ||
51 | |||
52 | **Note:** PPI is not to be confused with DPI [^dpi] (dots | ||
53 | per inch). DPI is defined for printers. | ||
54 | |||
55 | [^dpi]: https://en.wikipedia.org/wiki/Dots_per_inch | ||
56 | |||
57 | In our example, `A` is a 75 ppi display and `B` is around | ||
58 | 165 ppi [^ppi]. A low ppi display appears to be | ||
59 | 'pixelated', because the pixels are more prominent, much | ||
60 | like Display `A`. A higher ppi usually means you can view | ||
61 | larger images and render crispier fonts. The average desktop | ||
62 | display can stuff 100-200 pixels per inch. Smart phones | ||
63 | usually fall into the 400-600 ppi (XXXHDPI) category. The | ||
64 | human eye fails to differentiate detail past 300 ppi. | ||
65 | |||
66 | *So ... streaming an 8K video on a 60" TV provides the same | ||
67 | clarity as a HD video on a smart phone?* | ||
68 | |||
69 | Absolutely. Well, clarity is subjective, but the amount of | ||
70 | detail you can discern on mobile displays has always been | ||
71 | limited. Salty consumers of the Xperia 1 [^sony] will say | ||
72 | otherwise. | ||
73 | |||
74 | [^sony]: https://en.wikipedia.org/wiki/Sony_Xperia_1 | ||
75 | |||
76 | Maybe I will talk about font rendering in another post, but | ||
77 | thats all for now. Don't judge a font size by its | ||
78 | screenshot. | ||
79 | |||
80 | [^ppi]: https://www.sven.de/dpi/ | ||
81 | |||