The short answer is: use Helvetica. No one ever got fired for choosing Helvetica. The long answer, though, is a bit more nuanced than that. 

Just a few years ago, your font choices for web design were limited to Arial, Georgia, Times, Verdana and a couple of others. These were the only fonts you could be sure that everyone had on every platform. But over the last few years, "web fonts" gained full support across all common browsers. Now you can choose from thousands of font options. Typography is cool again.

Not too many years ago, Arial, Times and Verdana were some of the only fonts you could safely use on the web.

Not too many years ago, Arial, Times and Verdana were some of the only fonts you could safely use on the web.

So can you use any font in your prototype? It depends on the format of your deliverable. If you’re delivering a PDF, a static image, a video, or an HTML prototype, then yes — you can use any font you want. If you’re delivering a prototype in Keynote, though, which is increasingly popular due to its speed and flexibility, you should likely stick to fonts that are included with OSX. That lets others use your prototype without needing to install new fonts. 

When I’m choosing the workhorse font for my prototype, I ask myself a few questions:

1. Does the font have the right vibe? Fonts can feel serious, playful, sedate, feminine, dignified, fun. Does my chosen font suit the nature of the app?

2. Is the font sufficiently plain? Many fonts have too much character. They might make a good choice for a logo, but I'll get tired of them if they’re all over my interface.

3. Will the font look good small? The readability of some fonts, especially serifs, tends to suffer when they get small.

4. Is the font versatile? Most fonts have a regular and a bold in normal and italics. But for more interface flexibility, I find it really useful to have options like Light, Medium, Semibold and Black.

With the forgoing questions in mind, here are my top 3 choices for prototype fonts:

Helvetica Neue. Like I said at the outset, nobody ever got fired for choosing Helvetica. It’s a classic font and it’s the default for iOS. Apple includes 14 styles and weights of it on OSX and iOS.

Avenir Next. Specifically designed for on-screen readability, Avenir Next has a slightly friendlier feel than Helvetica. It works well at all sizes, and Apple includes 24 styles and weights for flexibility.

Roboto and Roboto Slab. Roboto is the default font on Android, and its 18 styles can be downloaded free from Google Fonts. Roboto Slab is Roboto's flashier cousin, and it’s the font I use here on chrismcgrath.com. 

My top picks for prototype fonts are Helvetica Neue, Avenir Next, and Roboto

My top picks for prototype fonts are Helvetica Neue, Avenir Next, and Roboto

In some cases you may need a secondary font for accents, such as titles or headings. The most important thing to remember is contrast. Your accent font should be very different: bigger, or bolder, or funner. Typewolf’s Font Recommendations is a great place to browse for ideas.

Finally, remember that many prototypes will pass through visual design prior to development. The visual designer may very well pick new colours and new fonts. So don’t get hung up on font choice. Choose a workhorse font that’s readable, flexible, and doesn’t draw too much attention to itself, then move on!

Also see my post, How to Pick Colours For Your App Prototype