هذه طريقة لجعل حجم الخط متجاوبًا مع حجم الشاشة، مع حد أدنى مضمون:

body {
  font-size: calc(1rem + 0.5vw);
}

كيف تعمل؟

• 1rem: قاعدة ثابتة (16px غالبًا)، فلا يصغر الخط أكثر من اللازم.
• 0.5vw: نصف بالمئة من عرض الشاشة، فيكبر الخط قليلًا كلما كبرت الشاشة.

على جوال عرضه 400px تقريبًا: 16 + 2 = 18px. وعلى شاشة 1600px: 16 + 8 = 24px.

بديل أحدث: clamp()

body {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

clamp() تضيف حدًّا أعلى أيضًا، فلا يصبح الخط ضخمًا على الشاشات العريضة جدًا.