From 214e6cb76772989324be55c3ffa2d39dfa296295 Mon Sep 17 00:00:00 2001 From: Akshay Date: Tue, 17 Mar 2020 22:23:49 +0530 Subject: new post: Font Size Fallacies --- docs/index.html | 17 ++++ docs/index.xml | 99 +++++++++++++++++++ docs/posts/font_size_fallacies/index.html | 153 ++++++++++++++++++++++++++++++ docs/style.css | 16 ++-- generate.sh | 5 +- posts/font_size_fallacies.md | 81 ++++++++++++++++ 6 files changed, 361 insertions(+), 10 deletions(-) create mode 100644 docs/posts/font_size_fallacies/index.html create mode 100644 posts/font_size_fallacies.md diff --git a/docs/index.html b/docs/index.html index e0b1d1f..0ad7403 100644 --- a/docs/index.html +++ b/docs/index.html @@ -29,6 +29,23 @@

Get in touch at nerd@irc.rizon.net or nerdypepper@chat.freenode.net.

+ + + + +
+
+ 17/03 — 2020 +
+ + Font Size Fallacies + + 		+ + 3.2 + + min +
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 @@ en-us Creative Commons BY-NC-SA 4.0 +Font Size Fallacies +

I am not an expert with fonts, but I do have some +experience 1, and common sense. This post aims to debunk some +misconceptions about font sizes!

+ +

11 px on your display is probably not 11 px on my display. +Let's do some quick math. I have two displays, 1366x768 @ +21” and another with 1920x1080 @ 13”, call them A and +B for now.

+ +

Display A has 1,049,088 pixels. A pixel is a square, of +side say, s cm. The total area covered by my 21” display +is about 1,066 cm2 (41x26). Thus,

+ +
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)
+
+ +

Bear with me, as I repeat the number crunching for Display +B:

+ +
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)
+
+ +

The width of a pixel on Display A is double the width of a +pixel on Display B. The area occupied by a pixel on Display +A is 4 times the area occupied by a pixel on Display B.

+ +

The size of a pixel varies from display to display!

+ +

A 5x11 bitmap font on Display A would be around 4 mm tall +whereas the same bitmap font on Display B would be around +1.9 mm tall. A 11 px tall character on B is visually +equivalent to a 5 px character on A. When you view a +screenshot of Display A on Display B, the contents are +shrunk down by a factor of 2!

+ +

So screen resolution is not enough, how else do we measure +size? Pixel Density! Keen readers will realize that the 5th +grade math problem we solved up there showcases pixel +density, or, pixels per cm (PPCM). Usually we deal with +pixels per inch (PPI).

+ +

Note: PPI is not to be confused with DPI 2 (dots +per inch). DPI is defined for printers.

+ +

In our example, A is a 75 ppi display and B is around +165 ppi 3. A low ppi display appears to be +‘pixelated’, because the pixels are more prominent, much +like Display A. 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.

+ +

So … streaming an 8K video on a 60” TV provides the same +clarity as a HD video on a smart phone?

+ +

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 4 will say +otherwise.

+ +

Maybe I will talk about font rendering in another post, but +thats all for now. Don't judge a font size by its +screenshot.

+ +
+
+
    + +
  1. +

    https://github.com/nerdypepper/scientifica ↩

    +
    2. + +
  2. +

    https://en.wikipedia.org/wiki/Dots_per_inch ↩

    +
    3. + +
  3. +

    https://www.sven.de/dpi/ ↩

    +
    4. + +
  4. +

    https://en.wikipedia.org/wiki/Sony_Xperia_1 ↩

    +
    5. + +
+
 +https://peppe.rs/posts/font_size_fallacies/ +Tue, 17 Mar 2020 16:52:00 +0000 +https://peppe.rs/posts/font_size_fallacies/ + + Termux Tandem

I learnt about termux from a friend on IRC recently. 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 @@ + + + + + + + + + + + + + + Font Size Fallacies · peppe.rs + +

+
+ ⟵ Back + View Raw +
+
+ 17/03 — 2020 +
+ + 32.36 + + cm +   + + 3.2 + + min +
+
+ + Font Size Fallacies + +
+

I am not an expert with fonts, but I do have some +experience 1, and common sense. This post aims to debunk some +misconceptions about font sizes!

+ +

11 px on your display is probably not 11 px on my display. +Let's do some quick math. I have two displays, 1366x768 @ +21” and another with 1920x1080 @ 13”, call them A and +B for now.

+ +

Display A has 1,049,088 pixels. A pixel is a square, of +side say, s cm. The total area covered by my 21” display +is about 1,066 cm2 (41x26). Thus,

+ +
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)
+
+ +

Bear with me, as I repeat the number crunching for Display +B:

+ +
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)
+
+ +

The width of a pixel on Display A is double the width of a +pixel on Display B. The area occupied by a pixel on Display +A is 4 times the area occupied by a pixel on Display B.

+ +

The size of a pixel varies from display to display!

+ +

A 5x11 bitmap font on Display A would be around 4 mm tall +whereas the same bitmap font on Display B would be around +1.9 mm tall. A 11 px tall character on B is visually +equivalent to a 5 px character on A. When you view a +screenshot of Display A on Display B, the contents are +shrunk down by a factor of 2!

+ +

So screen resolution is not enough, how else do we measure +size? Pixel Density! Keen readers will realize that the 5th +grade math problem we solved up there showcases pixel +density, or, pixels per cm (PPCM). Usually we deal with +pixels per inch (PPI).

+ +

Note: PPI is not to be confused with DPI 2 (dots +per inch). DPI is defined for printers.

+ +

In our example, A is a 75 ppi display and B is around +165 ppi 3. A low ppi display appears to be +‘pixelated’, because the pixels are more prominent, much +like Display A. 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.

+ +

So … streaming an 8K video on a 60” TV provides the same +clarity as a HD video on a smart phone?

+ +

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 4 will say +otherwise.

+ +

Maybe I will talk about font rendering in another post, but +thats all for now. Don't judge a font size by its +screenshot.

+ +
+
+
    + +
  1. +

    https://github.com/nerdypepper/scientifica ↩

    +
    2. + +
  2. +

    https://en.wikipedia.org/wiki/Dots_per_inch ↩

    +
    3. + +
  3. +

    https://www.sven.de/dpi/ ↩

    +
    4. + +
  4. +

    https://en.wikipedia.org/wiki/Sony_Xperia_1 ↩

    +
    5. + +
+
+ +
+ +
+ Hi. Subscribe +

I'm Akshay, I go by nerd or nerdypepper on the internet.

+

+ 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. +

+

Get in touch at nerd@irc.rizon.net or nerdypepper@chat.freenode.net.

+
+ + ⟵ Back + View Raw +
+
+ + 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 { } html { - font-size: 18px; + font-size: 17px; } table { @@ -49,8 +49,8 @@ td { } .posts { - width: 90%; - max-width: 90%; + width: 97%; + max-width: 650px; } @media only screen and (min-width: 1080px) { @@ -64,7 +64,7 @@ td { @media only screen and (min-width: 1400px) { .posts { - max-width: 700px; + max-width: 650px; } html { font-size: 18px; @@ -89,7 +89,9 @@ img { } hr { - color: var(--dark-white); + height: 2px; + background-color: var(--dark-white); + border: none; } .date { @@ -111,10 +113,10 @@ hr { color: var(--black) !important; background-color: var(--cyan); font-size: 0.8rem; - padding: 0.5rem; + padding: 0.3rem 0.5rem; margin: -0.5rem 0; border: 0px solid var(--dark-white); - border-radius: 0.4rem; + border-radius: 0.2rem; } .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)" >> ./docs/index.html # posts posts=$(ls -t ./posts) mkdir -p docs/posts +rm -rf "./docs/posts/" for f in $posts; do file="./posts/"$f - echo "generating post $file" id="${file##*/}" # ill name my posts just fine # generate posts @@ -100,6 +100,7 @@ for f in $posts; do height="$(height $lines)" post_title=$(title_wrapper "$id") + echo "[~] $post_title" post_date=$(date -r "$file" "+%d/%m — %Y") post_link=$(link_wrapper "${id%.*}" "$post_title" "$post_date" "$r_time" "$height") echo -ne "$post_link" >> docs/index.html @@ -123,8 +124,6 @@ esh -s /bin/bash \ -o "./docs/index.xml" \ "rss.esh" - - cat >> ./docs/index.html << EOF
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 @@ +I am not an expert with fonts, but I do have some +experience [^exp], and common sense. This post aims to debunk some +misconceptions about font sizes! + +[^exp]: https://github.com/nerdypepper/scientifica + +11 px on your display is *probably not* 11 px on my display. +Let's do some quick math. I have two displays, 1366x768 @ +21" and another with 1920x1080 @ 13", call them `A` and +`B` for now. + +Display `A` has 1,049,088 pixels. A pixel is a square, of +side say, `s` cm. The total area covered by my 21" display +is about 1,066 cm^2 (41x26). Thus, + +``` +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) +``` + +Bear with me, as I repeat the number crunching for Display +`B`: + +``` +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) +``` + +The width of a pixel on Display `A` is *double* the width of a +pixel on Display `B`. The area occupied by a pixel on Display +`A` is *4 times* the area occupied by a pixel on Display `B`. + +*The size of a pixel varies from display to display!* + +A 5x11 bitmap font on Display `A` would be around 4 mm tall +whereas the same bitmap font on Display `B` would be around +1.9 mm tall. A 11 px tall character on `B` is visually +equivalent to a 5 px character on `A`. When you view a +screenshot of Display `A` on Display `B`, the contents are +shrunk down by a factor of 2! + +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). + +**Note:** PPI is not to be confused with DPI [^dpi] (dots +per inch). DPI is defined for printers. + +[^dpi]: https://en.wikipedia.org/wiki/Dots_per_inch + +In our example, `A` is a 75 ppi display and `B` is around +165 ppi [^ppi]. A low ppi display appears to be +'pixelated', because the pixels are more prominent, much +like Display `A`. 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. + +*So ... streaming an 8K video on a 60" TV provides the same +clarity as a HD video on a smart phone?* + +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 [^sony] will say +otherwise. + +[^sony]: https://en.wikipedia.org/wiki/Sony_Xperia_1 + +Maybe I will talk about font rendering in another post, but +thats all for now. Don't judge a font size by its +screenshot. + +[^ppi]: https://www.sven.de/dpi/ + -- cgit v1.2.3