Keep font-size aspect ratio when zooming

HTML & CSS
1

Hello,

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?

2

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.

3

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.