Text rendering spacing - help needed


#1

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.


#2

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)


#3

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?