रिस्पॉन्सिव फ़ॉन्ट साइज़ के लिए एक फ़ॉर्मूला

• New York Times, Medium, Substack जैसी कई वेबसाइटें breakpoint (जैसे 768px) रखती हैं और उसी आधार पर फ़ॉन्ट साइज़ बदलती हैं (1.125 rem और 1.25rem)
• CSS के calc का उपयोग करके इससे मिलते-जुलते मान लिखे जा सकते हैं: calc(1.0625rem + 0.2604vw)
• इसे round करने पर 1rem + 0.25vw के रूप में लिखा जा सकता है। इसलिए अब मैं ज़्यादातर वेबसाइटों पर नीचे दिया गया CSS इस्तेमाल करता हूँ

:root {  
  font-size: calc(1rem + 0.25vw);  
}  

[yanggitak]

अगर PC पर डिज़ाइन मॉकअप जैसा ही implementation करना है, तो शायद scrollbar की चौड़ाई को exclude करने वाला CSS variable भी formula में शामिल होना चाहिए। मुझे पता है कि vw unit की चौड़ाई scrollbar की चौड़ाई सहित मानी जाती है.

अगर पूरी image की तरह आसपास के elements के margins भी उसी अनुपात में बढ़ने-घटने चाहिए, तो नीचे दी गई साइट का font setting तरीका भी संदर्भ के लिए अच्छा रहेगा। Galaxy Fold (320px) या high-resolution monitor के मामले में breakpoint लगाकर इसे उचित रूप से सीमित करना भी ठीक रहेगा.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/

[cometkim]

यह एक उपयोगी approximation तो है, लेकिन वास्तव में इस्तेमाल होने वाले Fluid Typography के breakpoints को पूरी तरह replace करना मुश्किल है.

आमतौर पर clamp(min_rem, calc_relative_vw, max_rem) को हर breakpoint पर content की readability और container के shape के हिसाब से अलग-अलग apply किया जाता है, लेकिन अगर एक ही formula से इसे handle करें तो unusual form factors को support करना कठिन हो जाता है.

उदाहरण के लिए Android popup window, 21:9 monitor, या HMD जैसे environments.

[nemorize]

Android popup या HMD जैसी चीज़ों के बारे में तो मुझे ठीक से नहीं पता..
21:9 जैसे मामलों में vh को भी साथ में इस्तेमाल करें तो क्या ठीक नहीं रहेगा?
calc(1rem + min(1vw, 1vh) * 0.25) जैसी फील के साथ।