WestonThayer

Screen recording of Samsung Internet browser running on a Galaxy S9. The web page showing has text sized with px and rem. When the browser's Text Size setting is increased to 200%, all text is doubled in size, regardless of whether px or rem was used.

WestonThayer

Two phones, side by side, showing a list of missed phone calls. It animates the content's zoom from 100% to 500%. The left phone magnifies font-size and margins, which becomes very hard to read above 200%, while the right phone only magnifies font-size and is much easier to read above 200%

WestonThayer

i stumbled across that article (https://www.imarc.com/blog/best-font-size-for-any-device) too, while trying to find guidance around minimum type sizing. to get actionable data, i combined

• info on what devices our customers were using / we wanted to support
• the x-height font metric for our typeface
• the above research on minimum viewing angle that @jpamental cited
• https://material.io/devices/ (click on a row to see Screen distance and dp/in, which should match css px/in)

assuming you trust Google's Screen distance values are accurate for that device's average viewing distance, you can track down the device with the highest dp/in you want to support in a particular viewing distance bucket, then choose your minimum font-size to fit it

there isn't a great way to target a "viewing distance bucket", but i thought normal viewport width media queries worked ok

WestonThayer

Installation

1. Download http://westonthayer.com/tmp/BloksBeta.zip
2. Unzip to
   • On a PC: %appdata%\Adobe\CEP\extensions\
   • On a Mac: ~/Library/Application Support/Adobe/CEP/extensions/
3. Rename the folder from BloksBeta to com.westonthayer.bloks
4. Enable unsigned Adobe CEP extensions
   • On a PC: open the registry editor (<WINKEY + R> then regedit) and add a value at HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.6 of type REG_SZ and value PlayerDebugMode. Set the data to 1

• On a Mac: in Terminal, run defaults write com.Adobe.CSXS.6 PlayerDebugMode 1