Why are rems/ems used for fonts? and %/vh/vw used for shapes/<divs>?

I use rems and ems for fonts because of how they act. For example, ems resize based on the parent div.

It’s the equivalent of mixing up percentage and pixels for me. One is responsive and the other is static. Both serve a purpose, but they each have their best use cases that just don’t overlap very well.

The above answer isn't quite right, both em/rem and vh/vw are dynamic, the difference being vw/vh will change as the screen changes and em/rem will change when the parent value is changed (normally with a media query). The distinction is why we use each for their own purpose - - which is not at all to say you can't use em/rem for container size or the other way around, there is no 'rights' way. But imagine you want to create a page with a list of items, 3 items per line. If you set the total size + padding/margin of each of these elements to 33vw, you'll always have 3 elements taking up one line, no matter the screen size. That's a lot easier to manage than rem/em which would require media queries to accomplish the same thing. On the otherhand, you want fonts to adjust at breakpoints, not as the page shrinks and expands, em/rem let's you create a media query where ONE value change can adjust every single piece of text on the page, but zooming in won't decrease your font size. Try setting font to a vw value, it's really annoying to read. I hope that helps!