Setting font-size based on viewing distance

I want to set the font-size at the most comfortable size for reading. But this depends on the distance from the reader to the screen.

Can we estimate this distance from screen size? I measured my viewing distance for four devices:

Mobile (portrait) Mobile (landscape) Laptop Desktop
Width 7 15 29 62
Weight 15 7 18 34
Distance 25 30 50 80

I found that 17cm + width decently predicts the viewing distance.

Now given an estimated viewing distance, we can translate desired an angular size (like 1 degree) into an absolute size with dist * tan(angle).

We can express that in CSS with: calc((17cm + 100vw) * tan(1deg)). This red box is 1 degree of your field of view:

And this text is font-size: 0.5deg (estimated):

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Result: I’m not convinced that the optimum font-size is purely an angular size. There are other considerations, like:

Discussion on Hacker News.
Tagged #programming, #web.
đź‘‹ I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2024. Content is not associated with my employer. Found an error? Edit this page.