Visual difference in font size between figma design and real website

I have been dragging my brain over this for months now. So I always had this issue of why same font size looks different in website than figma design. For example, a 18px text looks bigger in a real website than in figma design. It was not an issue until I got a freelancing website. I created some designs for web at 1920px and now I am worried about what text size should I hand over to the developer. I am using a different website as inspiration and hence when compared the text in website looks bigger. I used 32px for paragraph text in my design but it will look huge in a real website, like a heading. So what do I do?

I tried to change frame size and yet the problem remained, even though I went down to 1288px resolution?

2 Likes

So, First things first. Never design for 1920 at first, use the smallest screen size, Ideally which is 1280*720. The reason why your text size looks huge can be of two reasons.

a) The Developers use a unit called rems, Which are responsive according to screen size.
b) All PC Display Resolutions are always scaled up. For example, a Windows Device will never have its resolution set up as 100% by default.

Now, Coming to the real reason. 32 px is even huge for a design. Usually, 32 px are used for headings and Banner Titles.

Iā€™d suggest, when you ideally go for Inspirations from a website, open the inspect panel and inspect, what font size they have used while Implementing for a 100% scaled Display.

Thats why its said in case of fonts, never trust what you see, trust Numbers.
a 14 px might look like 18px on a 150% scaled up Display. Bt if you inspect, it will show you 14.

For body Texts 14-16 px are the ideal sizes.

feel free to ask of you have any other concerns. Thanks.

4 Likes

My situation is quite the opposite.
The text is larger on the Figma design but what the developer implements is way way smaller.
Does the same solution you suggested apply?

1 Like