Streaming live at 10am (PST)

Designer design doesn't match real world design

Hi,
I’ve attached a few screenshots for guidance.
I’m designing a gardening website and found that what’s shown in the Webflow design for the Macbook resolution (2560px) is not what the actual website looks like when I open it in Safari (please see the font size, it’s much smaller in Safari).
I don’t understand what’s wrong and why Webflow designer is “lying to me”.
I’ve also attached my text style, which I’ve selected in ‘VW’.
Thanks for the help!

Is there a particular reason to use VW for this? Using VW for width will use the width of the user’s browser window to calculate the font size of the text. This will lead to a wide variation in the font size that your users will see and doesn’t seem like a good approach for your use case here as (I think?) the tiles your text is contained by are a fixed size anyway.

IMO just use pixels for size here. If the tiles are a fixed size then you probably don’t even want to use EM to make sure that the text will never overflow from the boxes.

Thanks Jason!
I tried to use vw only for higher resolution designs, because otherwise on bigger screens the font is way too small.
What is a good way then to make sure the font size is relative to the screen resolution?

You can use VW to achieve that. But my point is that if your tiles are a fixed size you want precise control over the text size within them anyway, so VW isn’t really the best choice. You don’t want a situation where the text potentially spills out past the tiles, or where the text is way to small.

Is the size of your tiles relative to the screen resolution? If not then just use a pixel size for the text.

Yes, most elements on screen are VW, but only for larger breakpoints. The tile is also fixed to 11vw. It kinda “scales up” the design for larger screens.
Finally I managed to find how to share the read-only link:
https://preview.webflow.com/preview/garden-art?utm_medium=preview_link&utm_source=designer&utm_content=garden-art&preview=a8aedd4aba676246be0026eb0ff8d7f6&pageId=60392addd54b5a8be0fc672c&mode=preview