Skip to main content

My team and I made a pixel-perfect mobile design on figma (using iPhone 11 frame), but when we got to development (Webflow), we realized the font size represented in the mobile figma (ie. 36px) was not accurate when implemented during development. The font size on the site was a lot larger visually, despite being the exact same size and the exact same font file. It feels very misleading and I’m not sure if maybe this was just an isolated experience because of the font we used. Just never thought the discrepancy would be so large. I thought my dev was trying to cause us pain on purpose haha.


Has anyone ever experienced this in the past? Is there a workaround? Right now, I am thinking I may need to make a mobile style guide and eyeball it moving forward.

Happens to me as well on WordPress =(


Would highly appreciate a solution from the Figma Team/Community

I’ve solved this “mystery” multiple times (not on this forum) and all the time it’s caused by the user error. Maybe you are viewing your mockups with non-100% zoom in Figma, maybe you have custom interface size in Figma, maybe something is wrong with your display density and/or code. If that doesn’t solve the issue, send screenshots of the entire screen comparing the two (Figma and browser) and the code/properties panel in Webflow.

I’m having the same problem with Wordpress but I don’t know where to set the display density. Can you help me?

Mac: Change your Mac display’s resolution - Apple Support


Windows: View display settings in Windows 10

Terms & ConditionsCookie settings