iamdtms<p><span class="h-card" translate="no"><a href="https://chitter.xyz/@batbeeps" class="u-url mention">@<span>batbeeps</span></a></span>: <br />It must be a calc(): <a href="https://mas.to/tags/xs" class="mention hashtag" rel="tag">#<span>xs</span></a> <a href="https://mas.to/tags/viewport" class="mention hashtag" rel="tag">#<span>viewport</span></a> have font-size: 100 &amp; <a href="https://mas.to/tags/xl" class="mention hashtag" rel="tag">#<span>xl</span></a> viewport have font-size: 1000? Units you are looking for: <a href="https://mas.to/tags/dvw" class="mention hashtag" rel="tag">#<span>dvw</span></a>, <a href="https://mas.to/tags/wdth" class="mention hashtag" rel="tag">#<span>wdth</span></a>. For example with <a href="https://mas.to/tags/media" class="mention hashtag" rel="tag">#<span>media</span></a> (or <a href="https://mas.to/tags/container" class="mention hashtag" rel="tag">#<span>container</span></a>) query: <a href="https://mas.to/tags/get" class="mention hashtag" rel="tag">#<span>get</span></a> viewport size, than <a href="https://mas.to/tags/set" class="mention hashtag" rel="tag">#<span>set</span></a> font-size. Hope it helps: <br /><a href="https://web.dev/variable-fonts/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="">web.dev/variable-fonts/</span><span class="invisible"></span></a></p>