On my last project I was designing a website in Figma and I realized there is a problem I was not so aware of.
In Windows 10, at the Display Settings, there is an option for Display Resolution, this varies from device to device and this was the known variable when it comes to screen-size and display resolution. What I mean that it varies, some users have 1280x768, some have 1920x1080 etc. That is why we have Responsive Design.
But I discovered, that apart from that, in Windows 10 there is another device setting that affects the Live Design and the Design Preview generated by a dynamic editor such as Figma. The setting I am talking about is "Scale and Layout" (the screenshot attached):
By default, this setting is set to 150%, but I am using it at 100% so that I can see more stuff on the screen.
The problem is that the design (font-size, image size, layout) looks a lot different if you change that Scale setting from 100% to something higher. It goes up to 175%. :)
At larger scale, a font-size of 10px, that you want it to be small & subtle looks like 18px font-size or higher.
How do you work around this problem? How do you explain it to the client? Especially when the client is not a geek and has little to no experience with computers/laptops, but mostly uses a smartphone?
I stumbled across this problem during a live call yesterday. It can be very annoying…