Keep font-size aspect ratio when zooming


I’m developing a website with a map. When you hover over certain locations on the map, a text box appears next to them. However, the text size is currently quite large. When I zoom in on the map to make the streets more visible, the text becomes even bigger and unreadable.

Is there a way to make the font size adjust based on the zoomed screen width?

Off the top of my head I would say use rem to define the text size, but I’d need some code to be sure.

Absolutely! You can use viewport units like vw (viewport width) to adjust the font size proportionally with zoom. Set the font-size in vw for the text box content. This way, the text scales relative to the zoomed viewport width.