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/posts/font_size_fallacies/index.html | 153 ++++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 docs/posts/font_size_fallacies/index.html (limited to 'docs/posts/font_size_fallacies') 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 +
+
+ + -- cgit v1.2.3