Text in preview shows bigger than in Axure

Hello!

Text in the browser preview shows to me as 12px, while in Axure it’s set to 9px.
Funny thing is that it’s wrong on one of my Chrome accounts, and perfectly fine on another.
I’ve cleared cached images and files - no change.

I’m using Roboto font - did the web fonts thing using a link “https://fonts.googleapis.com/css?family=Roboto
but the same thing happens with Arial and Times New Roman.

Any ideas guys?

Hello!

Hmm, it looks like you’re seeing that the text looks physically larger when you preview your prototype in Chrome on one account, but it works when you switch accounts. To confirm, when you switch accounts are you using a separate machine or just switching accounts in the browser? If you’re switching on the same machine, then do you have any account-specific font settings changed in that account that may display fonts larger? Does the issue present itself in other browsers, or in the local generated HTML or Axure Share?

As far as the prototype itself, if you go to “Project > Project Settings”, is the “DPI Settings” set to something larger than 72? Similarly, in “Publish > Generate HTML > Advanced” is the checkbox for using pts instead of pixels enabled or disabled? Likewise, is the browser setting set to anything above 100%?

The above will help to narrow down which settings may be causing issues. If you’re able to take screenshots or attach the affected file, that would help to determine if it’s reproducible on our machines as well. Thanks!

Hi Alyssa and thanks for your response.

To confirm, when you switch accounts are you using a separate machine or just switching accounts in the browser?

Same machine, switching account in the browser.

If you’re switching on the same machine, then do you have any account-specific font settings changed in that account that may display fonts larger? Does the issue present itself in other browsers, or in the local generated HTML or Axure Share?

Problem persists in incognito mode of the same Chrome profile. Same problem on local preview and Axshare.

As far as the prototype itself, if you go to “Project > Project Settings”, is the “DPI Settings” set to something larger than 72? Similarly, in “Publish > Generate HTML > Advanced” is the checkbox for using pts instead of pixels enabled or disabled? Likewise, is the browser setting set to anything above 100%?

I just checked it there and it’s all fine.

The above will help to narrow down which settings may be causing issues. If you’re able to take screenshots or attach the affected file, that would help to determine if it’s reproducible on our machines as well. Thanks!

I’ve created a new file and the problem persists - I’m sharing this RP file with you.
fonts bigger in browser.rp (48.4 KB)

(I’ve made sure it’s not the library component that causes the problem)

I will need to do a closer investigation into the extensions and other Chrome settings, but looking briefly I can’t see anything that could change how the text is displayed.

Please do let me know if you have any other suggestions

Thanks for that! When viewing your file on my end I see the fonts render as expected (9px and 12px), but your screenshots and info about the differences between accounts gave me a hint. It looks like only the 9px font was affected; in Chrome, if you open the Settings menu and scroll down to and open the “Customize Fonts” section, there’s a slider that controls the minimum size of fonts for the Chrome account that you’re signed in to. From the screenshots, it looks like your minimum font size might currently be set to 12; decreasing that value on the slider should let your 9px fonts kick in when signed in to your Work account.

Hopefully that does the trick!

2 Likes

We have a winner! Thank you very much!

I never knew about the existence of these settings and I don’t think I’ve ever messed with them. Do you know how this may have happened? I’m just worried that others will have the same setting on by default, which would ultimately mean that using text below 12px is banned.

I’m glad that helped! As far as how the minimum font size got set to 12px, I can’t say off the top of my head how it would have changed for one of your profiles and not the other without going through the settings. :thinking: In a quick test on my end it looks like the default minimum font size for new Chrome profiles is set to the smallest setting on the slider. It does look like there are certain UI locales that have a minimum font size set to 12 px though, like Chinese, Korean, and Japanese.

https://www.fyianlai.com/2012/01/google-chrome-minimum-font-size-issue/

I imagine though that both of your profiles would likely use the same locale. Provided your users aren’t using one of the above UI locales, then I’d expect them to be able to see minimum fonts that are smaller than 12px by default.

1 Like

That’s alright, I may never know what caused it, but I will keep my ears open to any word coming from the viewers of my work. If fonts in my prototypes will seem out of place for them I will know exactly what to ask them.

Thanks a lot, that’s a top class support, Alyssa!

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