Best Practice - Scaling Typography

Hi all,

I have been working on my site and whilst designing I completely forgot about designing it for viewing on high-resolution screen sizes ie. 4K or the iMac 5K.

I had a quick browse on YouTube for some tutorials and one mentioned about setting the base font (body all types) to using vw units. While others recommend EM.

Currently, my site is really bad under anything beyond 1920pixels. I have pretty much hardcoded my font sizes in per breakpoint. Especially on the largest breakpoint, 1920 pixels, going as high as 4k or 5k resolution the font size is tiny.

What is the best practice approach, in general, to allow typography scaling from mobile device all the way up to 5k resolution?

Does anyone know of a good clonable project that I can refer to so that i can improve my understanding?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I managed to figure a method by referring to this tutorial, Responsive Typography 2020 (Font Size Scaling in Webflow) - YouTube

Hope this helps someone else who may encounter a similar problem.