I think I created fully responsive sizes that look the same at every resolution. The whole thing involves combining min() and calc() calculations in CSS. Based on the size from the design for a given screen resolution. For example, we get a design for mobile devices with a width of 576px. The font size for this resolution in the project is 24px. When scaling the page, we will get the same proportions as in the project. I’m curious about your opinion. Is there a better solution for the full size ratio?

Example:
font size: min(calc((24 / 576) * 100vw), 24px)

I also using the vars and classes like this:

<style>
    --sm-24px: calc((24 / 576) * 100vw);

    .sm-text-24 {
        font-size: min(var(--sm-24px), 24px);
    }
</style>