Font size displaying larger in browser than in Figma

Ask the community
1

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
Screen Shot 2021-05-11 at 20.57.342964×1836 355 KB

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
Screen Shot 2021-05-11 at 21.06.292660×350 108 KB

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

2

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.

3

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

5 Likes
5

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!

1 Like
6

i don’t have that option :frowning:

image
image492×728 53 KB

3 Likes
7

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).

3 Likes
8

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).

3 Likes
9

The same problem for me.

1 Like
10

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
figma_font1655×1900 111 KB

11

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
figma_font_21090×1428 181 KB

12

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

13

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.