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?

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.

3 Likes