Text rendering spacing - help needed

This issue with the font overrunning the layout is crazy making. :frowning:

image

Trying to guess when and how much to try to adjust the text area in RP is irritating and often unsuccessful in resolving the issue. I see it in Preview and in Published prototypes. I see it in all font faces and sizes… I see it in all breakpoints, though not always the same widget on every breakpoint.

I understand that the browsers will render the fonts slightly differently as does the Adaptive view and they impact the issue I am seeing. Given that, what are tips to help control the issue?!

I’ve got a very picky Creative Director who will not be able to have a constructive conversation about a layout when the font does something like this. It will completely derail into “fix the prototype”. Not to mention, I don’t like to show to clients when it looks this sloppy.

Most of my demos are done Win 10 PC running Chrome. The above example is using the defaults from the Axure paragraph widget.

1 Like

Hi!

Axure doesn’t allow you to specify character spacing. (Maybe Axure 9 does? I don’t know.) But you can do so using some javascript. This example OnPageLoad sets the character spacing of every text container whose name starts with “text” to -0.2px, which seems closer to how Axure displays it in design mode.

changeLetterSpacingViaJavascript.rp (67.4 KB)

This continues to be a frustration in Axure 9 and a reason why it is hard for Axure to be taken seriously as a design tool. At the very least, Is there ANY browser that reliably renders text identically to how it appears in Axure?

I really don’t need it to be a design tool (as in Visual Design) because I’m almost always in low-fidelity wires (relative to brand and visual language). I do need it to not flub up the text display when generating the prototype because I and focused on the information and task flow design. I need it to show the data/information/copy and demonstrate the functionality. When the copy is over-running the module boundaries or button or whatever, it derails the conversation about what & how because people are distracted by the “messy”.

Hi guys! In Axure RP 9 there are two features for text that should help to achieve a consistent look and feel across browsers. One is line spacing, which was also available in RP 8, and one is character spacing, which is new in RP 9. If these are both undefined/set to auto, then this leaves the spacing up to the browser and can result in inconsistent rendering. If you define both of these then this should lock things down and keep text from shifting all over the place in different browsers. Hopefully that helps!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.