Skip to main content

The font size is display larger in the browser than in figma - see screen shot. It’s noticeably larger. Figma is set to 100% zoom level. No zooming or anything with browser.


Screen Shot 2021-05-11 at 20.57.34


So thought the font use in the browser was just larger, so took a screenshot and dragged it into figma, overlaying it on the font style directly in figma. It’s the same size.


Screen Shot 2021-05-11 at 21.06.29


Can only think it’s something render related, but the different is to large to be a render issue. Or is 100% in figma smaller than the browser, which doesn’t seem like that would be the answer. Dunno, I’m completely lost. Can anyone help explain what is going on here?


Many thanks

An update. Discovered that when viewing the figma file in the browser all the font sizes are the same, however when compared to the desktop app, they are smaller within the app. I’m primarily using the desktop app to design in, and can’t find any settings that have been adjust which would affect the scale of either the app or browser. I’m using an mac running macOS Catalina. 10.15.6.

Thank you.

Discover a solution and posting for anyone who has a similar issue.


Within the figma desktop app there is an Interface scale feature. Found here View > Interface Scale

Which you can scale the interface to be larger or smaller. Had the interface scaled down, reset to default to fix issue. View > Interface Scale > Reset to Default

Fonts now the same as in browser.


While this feature helps to reduce the interface size, as a user would not have expected it to scale the canvas and its frames/groups etc so that they are not truly reflective of their zoom level. Would have expected the zoom level to control that so it always looks like you would expect when designing for whatever size. It’s very frustrating and resulted in a quite a bit of work to fix.


Cheers

Thank you for sharing this, I was going crazy trying to figure out, what the problem was! Took me half a day to find this!

i don’t have that option 😦

image

On Windows, the interface scale settings are located in the additional menu, which is located at the top right (near the “Minimize / Maximize / Close” buttons).

Unfortunatelly this is not working. I have the problem that even in browser Figma has incorrect font sizes (it says 12px, but it is not).

The same problem for me.

I’m also getting the same issue, not using any kind of Figma desktop app.


I’m using figma web browser on chromium.


When I set to 18px on Figma, it shows that it’s 23px on VS Code live browser…


No zoom or any magnified settings on my browser.


figma_font

Alright I was able to fix the issue.


I had to use the proper CSS syntaxes:


      font-family: Raleway-ExtraLight;

      font-size:18px;

      font-weight: normal;

Solved the issue:


figma_font_2

What did you do with this problem? I have the same problem.

In my case this was caused by a difference in the web font vs the font being used in Figma. They were the same font but different font files.


Once I loaded the exact same font file that Figma was using onto the website, the sizes became consistent.

Terms & ConditionsCookie settings