Axure Tutorial: 4 Typography Tips for Higher Fidelity Prototypes

| In Tips and Tricks | by Panayiotis Karabetis

axure tutorial for working with type in axure rp pro

If you're looking for an Axure tutorial about advanced interactions or the latest API hacks, please leave now and type this into Google. This is more of a basic Axure tutorial that aims to take you on a magic typography ride. It's made up of one part typographic history and 5 parts working with Axure's type tools. I used Axure 6.5 Beta for this Axure tutorial, but everything discussed hereinafter—my lawyer would be proud—can be accomplished using Axure 6.

Line Spacing: What's in a Name?

Print designers call it leading. Web Designers code it as line-height in their CSS. Axure labels it line spacing, but at the end of the day, it's all about setting the space between lines of text.

Here comes the one part history I promised you. When Johannes Gutenberg introduced moveable type to the world, the letters used on his printing press were carved from wood and metal. The term leading comes from the act of using pieces of lead as spacers between the rows of letters on the press to set the space between each line of type. The next time someone complains about Axure's $589 price tag, remind them to be thankful that they're not up all night chiselling letters out of hard matter to meet a prototype deadline!

Anyway, Axure's widget properties let you set the line spacing for text in text panels and shapes, but are we using this feature to improve our prototypes' usability and readability? One more piece of typopgraphic theory and I'll get to it. Print designers, yes I used to be one, notate leading as follows:

print design notation for leading

Above, the font size and leading are measured in points, not pixels. When it comes to Axure, the proper use of Line Spacing can make the text in your prototype breathe and feel less cluttered. Here are three different examples of line spacing in Axure using Arial at 13px with 13px, 18px, and 22px line spacing:

exampes of line spacing in axure rp pro

Which one reads better to you? I hope you don't say the first one. A general rule of thumb for creating legible in print design is 2 points more than the Serif font size and 4 points more than the Sans Serif font size. Using what we just learned, that would be written as:

  • Arial 12/16
  • Times New Roman 12/14

Once you find your perfect balance of font size and line spacing, customize your default text panel settings in the Widget Style Editor to save tons of time when you're churning out wireframes and prototyopes in the future:

axure rp pro widget style editor

Use Fewer Text Panels

This one is quick and will make your life easier once you understand how to utilize it. You can apply mulptiple atrributes from the Widget Properties pane into a single text panel or shape. Behold, visual proof:

axure text panels can apply multiple widget properties pane attributes

Here's another example where one text panel is used for both the heading and body text:

an axure rp pro text panel with heading and body content

Using fewer text panels means less panesl to rearrange and realign when making quick changes.

Keep the Grid, Play with Padding

Let's assume you want to snap your text panels to the exact columns guides in your grid without having to think too much. The problem with using text panels for this is that they have no padding and will have to be resized to be readable, which means you can't snap them to exact grid lines. That defeats the purpose:

axue text panels too tight without adjustment

Instead of text panels in this scenario, use shapes with no Fill or Line color instead. Using shapes enables the padding values to be adjusted for each side of the shape. Since shapes have this flexibility and text panels don't, you can snap the shapes to the exact guidelines making it fast and easy to do the math for each column:

axure shapes with adjusted text using padding values

A Slice of Type

If your typographic creativity goes off the deep end, it will surely drown when your prototype is generated. For example, if you use a font in Axure that's not web safe, it won't render the same way in a browser without hacking the CSS.

non web safe fonts don't render in axure

I used the Axure Handwriting font face to type out the above line, but unless end-users have it installed on their machines, the type will  be replaced with a default web font like Arial or Helvetica after rendering. To combat this, copy the text panel and use the Paste Special > Paste as Image feature in Axure:

paste as image in axure

Use caution: the pasted image will have a white background and can't be used where transparency is needed. As an added bonus, Axure's slice tool will keep you from having to perform chop suey in Photoshop. To quickly slice an image down to size, right-click the image and select Edit Image > Slice Image:

slice image in axure rp pro

When the slice tool appears, position its trusty cross-hairs where you want to cut and left-click to execute image castration:

axure image slice tool

Conclusion

Axure provides plenty of typographic power with its Widget Properties pane if you take the time to bend them to your will. Creativity is the only thing stopping you from instilling a WOW or AHHH factor in your prototypes, so shut down Photoshop and Illustrator for two seconds and experiment with what Axure has to offer. For those still using Axure 6, try out Axure 6.5 Beta for the new rotate tool. You''ll probably do a 180º.

Be The First to Comment

Leave a Comment

Commenting is not available in this channel entry.