Type and trig: Understanding how to scale text for automobile design (with bonus calculator!)

I had a wonderful time talking at the AIGA Seattle’s monthly design meetup last week about user experience in automobiles and how we can effectively balance UI design and driver safety. (You can view the static slides of my presentation or slides with videos to see everything I talked about.) One of the big points I hit on with the attendees was making text elements and graphics too small in the UI. I started the section with a pop quiz.

And, as expected, I got the collective, “Whaaaa?” But seriously… 20 arcminutes. What the heck does that mean?

Yar! Thar be trig here!

Unfortunately for you designers, the way in which you determine optimum screen text requires a bit of trigonometry. But don’t worry. I won’t go too deep into the math. Just enough so we understand what’s going on.

What we care about is the distance the screen is away from the driver, the display height of the screen, and the visual angle we are optimizing to. This is where my pop quiz comes in: the National Highway Transportation Safety Administration, or NHTSA, sets standards for the visual angles required for the sizing of type and graphics inside an automobile.

According to NHTSA, the size of text for screens is as follows:

• 20 arcminutes is the optimal visual angle
• 16 arcminutes is the minimum visual angle for “time critical” text.
• 12 arcminutes is the absolute minimum visual angle.

The reason for the variability by NHTSA is because some leeway is given as all text at a minimum 20 arcminutes is hard to apply consistently while still making a good design for your in-car application.

It’s Equation Time

NHTSA says if you want to find the height of text and you know the screen distance and the visual angle, you should use the following formula

$H=1000 \times D \times \tan(\frac{V}{60})$

Where $D$ is the distance to the screen in meters and $V$ the visual angle in arcminutes. The problem here is that $H$ is returned in millimeters. We would like the height returned in points, something we are all a little more familiar with when designing.

To do this, you need a couple more pieces of information.

• The size of the screen’s diagonal, in inches. We will call this $S$.
• The resolution of the screen. Typically this is in pixels, but we just need to know the ratio of the width to the height. We will call the width $w$ and the height $h$.

First up is getting the ratio of width to height of the screen. We will call this $R$.

$R=\frac{w}{h}$

Now we need to calculate the height of the screen in inches. Let’s call this $H_{S}$

$H_{S} = \frac{S}{\sqrt{R^{2}+1}}$

Now, we can get the text height in points.

$T = H \times \frac{h}{H_{S}} \div 72$

Whee! Wasn’t that fun? But now we know the proper text sizing for our car application. Let’s try it out.

An example: Let’s say we have a 10.2″ screen, displaying at 1920 by 720 pixels that is 818 millimeters away from a driver. What is the minimum size for optimal text based on NHTSA standards?

$H=1000 \times .818 \times \tan(\frac{20}{60})=4.759$

$R=\frac{1920}{720}=2.667$

$H_{S} = \frac{10.2}{\sqrt{2.667^{2}+1}}=3.581$

$T = 4.759 \times \frac{720}{3.581} \div 72 \approx 14$

But here’s the crazy thing: this works for everything. We don’t use this when designing for monitors on desks or mobile devices in our hands because we have an instinct about the size of text that is legible on these devices. If we’re designing for something really strange, we can use this formula to figure out what is optimal in that scenario. How about another example to show what I mean.

An example: Let’s say we are designing for the Dallas Cowboys’ jumbotron, which is 72 feet tall and 160 feet wide with a resolution of 1920 by 1080 pixels. What is the minimum legible text for the furthest fan 300 meters away if we use 16 arcmeters as our visual angle?

Your minimum for this Jumbotron design is 28-point type.

I did the math so you don’t have to!

Instead of crunching the numbers yourself, use this handy-dandy little calculator I authored below. Now remember, the answer I’m giving is in points are not pixels. Converting from points to pixels will require you to know the individual cap height of the text you are rendering, the pixel density of the screens, and how the operating system renders the text. There are charts out there that provide a handy reference point if you don’t know the exact details of the screen you are rendering to.